How to access nested JSON object key and values

Question

I am trying to access the key and values of my nested array like this:

var obj = $.getJSON("mydata.json", function() {
    console.log( "load success" );
});

Object.keys(obj[2].type).forEach(function(key) {
    console.log(key, obj[key]);
});

But I get an error.

Here's the structure of the JSON file:

{
"nodes": [
    {
        "nd": "nd1",
        "cat": "cat1"
    }
],
"links": [
    {
        "id": 100
    }
],
"types": [
            {
                "type": "one",
                "image": "image001"
            },
            {
                "type": "two",
                "image": "image002"
            },
            {
                "type": "three",
                "image": "image003"
            }
        ]

}

My goal is to get a list of values of:

one two three

What error do you get?

Vitalii Strimbanu
– Vitalii Strimbanu

2016-11-10 15:04:40 +00:00
Commented Nov 10, 2016 at 15:04 — Vitalii Strimbanu
– Vitalii Strimbanu, Commented Nov 10, 2016 at 15:04
var vals = obj.types.map((x) => x.image; });

Stan
– Stan

2016-11-10 15:07:27 +00:00
Commented Nov 10, 2016 at 15:07 — Stan
– Stan, Commented Nov 10, 2016 at 15:07
There is no key 2 for the object

Dimitri
– Dimitri

2016-11-10 15:09:17 +00:00
Commented Nov 10, 2016 at 15:09 — Dimitri
– Dimitri, Commented Nov 10, 2016 at 15:09

Fermín · Accepted Answer · 2016-11-10 15:08:42Z

3

You can do it with this code:

var obj = {
"nodes": [
    {
        "nd": "nd1",
        "cat": "cat1"
    }
],
"links": [
    {
        "id": 100
    }
],
"types": [
            {
                "type": "one",
                "image": "image001"
            },
            {
                "type": "two",
                "image": "image002"
            },
            {
                "type": "three",
                "image": "image003"
            }
        ]   
};

Object.keys(obj["types"]).forEach(function(key) {
    console.log(obj["types"][key].image);
});

answered Nov 10, 2016 at 15:08

Fermín

7451 gold badge7 silver badges25 bronze badges

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

Comments

GiuServ · Accepted Answer · 2016-11-10 15:20:04Z

1

Something like that?

You have to firstly acces to object.types attribute, then iterate on it to retrieve every type.

var object = {
  "nodes": [{
    "nd": "nd1",
    "cat": "cat1"
  }],
  "links": [{
    "id": 100
  }],
  "types": [{
    "type": "one",
    "image": "image001"
  }, {
    "type": "two",
    "image": "image002"
  }, {
    "type": "three",
    "image": "image003"
  }]
};


function parseJson(object){
    object.types.forEach(function(key) {
      console.log(key.type);
    });
}

parseJson(object);

--- update to anwer question in comment ---

you could enclose the code in a function, and call it when you load your json:

$.getJSON("mydata.json", function(data) {
    parseJson(data);
});

edited Nov 10, 2016 at 15:20

answered Nov 10, 2016 at 15:06

GiuServ

1,2351 gold badge15 silver badges35 bronze badges

1 Comment

passion Over a year ago

this works, but how about load it from an external file. how do I do it with getJSON command?

David Hedlund · Accepted Answer · 2016-11-10 15:07:11Z

1

Object.keys(obj[2].type) doesn't really make sense here. You're not iterating over the properties of any object, you're accessing the same property in a set of objects. This is what map does.

var types = obj.types.map(x => x.type);

answered Nov 10, 2016 at 15:07

David Hedlund

130k33 gold badges205 silver badges223 bronze badges

2 Comments

Vitalii Strimbanu Over a year ago

isn't map(x => x.type) a TypeScript syntax?

David Hedlund Over a year ago

@VitaliiStrimbanu: Probably that as well, but it's also EcmaScript 6.

Vitalii Strimbanu · Accepted Answer · 2016-11-10 15:09:36Z

1

$.getJSON returns a promise because it is asynchronous, but you can set your variable in your callback:

var obj;
$.getJSON("mydata.json", function(data) {
    obj = data;
    Object.keys(obj[2].type).forEach(function(key) {
        console.log(key, obj[key]);
    });
});

link to documentation

answered Nov 10, 2016 at 15:09

Vitalii Strimbanu

4773 silver badges7 bronze badges

Comments

JohnLock · Accepted Answer · 2016-11-10 15:11:39Z

1

You should post the error that you get, but I can tell you that the problem is that your output code executes before the JSON object has been loaded. Try this:

$.getJSON("mydata.json", function(obj) {
    console.log( "load success" );
    Object.keys(obj[2].type).forEach(function(key) {
        console.log(key, obj[key]);
    });
});

answered Nov 10, 2016 at 15:11

JohnLock

4314 silver badges5 bronze badges

Comments

Dimitri · Accepted Answer · 2016-11-10 15:22:11Z

0

Here is a functional way to do it in js :

    var types = $.getJSON("mydata.json").done(function(response) {
       return Object.keys(data["types"]).map(function(element){
            return element.type;
        }).join(' ');
    });            

   console.log(types);

answered Nov 10, 2016 at 15:22

Dimitri

8,31819 gold badges75 silver badges133 bronze badges

Collectives™ on Stack Overflow

How to access nested JSON object key and values

6 Answers 6

Comments

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related