How do loop through nested json object with javascript?

Question

Struggling with iterating through the following return json string from an API:

{
"data": [
{
  "ActionNeeded": null,
  "OldestStatus": null,
  "ServiceHost": "W501",
  "ServiceName": "Renewals",
  "ServiceStatusDateTime": "2023-03-15T22:47:05.313000",
  "ServiceVersion": "1.0.0",
  "SortOrder": "0",
  "TimeAgo": null
},
{
  "ActionNeeded": null,
  "OldestStatus": null,
  "ServiceHost": "W202",
  "ServiceName": "Monitor",
  "ServiceStatusDateTime": "2023-03-15T22:46:42.560000",
  "ServiceVersion": null,
  "SortOrder": "1",
  "TimeAgo": null
},
{
  "ActionNeeded": null,
  "OldestStatus": null,
  "ServiceHost": "W0070204",
  "ServiceName": "Monitor",
  "ServiceStatusDateTime": "2023-03-15T22:46:39.840000",
  "ServiceVersion": "2.0.2",
  "SortOrder": "1",
  "TimeAgo": null
}
]
]

I've tried a for..in loop, but am only managing to get the first "set" of key/value pairs.

Here is my current code:

var json_obj = JSON.parse(event.data);

// Returned records
const items = json_obj['data'];

for (var item_index in items) {
    if (items.hasOwnProperty(item_index)) {
        console.log(item_index);
    }
}

How can I loop through each "set" of data and out both key and value?

So you want to loop over all the objects in that array? Or do you want to go through all objects recursively? — Unmitigated, Mar 16 '23 at 04:06
Would like to loop through each index in that "data" object (each set of { }) and be able to reference each key/value set (at a time if possible). Like.. data[0] = {"ActionNeeded": null, "OldestStatus": null}, data[1] = etc — Source Matters, Mar 16 '23 at 04:09

score 1 · Answer 1 · answered Mar 16 '23 at 04:13

1

You can use Array#forEach or for...of to loop over an array and Object.entries to get all the key-value pairs in an object.

let o={data:[{ActionNeeded:null,OldestStatus:null,ServiceHost:"W501",ServiceName:"Renewals",ServiceStatusDateTime:"2023-03-15T22:47:05.313000",ServiceVersion:"1.0.0",SortOrder:"0",TimeAgo:null},{ActionNeeded:null,OldestStatus:null,ServiceHost:"W202",ServiceName:"Monitor",ServiceStatusDateTime:"2023-03-15T22:46:42.560000",ServiceVersion:null,SortOrder:"1",TimeAgo:null},{ActionNeeded:null,OldestStatus:null,ServiceHost:"W0070204",ServiceName:"Monitor",ServiceStatusDateTime:"2023-03-15T22:46:39.840000",ServiceVersion:"2.0.2",SortOrder:"1",TimeAgo:null}]};
o.data.forEach((x, i) => {
  for (const [k, v] of Object.entries(x)) 
    console.log('index', i, k, '=', v);
});

answered Mar 16 '23 at 04:13

Unmitigated

76,500
11
62
80

Let me try this out! I've been so used to jquery's .each stuff, that I'm struggling with vanilla methods for this.. embarrassing lol – Source Matters Mar 16 '23 at 04:15
So this works in a way. So it seems like it goes through every item, and for each item, outputs each key/value pair. Is there a way I can reference a key directly for each "item" instead of looping over every key? That way I can do something like: "for each item, if 'ActionNeeded' != '' then print the ServiceName" – Source Matters Mar 16 '23 at 04:18
@SourceMatters It depends. If you have a string, you need JSON.parse to parse it. If you already have an object, then you don't need to. – Unmitigated Mar 16 '23 at 04:19

score 0 · Answer 2 · answered Mar 16 '23 at 04:24

Here is good approach, hope this work for you!

const eventJsonString = JSON.stringify({
    "data": [
        {
            "ActionNeeded": null,
            "OldestStatus": null,
            "ServiceHost": "W501",
            "ServiceName": "Renewals",
            "ServiceStatusDateTime": "2023-03-15T22:47:05.313000",
            "ServiceVersion": "1.0.0",
            "SortOrder": "0",
            "TimeAgo": null
        },
        {
            "ActionNeeded": null,
            "OldestStatus": null,
            "ServiceHost": "W202",
            "ServiceName": "Monitor",
            "ServiceStatusDateTime": "2023-03-15T22:46:42.560000",
            "ServiceVersion": null,
            "SortOrder": "1",
            "TimeAgo": null
        },
        {
            "ActionNeeded": null,
            "OldestStatus": null,
            "ServiceHost": "W0070204",
            "ServiceName": "Monitor",
            "ServiceStatusDateTime": "2023-03-15T22:46:39.840000",
            "ServiceVersion": "2.0.2",
            "SortOrder": "1",
            "TimeAgo": null
        }
    ]
});

const event = JSON.parse(eventJsonString);
const items = event.data;

items.forEach(item => {
    const { ActionNeeded, OldestStatus, ServiceHost, ServiceName,
        ServiceStatusDateTime, ServiceVersion, SortOrder, TimeAgo } = item;

    console.log(ActionNeeded);
    console.log(OldestStatus);
    console.log(ServiceHost);
    console.log(ServiceName);
    console.log(ServiceStatusDateTime);
    console.log(ServiceVersion);
    console.log(SortOrder);
    console.log(TimeAgo);
    console.log("---------------");
});

score 0 · Answer 3 · answered Mar 16 '23 at 04:46

In your code snipper items is an array, but you are using for...in which is meant for objects. You can change it to for...of and you won't need hasOwnProperty anymore since it's meant for keys in an object:

var json_obj = JSON.parse(event.data);

// Returned records
const items = json_obj['data'];

for (var item of items) {
    console.log(item);
}

How do loop through nested json object with javascript?

3 Answers3