How to parse a nested json in angular

Question

I have a complex nested json and I want to parse and display the data in html.

My json looks like:

{
  "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,
          }
         ]

      }
    },
  ]
}

This is a subset of my json. How to parse this data and get the array of Design Names

One suggestion would be to use Datatables, though there are tons of libraries to achieve what you desire. — AmazingDayToday, Jul 09 '19 at 17:51
are you trying to show the data in HTML, where you have to loop over the array of this complex JSON, I would suggest you use "Paste JSON As Code" extension of VSCode If you use VS Code. — Mr-K10, Jul 09 '19 at 18:17
Possible duplicate of [Safely turning a JSON string into an object](https://stackoverflow.com/questions/45015/safely-turning-a-json-string-into-an-object) — Liam, Oct 15 '19 at 14:55

score 4 · Answer 1 · answered Jul 09 '19 at 17:51

This is valid JSON so you can use JSON.parse() method. And then you can use map method to iterate over and get design names like following:

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

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

Hope this helps

score 3 · Answer 2 · answered Oct 29 '20 at 13:27

If your JSON keys does not have spaces:

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

You can do this:

const myJsonData = JSON.parse(response);

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

score 1 · Answer 3 · answered Jul 09 '19 at 17:52

DEMO

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

Phạm Cường · Answer 4 · 2022-03-06T13:18:10.653

I have the same complex nested json too and I want to parse and display the data in html.

My json looks like:

{
    "text": "Apple",
    "userName": "Alex",
    "dtoList": [
      {
        "text": "Banana",
        "userName": "Sam",
        "dtoList": [
          {
            "text": "Mango",
            "userName": "Alex",
            "dtoList": [],
          },
        ],
      },
      {
        "text": "Kiwi",
        "userName": "Clover",
        "dtoList": [
          {
           "text": "Carrots",
            "userName": "Alex",
            "dtoList": [],
          },
        ],
      },
      {
        "text": "Beef",
        "userName": "Adam",
        "dtoList": [],
      },
    ],
  },
  {
    "text": "Egg",
    "userName": "Adam",
    dtoList: [
      {
        "text": "Broccoli",
        "userName": "Alex",
        "dtoList": [],
      },
      {
        "text": "Pumpkin",
        "userName": "Sam",
        "dtoList": [
          {
            "text": "Brussels sprouts",
            "userName": "Adam",
            "dtoList": [],
          },
          {
            "text": "Fruit loops",
            "userName": "Clover",
            "dtoList": [],
          },
        ],
      },
    ],
  },

How to parse this data in angular T_T

This does not really answer the question. If you have a different question, you can ask it by clicking [Ask Question](https://stackoverflow.com/questions/ask). To get notified when this question gets new answers, you can [follow this question](https://meta.stackexchange.com/q/345661). Once you have enough [reputation](https://stackoverflow.com/help/whats-reputation), you can also [add a bounty](https://stackoverflow.com/help/privileges/set-bounties) to draw more attention to this question. - [From Review](/review/late-answers/31220247) — Mori, Mar 09 '22 at 15:51
Thank you for replying me. I have a question like that in [link](https://stackoverflow.com/questions/71354474/cant-bind-data-from-spring-boot-to-angular-with-treeview-data) **bold** here — Phạm Cường, Mar 09 '22 at 17:17

How to parse a nested json in angular

4 Answers4