How to restructure JSON in JavaScript?

Question

I have a JSON file that comes in a particular structure (see Sample A), but I need it too be structured like Sample B.

Is it possible to reorganise the data in JS? If so, how do you go about this?

Sample A:

   var myData = [
      {
        "date": "01/01/2017",
        "here-value": "20",
        "here-color": "pink",
        "there-value": "24",
        "there-color": "red",
      },
      {
        "date": "02/01/2017",
        "here-value": "80",
        "here-color": "blue",
        "there-value": "54",
        "there-color": "red",
      },
    ]

Sample B:

  var myData = [

    {
      "date": "01/01/2017",
      "here-value": "20",
      "here-color": "pink"
    },
    {
      "date": "01/01/2017",
      "there-value": "24",
      "there-color": "red"
    },

    {
      "date": "02/01/2017",
      "here-value": "80",
      "here-color": "blue"
    },
    {
      "date": "02/01/2017",
      "there-value": "54",
      "there-color": "red"
    }

]

The reason I'm seeking to restructure the data, is to create objects that will feed into a visualisation using D3. The result will be similar to: http://jsfiddle.net/vw88/nzwLg96a/

the expected structure is wrong, try by pasting in developer's window, it will throw error — brk
– brk, Commented Feb 9, 2018 at 5:09
Without more context, it's impossible to say which is the best choice. It depends on how you're going to use the data. — Jim Mischel
– Jim Mischel, Commented Feb 9, 2018 at 5:11
Appreciate the responses. I've just updated the question to correct the JSON and also provide context. The application for the JSON file can be seen in the JS Fiddle. — vw88
– vw88, Commented Feb 9, 2018 at 5:21
If the keys are the same in all objects in the array, nothing is stopping you from mapping it to a new one. By the way, you’re working with a native jQuery object... not a JSON. — Terry
– Terry, Commented Feb 9, 2018 at 5:28

than · Accepted Answer · 2018-02-09 05:50:43Z

4

Thought I would include this approach as-well using Array.reduce()

let restructuredData = myData.reduce((a, b) => {
    return a.concat([
        { "date": b["date"], "here-value": b["here-value"],  "here-color": b["here-color"] },
        { "date": b["date"], "there-value": b["there-value"],  "there-color": b["there-color"] }
    ]);
}, []);

answered Feb 9, 2018 at 5:50

than

8879 silver badges13 bronze badges

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

1 Comment

Terry Over a year ago

Love this solution, it's extremely concise and readable :) +1

regisin · Accepted Answer · 2018-02-09 05:30:38Z

1

This should do the trick:

var sampleA = [
    {
    "date": "01/01/2017",
    "here-value": "20",
    "here-color": "pink",
    "there-value": "24",
    "there-color": "red",
    },
    {
    "date": "02/01/2017",
    "here-value": "80",
    "here-color": "blue",
    "there-value": "54",
    "there-color": "red",
    },
]


var sampleB = [];
sampleA.forEach( i => {
    let a = {};
    a.date = i.date;
    a['here-value'] = i['here-value'];
    a['here-color'] = i['here-color'];
    let b = {};
    b.date = i.date;
    b['there-value'] = i['there-value'];
    b['there-color'] = i['there-color'];
    sampleB.push(a, b);
});
console.log(sampleB);

answered Feb 9, 2018 at 5:30

regisin

1271 silver badge10 bronze badges

Comments

Dui Samarasinghe · Accepted Answer · 2018-02-09 05:44:00Z

1

This also working,

var myData = [
      {
        "date": "01/01/2017",
        "here-value": "20",
        "here-color": "pink",
        "there-value": "24",
        "there-color": "red",
      },
      {
        "date": "02/01/2017",
        "here-value": "80",
        "here-color": "blue",
        "there-value": "54",
        "there-color": "red",
      },
    ] ;

  var newAr = [];

  myData.forEach(function(val, key){
    newAr.push({"date": val.date, "here-value": val["here-value"],
        "here-color": val["here-color"]});
    newAr.push({"date": val.date, "there-value": val["there-value"],
        "there-color": val["there-color"]});
  })

  console.log("newAr:", newAr);

answered Feb 9, 2018 at 5:44

Dui Samarasinghe

2553 silver badges10 bronze badges

Comments

Sumedha Gamage · Accepted Answer · 2018-02-09 05:58:12Z

1

var myData = [{
    "date": "01/01/2017",
    "here-value": "20",
    "here-color": "pink",
    "there-value": "24",
    "there-color": "red",
  },
  {
    "date": "02/01/2017",
    "here-value": "80",
    "here-color": "blue",
    "there-value": "54",
    "there-color": "red",
  },
]

var newData = []
myData.forEach(b => {

  newData.push({
    date: b.date,
    "here-value": b["here-value"],
    "here-color": b["here-color"],
  }, {
    date: b.date,
    "there-value": b["there-value"],
    "there-color": b["there-color"],
  })

});
console.log(newData);

answered Feb 9, 2018 at 5:58

Sumedha Gamage

1483 bronze badges

Collectives™ on Stack Overflow

How to restructure JSON in JavaScript?

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related