d3.js parse JSON-like data from file

Question

I am struggling with reading in data from a JSON file.

The JSON file that I want to read has the following structure:

{"name":"Andy Hunt",
  "title":"Big Boss",
  "age": 68,
  "bonus": true
}
{"name":"Charles Mack",
  "title":"Jr Dev",
  "age":24,
  "bonus": false
}

However, as far as I understand, d3.js can only parse JSON arrays that have the following structure:

[
 {"name":"Andy Hunt",
  "title":"Big Boss",
  "age": 68,
  "bonus": true
 },
 {"name":"Charles Mack",
  "title":"Jr Dev",
  "age":24,
  "bonus": false
 }
]

I am using this code snippet trying to display the first data object just to see if it works:

d3.json("/data/sample_data.json", function(data) {
  console.log(data[0]);
});

This works for the second JSON structure, but not for the first one.

Now my question: Is it possible to somehow read in data with d3.js? Or do I have to write a program, that reformats the whole JSON file as a JSON array?

EDIT: Turns out the data I wanted to use was formatted as NDJSON. So there is currently no way to read the data natively with d3.js other than parsing it as text and reformat it on the go the way @Mark explained.

Mark · Accepted Answer · 2018-04-02 15:18:00Z

5

As @Shashank points out your JSON is simply invalid. This has nothing to do with d3 but rather JavaScript and acceptable JSON formats. So, how can we fix it? You could do it in your d3/javascript itself instead of pre-processing the files.

// how many lines of JSON make an object?
var chunks = 5,
    data = [];
//download file as TEXT
d3.text("data.txt", function(error, text) {
  if (error) throw error;
  // split on new line
  var txt = text.split("\n");
  // iterate it
  for (var i = 0; i < txt.length; i += chunks) {
    var block = "";
    // grab blocks of 5 lines
    for (var j = 0; j < chunks; j++ ){
      block += txt[i+j];
    }
    // parse as JSON and push into data ARRAY
    data.push(JSON.parse(block));
  }
  console.log(data);
});

Here it is running on a plunker.

answered Apr 2, 2018 at 15:18

Mark

109k20 gold badges180 silver badges238 bronze badges

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

1 Comment

ChrisW Over a year ago

Thank you for this! This worked like a charm and I was able to modify it to parse my data. I'm still a bit confused why my data source is not valid as it seems other devs don't have any problem with it. But with this solution I should be able to get it to run.

Shashank · Accepted Answer · 2018-04-02 14:15:47Z

2

The format of the JSON file you're trying to read is incorrect. JSON (as per standards) can be a collection of name/value pairs i.e. an object OR a list of objects i.e. an array of objects. Refer this: http://json.org/

If you're JSON file has the following data (notice the format - a single object):

{
 "name":"Andy Hunt",
 "title":"Big Boss",
 "age": 68,
 "bonus": true,
 "value": 500
}

d3.json will provide the following result:

=> {name: "Andy Hunt", title: "Big Boss", age: 68, bonus: true, value: 500}

You've already tried it with the array structure.

I'd suggest you to change the JSON file to an array of objects. Hope this clears it up.

answered Apr 2, 2018 at 14:15

Shashank

5,6701 gold badge15 silver badges17 bronze badges

Collectives™ on Stack Overflow

d3.js parse JSON-like data from file

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related