Iterate over a json Object in javascript having an array inside array

Question

I am new to the web Development. I do have an json obj which is like

$scope.jsonData =     {
        "messages": {
            "A": [{
                "missingFields": [{
                    "RESPONSIBILITY": ""
                }],
                "temporaryId": 2,
                "messages": "",
                "id": 2,
                "content": ""
            }, {
                "missingFields": [{
                    "RESPONSIBILITY": ""
                }],
                "temporaryId": 3,
                "messages": "",
                "id": 3,
                "content": ""
            }, {
                "missingFields": [{
                    "RESPONSIBILITY": ""
                }],
                "temporaryId": 4,
                "messages": "",
                "id": 4,
                "content": ""
            }],
            "B": [{
                "missingFields": [{
                    "CITY": ""
                }, {
                    "PINCODE": ""
                }],
                "messages": "No Address details found.",
                "id": -1,
                "content": ""
            }]
        }
     }

Now I want to iterate through this object and I want to get the "RESPONSIBILITY" field.Here I tried like -

for (var i=0; i < $scope.jsonData.messages.length; i++) {
}

But it is giving the length of the messages as undefined. SO, and also I want to use that in the angular code . I used like -

ng-repeat="suggestion in jsonData.messages

Can any one please explain me this . I searched a lot and tried so I am asking this question.

There's no such thing as a "JSON Object"

Andreas
– Andreas

2018-03-09 14:12:15 +00:00
Commented Mar 9, 2018 at 14:12 — Andreas
– Andreas, Commented Mar 9, 2018 at 14:12
messages is an object and not an array

Andreas
– Andreas

2018-03-09 14:12:38 +00:00
Commented Mar 9, 2018 at 14:12 — Andreas
– Andreas, Commented Mar 9, 2018 at 14:12
Okay Thanks for the information

ganesh kaspate
– ganesh kaspate

2018-03-09 14:13:27 +00:00
Commented Mar 9, 2018 at 14:13 — ganesh kaspate
– ganesh kaspate, Commented Mar 9, 2018 at 14:13
Also $scope.jsonobj <> $scope.jsonData

Keith
– Keith

2018-03-09 14:13:57 +00:00
Commented Mar 9, 2018 at 14:13 — Keith
– Keith, Commented Mar 9, 2018 at 14:13
Updated code as per comments

ganesh kaspate
– ganesh kaspate

2018-03-09 14:15:20 +00:00
Commented Mar 9, 2018 at 14:15 — ganesh kaspate
– ganesh kaspate, Commented Mar 9, 2018 at 14:15

Eddie · Accepted Answer · 2018-03-16 07:33:20Z

3

You need to have nested loops and use Object.keys to get the key

Like:

for ( var k in jsonData.messages ) {
   jsonData.messages[k].forEach((v)=>{

       let tID = v.temporaryId || ""; //Get the temporaryId
       console.log( tID );

       v.missingFields.forEach((o)=>{
           //Object.keys(o)[0] <-- To get the first key of the object
           console.log( Object.keys(o)[0] );
       });
   });
}

To make a simplified array, you can use Object.values and map the values.

let jsonData = {
  "messages": {
    "A": [{
      "missingFields": [{
        "RESPONSIBILITY": ""
      }],
      "temporaryId": 2,
      "messages": "",
      "id": 2,
      "content": "CONTENT 1"
    }, {
      "missingFields": [{
        "RESPONSIBILITY": ""
      }],
      "temporaryId": 3,
      "messages": "",
      "id": 3,
      "content": ""
    }, {
      "missingFields": [{
        "RESPONSIBILITY": ""
      }],
      "temporaryId": 4,
      "messages": "",
      "id": 4,
      "content": ""
    }],
    "B": [{
      "missingFields": [{
        "CITY": ""
      }, {
        "PINCODE": ""
      }],
      "messages": "No Address details found.",
      "id": -1,
      "content": ""
    }]
  }
}

let simplified = Object.values(jsonData.messages).map((v) => {
  let t = [];
  v.forEach(o => {
    t.push({
      temporaryId: o.temporaryId || "",
      missingFields: o.missingFields.map((x) => Object.keys(x)[0]),
      content: o.content || ""
    });
  });
  return t;
}).reduce((c, v) => c.concat(v), []);

console.log(simplified);

Using just for loops.

var simplified = [];
for ( var k in jsonData.messages ) {
    for ( var i in jsonData.messages[k] ) {
        var temporaryId = jsonData.messages[k][i].temporaryId;
        var content = jsonData.messages[k][i].content;
        var missingFields = [];

        for ( var x in jsonData.messages[k][i].missingFields ) {
            for ( var y in jsonData.messages[k][i].missingFields[x] ) missingFields.push( y );
        }

        simplified.push({
          temporaryId: temporaryId,
          missingFields: missingFields,
          content: content
        });
    }
}

edited Mar 16, 2018 at 7:33

answered Mar 9, 2018 at 14:23

Eddie

26.8k6 gold badges39 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

30 Comments

ganesh kaspate Over a year ago

One thing, Here How can I use this to get the temporaryId in template of html in ng-repeat="suggestion in jsonData.messages .

Eddie Over a year ago

I added the code to access the temporaryId @ganesh

ganesh kaspate Over a year ago

Yes, Thanks a lot.Can I ask you one more question ?

Eddie Over a year ago

Happy to help. Sure.

ganesh kaspate Over a year ago

Here, Now From this data I want to create one more object which will read from the way you did and will create an object. Like -

|

oldmayn · Accepted Answer · 2018-03-09 15:04:28Z

0

const flatten = [].concat.apply([], Object.values(jsonData.messages))
const result = [].concat.apply([], flatten.map(item => item.missingFields))

answered Mar 9, 2018 at 15:04

oldmayn

1812 gold badges3 silver badges14 bronze badges

1 Comment

Alexander Over a year ago

While this code may answer the question, providing additional context regarding how and why it solves the problem would improve the answer's long-term value.

Collectives™ on Stack Overflow

Iterate over a json Object in javascript having an array inside array

2 Answers 2

30 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

30 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related