How to iterate over data in JSON file using D3 javascript

Question

I am trying to iterate over and retrieve some data from JSON file using D3 Javascript.
Here is the JSON file:

{
    "Resources": 
    [
    {
        "subject": "Node 1",
        "group" : "1"
    }, 
    {
        "predicate": "Node 2",
        "group" : "2"
    }, 
    {
        "object": "Node 3",
        "group" : "3"
    }, 
    {
        "subject": "Node 4",
        "group" : "4"
    }, 
    {
        "predicate": "Node 5",
        "group" : "5"
    }, 
    {
        "object": "Node 6",
        "group" : "6"
    }
    ]
}

This is my code in D3 Javascript for iterating and retrieving data:

d3.json("folder/sample.json", function(error, graph) {

  document.write(graph.Resources[0].subject);
  // The code for retrieving all the elements from the JSON file
});

The code above retrieves the first subject which is: Node 1. I could not even retrieve the group.
Could anyone please help me iterate over the JSON file Resources and retrieve the elements: subject, predicate, object and group, using any sort of iterations such as a for loop.

possible duplicate of How to loop through JSON file using jQuery — Lars Kotthoff
– Lars Kotthoff, Commented Nov 15, 2013 at 16:46
You have wrong json file. "group" = "1" should be "group": "1". Exchange all = for : — Anto Jurković
– Anto Jurković, Commented Nov 15, 2013 at 16:47
I edited the JSON file. Thank you for that. I Could not solve it in D3. I though of doing it jQuery. It seems I need it for D3 Javascript code. — Mod
– Mod, Commented Nov 15, 2013 at 16:51
You can use plain loop: for (var i = 0; i < graph.Resources.length; i++) { console.log(graph.Resources[i].group); }. But you do not draw charts that way. — Anto Jurković
– Anto Jurković, Commented Nov 15, 2013 at 16:54

kielni · Accepted Answer · 2013-11-15 16:56:26Z

2

The group lines in your JSON file should look like "group" : "2". Also, your JSON contains a single object (Resources); that's why your document.write is only called once. You'll need to iterate through the value of Resources:

d3.json("test.json", function(error, graph) {
    var resources = graph.Resources;
    for (var i = 0; i < resources.length; i++) {
        var obj = resources[i]
        for (var key in obj) {
            console.log(key+"="+obj[key]);
        }   
    }   
});

will get you

subject=Node 1
group=1
...

answered Nov 15, 2013 at 16:56

kielni

5,0571 gold badge26 silver badges21 bronze badges

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

Comments

Anto Jurković · Accepted Answer · 2013-11-15 20:09:06Z

I'd like to summarize what I've already wrote in several question's comments.

Because posted JSON file was invalid it was not possible to iterate over it. Original JSON file:

{
    "Resources": 
    [
    {
        "subject": "Node 1",
        "group" = "1"
    }, 
...
    {
        "object": "Node 6",
        "group" = "6"
    }
    ]
}

Each line which contains property group = "x" is wrong. It should be group : "x".

Those kind of errors/typos are easily overlooked. They can be find out checking JSON file with proper tool like JSON validator. In this case JSONLint tool reported:

Parse error on line 5:
...            "group"="1"        }    ]
----------------------^
Expecting '}', ':', ',', ']'

After fixing format of file, iteration could be done easily using any loop: variable graph contains object Resources, which is an array of objects. Each of them contains common property group.

Collectives™ on Stack Overflow

How to iterate over data in JSON file using D3 javascript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related