How to change JSON data to Javascript array of objects with D3

Question

This is my JSON data (this document is an external file and is called 'data.json')

[
    {
    "maand": "augustus 2014",
    "weinigSlaap": "0.15",
    "hogeStress": "0.1",
    "langerReistijd": "0.12",
    "hogeWerkdruk": "0.1",
    "lageLiquiditeit": "0.1"
    }
]

and I need it to become this with help of D3.

var data = [
    [
        {
            axis: "Weinig slaap",
            value: 0.15
        }, {
            axis: "Hoge stress",
            value: 0.1
        }, {
            axis: "Lange reistijd",
            value: 0.12
        }, {
            axis: "Hoge werkdruk",
            value: 0.1
        }, {
            axis: "Lage liquiditeit",
            value: 0.1
        }
    ]
];

I'm stuck at this point and don't have any hope in live anymore ;)

  d3.json('data.json', function (data) {
      data.push(data);
      console.log(data);
   });

Rajesh Dixit · Accepted Answer · 2016-10-12 13:34:48Z

2

You can try something like this:

var data = [{
  "maand": "augustus 2014",
  "weinigSlaap": "0.15",
  "hogeStress": "0.1",
  "langerReistijd": "0.12",
  "hogeWerkdruk": "0.1",
  "lageLiquiditeit": "0.1"
}]

var r = /(?:[A-Z])/g;

var keysToSkip = ["maand"]

var result = [];
data.forEach(function(d) {
  var keys = Object.keys(d).filter(x => keysToSkip.indexOf(x) === -1);
  var _o = keys.map(function(k) {
    var o = {};
    var parsedVal = k.replace(r, function(s) {
      return " " + s
    });

    return {
      axis: toTitleCase(parsedVal),
      value: d[k]
    }
  })
  result.push(_o);
})
console.log(result)

function toTitleCase(str) {
  return str.charAt(0).toUpperCase() + str.substring(1).toLowerCase()
}

edited Oct 12, 2016 at 13:34

answered Oct 12, 2016 at 13:25

Rajesh Dixit

25k5 gold badges52 silver badges86 bronze badges

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

Comments

maioman · Accepted Answer · 2016-10-12 13:37:41Z

1

With Object.keys you can iterate through keys of the object, and this is what you get:

var d = {
    "maand": "augustus 2014",
    "weinigSlaap": "0.15",
    "hogeStress": "0.1",
    "langerReistijd": "0.12",
    "hogeWerkdruk": "0.1",
    "lageLiquiditeit": "0.1"
    }


var r = Object.keys(d).map(k => ({
     axis: k.replace(/[A-Z]/g, l => (' ' + l.toLowerCase())),
     value: Number(d[k]) 
}))
                           
console.log(r)

clearly es6 helps here !

answered Oct 12, 2016 at 13:37

maioman

18.8k4 gold badges39 silver badges46 bronze badges

Comments

Jagan · Accepted Answer · 2016-10-12 13:26:45Z

0

For you, Javascript alone is enough as shown below. Keep this code inside your d3.json success callback.

var data = [{
    "maand": "augustus 2014",
    "weinigSlaap": "0.15",
    "hogeStress": "0.1",
    "langerReistijd": "0.12",
    "hogeWerkdruk": "0.1",
    "lageLiquiditeit": "0.1"
  }],
  mappedData = [];

for (var i = 0; i < data.length; i++) {
  var eachObjArr = [];
  for (key in data[i]) {
    if (data[i].hasOwnProperty(key)) {
      var obj = {};
      obj[key] = data[i][key];
      eachObjArr.push({ axis: key, value: data[i][key] });
    }
  }
  mappedData.push(eachObjArr);
}

for (var i = 0; i < mappedData.length; i++) {
  console.log(mappedData[i]);
}

edited Oct 12, 2016 at 13:26

answered Oct 12, 2016 at 13:20

Jagan

5,2567 gold badges41 silver badges61 bronze badges

1 Comment

zfor Over a year ago

I think it would need more processing. I suggest to use eachObjArr.push({ axis: key, value: data[i][d] }); Also maand is a Dutch word for month, I think it sould be excluded

Collectives™ on Stack Overflow

How to change JSON data to Javascript array of objects with D3

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related