如何以角度解析嵌套的json

Posted 2023-03-13

【中文标题】如何以角度解析嵌套的json

【英文标题】：How to parse a nested json in angular

【发布时间】：2019-11-19 08:03:46

【问题描述】：

我有一个复杂的嵌套 json，我想用 html 解析和显示数据。

我的 json 看起来像：

  "Test Data": [
    
      "First Test": 
        "Design Name": "testname",
        "Output": "1",
        "Data Info": [
          
            "Test Name": "ft",
            "Time": 10,
          
         ]

      
    ,

    
      "First Test": 
        "Design Name": "testname2",
        "Output": "1",
        "Data Info": [
          
            "Test Name": "ft2",
            "Time": 10,
          
         ]

      
    ,
  ]

这是我的 json 的一个子集。如何解析这些数据并获取设计名称数组

【问题讨论】：

到目前为止你尝试了什么？

一个建议是使用 Datatables，尽管有大量的库可以实现您想要的。

您是否尝试在 HTML 中显示数据，您必须在此复杂 JSON 的数组上循环，我建议您使用 VSCode 的“Paste JSON As Code”扩展如果您使用 VS Code .

Safely turning a JSON string into an object的可能重复

【参考方案1】：

这是有效的 JSON，因此您可以使用 JSON.parse() 方法。然后您可以使用map 方法进行迭代并获得如下设计名称：

let myData = JSON.parse(response); // response is the JSON that you provided

let designNames = myData['Test Data'].map(data => data['"First Test"']['Design Name']);

希望对你有帮助

【参考方案2】：

如果您的 JSON 密钥没有空格：

    "rootElement": 
        "firstElem": "Some data",
        "secondElem": 
            "thirdLevelElem": "Yet some other data"
        
    

你可以这样做：

const myJsonData = JSON.parse(response);

let firstElement = myJsonData?.rootElement?.firstElem;
let nestdElement = myJsonData?.rootElement?.secondElem?.thirdLevelElem;

【参考方案3】：

演示

let myData = 
  "Test Data": [
    
      "First Test": 
        "Design Name": "testname",
        "Output": "1",
        "Data Info": [
          
            "Test Name": "ft",
            "Time": 10
          
        ]
      
    ,
    
      "First Test": 
        "Design Name": "testname2",
        "Output": "1",
        "Data Info": [
          
            "Test Name": "ft2",
            "Time": 10
          
        ]
      
    
  ]
;

var result =  myData['Test Data'].map(data => data["First Test"]['Design Name']);
console.log(result);