CODEWITHSUNDEEP
javascriptjsond3.js
ChrisW
ChrisW

Reputation: 43

d3.js parse JSON-like data from file

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.

Upvotes: 1

Views: 1526

Answers (2)

Mark
Mark

Reputation: 108522

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.

Upvotes: 5

Shashank
Shashank

Reputation: 5660

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/

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

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

Upvotes: 2

Related Questions