ForEach Loop JSON AngularJS Object in Object

Question

I am very new to AngularJS and I am trying to learn how to get deeper into a JSON object that has objects inside of objects and sometimes even arrays. This is a "simplified" version I am working with and I hope it will help me get a basic understanding so I can do the rest on my own.

json

 values =      {
          "profile": {
            "fields": {
              "number-of-fields": "700",
              "inside": [
                "test1",
                "test2"
              ],
              "type": "test",
              "values": "450"
            }
          },
          "id": "12312312333645"
        }

code

angular.forEach(values, function(value, key) {
  console.log(key + ': ' + value);
 // I know I need to loop inside of each object I beleieve


});

http://jsfiddle.net/ygahqdge/184/

You can log the whole object to console. If you use f12 tool, you can browse the object in the browser. — omegasbk
– omegasbk, Commented Feb 25, 2016 at 14:02
values is a object..angular.foreEact works on arrays or array of objects. — Pavan Teja
– Pavan Teja, Commented Feb 25, 2016 at 14:05

Adrian Lynch · Accepted Answer · 2016-02-25 16:06:29Z

2

The basics

Traverse object properties with a dot ., traverse array indexes with an index reference, [0|1|2|etc.].

What about your object?

var yoObject = {
    "profile": {
        "fields": {
            "number-of-fields": "700",
            "inside": [
                "test1",
                "test2"
            ],
            "type": "test",
            "values": "450"
        }
    },
    "id": "12312312333645"
}

Get the inside values:

// object   object  object array
   yoObject.profile.fields.inside.map(console.log, console) // ["test1", "test2"]

Get the id:

// object   property
   yoObject.id // "12312312333645"

Get all properties of the fields object:

Object.keys(yoObject.profile.fields) // ['number-of-fields', 'inside', 'type', 'values']

Get all values of the properies from above:

fields = yoObject.profile.fields
Object.keys(fields).map(key => console.log(fields[key])) // ["700", ["test1", "test2"], "test", "450"] // Note: Order isn't guaranteed

Just play about with things. Throw the object in the console and start to manually traverse it. Then try to loop over things.

Have fun!

Note: I tested none of that! :P

this is a question in regards on the right way to loop deep in JSON objects – @user2402107

There's no right way. Sometimes you'll need to be fully dynamic, other times you can hardcode paths into nested properties and values.

Fiddle-Diddle

Nest as many times as you need:

angular.forEach(values, (value, key) => {
  console.log("Value for", key, ":", value);
  angular.forEach(value, (value, key) => {
    console.log("Value for", key, ":", value);
    angular.forEach(value, (value, key) => {
      console.log("Value for", key, ":", value);
    })
  })
});

edited Feb 25, 2016 at 16:06

answered Feb 25, 2016 at 14:12

Adrian Lynch

8,5442 gold badges36 silver badges41 bronze badges

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

6 Comments

user2402107 Over a year ago

Adrian this is an excellent response but it doesnt really show me. Can you make an edit to my jsfiddle to show...

Adrian Lynch Over a year ago

Added more code to the answer. You nest as deep as you need to. How deep do you wanna go?!

user2402107 Over a year ago

my clarity on this is a little poor... there is an overall JSON object that I am not showing these are however the values I need to parse out, the good thing is profile is the first object so the flow is the same..

user2402107 Over a year ago

what I am really looking for is on my Jfiddle to show a loop that logs every level and values at each level

Adrian Lynch Over a year ago

Keep nesting the the loops and it'll get there.

|

omegasbk · Accepted Answer · 2016-02-25 14:03:11Z

0

You can log the whole object to console. By using F12 tool, you can browse the object in the browser.

console.log(objectName);

answered Feb 25, 2016 at 14:03

omegasbk

9061 gold badge10 silver badges25 bronze badges

1 Comment

user2402107 Over a year ago

I got that I have added a plunker to show what I mean, this is a question in regards on the right way to loop deep in JSON objects

Pavan Teja · Accepted Answer · 2016-02-25 14:11:26Z

angular.forEach works on arrays. lets suppose you have an array of objects as this

var values = [{
  "profile": {
    "fields": {
      "number-of-fields": "700",
      "interpertation": [
        "whenever this is ready"
      ],
      "type": "test",
      "values": "450"
    }
  },
  "id": "12312312333645"
},
{
  "profile": {
    "fields": {
      "number-of-fields": "700",
      "interpertation": [
        "whenever this is ready"
      ],
      "type": "test",
      "values": "450"
    }
  },
  "id": "12312312333645"
}]

you can explore each object and its properties like this

angular.forEach(values, function(value, key) {
  console.log(value.profile.fields.values);



});

you can use . notation to access propertes

Collectives™ on Stack Overflow

ForEach Loop JSON AngularJS Object in Object

3 Answers 3

6 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related