Create multinested JSON from URL in Javascript for d3.js

Question

I have the following issue. I have a flat json available from a URL which I want to load with Javascript as nested JSON in a d3.js chart. My code is as follows:

d3.json('http://88.99.13.199:3000/measures', function(err, mydata) { 
   mydata.forEach(function(val) { 
      var measuresdata=[];
      var ent = [];
      var plir = [];
      var subm = [];
      ent.push({
          name: "entaxeis",
          size: val.entaxeis
      });
      plir.push({
          name: "pliromes",
          size: val.pliromes
      });
      subm.push({
          name: val.submeasure_code,
          children:{ent, plir}
      });
      measuresdata.push({
          name: val.measure_code,
          children:{subm}
      });
      console.log(measuresdata);
   });
   console.log(measuresdata);
});

I want my json to be as follows:

{
   "name": "Μ01",
   "children": [
    {
     "name": "1.1",
     "children": [
      {"name": "entaxeis", "size": 456123},
      {"name": "pliromes", "size": 3812}
     ]
    }
   ]
  },
  {
   "name": "M03",
   "children": [
    {
     "name": "3.1",
     "children": [
      {"name": "entaxeis", "size": 456123},
      {"name": "pliromes", "size": 3812}
     ]
    },
   ]
 }
(..)

and so on. It's kind of a puzzle so any help would be great!

thibautg · Accepted Answer · 2018-05-12 11:31:38Z

2

As you have added the d3.js tag, I think the easiest solution is to use the d3.nest() function to group by key, and then use the map function on the resulting array to create the required structure:

var nested = d3.nest()
  .key(function(d) { return d.measure_code; })
  .entries(mydata)
  .map(function(measure) {
    return {
      name: measure.key,
      children: measure.values.map(function(submeasure) {
        return {
          name: submeasure.submeasure_code,
          children: [
            { name: "entaxeis", size: submeasure.entaxeis },
            { name: "pliromes", size: submeasure.pliromes }
          ]
        };
      })
    };
  });

edited May 12, 2018 at 11:31

answered May 12, 2018 at 10:29

thibautg

2,0521 gold badge16 silver badges18 bronze badges

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

2 Comments

lios Over a year ago

I love your answer, however I have one issue. Your suggestion creates succesfully my JSON in the desired format, but it creates a record for eac measure_code although some are with the same name. I want it to put all submeasures under the same measure.

thibautg Over a year ago

I've updated the answer to group the measures by measure_code by using d3.nest.

Collectives™ on Stack Overflow

Create multinested JSON from URL in Javascript for d3.js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related