Question

我有一个复杂的嵌套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的子集。如何解析这些数据并获取设计名称数组

Answer 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']);

希望这会有所帮助

Answer 2

演示

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);

Answer 3

如果您的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;

如何解析Angular中的嵌套JSON

3 个答案: