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](http://stackoverflow.com/questions/20001134/how-to-loop-through-json-file-using-jquery) — Lars Kotthoff, Nov 15 '13 at 16:46
You have wrong json file. `"group" = "1"` should be `"group": "1"`. Exchange all `=` for `:` — Anto Jurković, Nov 15 '13 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, Nov 15 '13 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ć, Nov 15 '13 at 16:54
To prevent such kind of errors you can use the [JSON validator](http://jsonlint.com/) — Anto Jurković, Nov 15 '13 at 17:13
@LarsKotthoff wrong. the questions are similar, but not exactly duplicate. I checked his questions, one is more about general javascript, this one looks more specific about d3. — thenewseattle, Nov 15 '13 at 17:29
Well. I am quite new to D3 and Javascript. I am trying to work on Forced-Directed Graph. I need some understanding in Javascript and D3. — Mod, Nov 15 '13 at 17:36
@user2864315 what is not clear in this fiddle? http://jsfiddle.net/eMp9Z/2/ you can either keep the json in the javascript or take it into a new file. — thenewseattle, Nov 15 '13 at 21:16

score 2 · Accepted Answer · answered Nov 15 '13 at 16:56

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
...

score 0 · Answer 2 · answered Nov 15 '13 at 20:09

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.

How to iterate over data in JSON file using D3 javascript

2 Answers2