6

I have an object like this:

{
  "A": [ "-4927","8779","-9971","-23767" ],
  "B": [ "-10617","-1456","3131","259" ],
  "C": [ "-5185","1168","21501","18989" ],
  "D": [ "2010","5664","2148","-674" ]
}

I want to convert to this:

[
  {
    name: 'A',
    data: ["-4927","8779","-9971","-23767"]
  }, {
    name: 'B',
    data: ["-10617","-1456","3131","259"]
  }, {
    name: 'C',
    data: ["-5185","1168","21501","18989"]
  }, {
    name: 'D',
    data: ["2010","5664","2148","-674"]
  }
]

I have used this following method:

var newData = [];
$.each($.parseJSON(data), function(k, v) {
  newData['name'] = k;
  newData['data'] = v;
});

But it only store the last key pair value as newData. That is

name: 'D',
data: ["2010","5664","2148","-674"]

I understand that it overwrite the previous data and store only the last data it get. But i can't solve this problem.

Any Help ?

3
  • 1
    Use another array to store the json array. Sep 14, 2018 at 15:04
  • Your overlaying the name and data field on the newData, rather than creating a new sub object and putting it in the array, with those fields
    – Taplar
    Sep 14, 2018 at 15:05
  • 1
    Side note, any time you see a block of code that effectively does #1) create array, #2) loop over another element, #3) push elements to created array, this is the pattern that you should consider using either $.fn.map or $.map
    – Taplar
    Sep 14, 2018 at 15:08

7 Answers 7

8

You are assigning the properties name and data directly to newData instead of pushing an object into it as an array:

Change your loop to this:

var newData = [];
$.each($.parseJSON(data), function(k, v) {
        const myNewData = {
            name: k,
            data: v
        }
        newData.push(myNewData);
});
1
6

You can do this using map

const oldData =
  { "A": [ "-4927","8779","-9971","-23767" ]
  , "B": [ "-10617","-1456","3131","259" ]
  , "C": [ "-5185","1168","21501","18989" ]
  , "D": [ "2010","5664","2148","-674" ]
  }

const newShape = ([ name, data ]) =>
  ({ name, data })

const newData =
  Object.entries(oldData).map(newShape)

console.log(newData)
// [ { name: "A", data: [ "-4927","8779","-9971","-23767" ] }, ... ]

You can write the lambda inline, if you wish, but it's generally better to write programs with reusable pieces

const newData =
  Object.entries(oldData).map(([ name, data ]) => ({ name, data }))

jQuery can map over objects using $.map – note the differing lambda

const newData =
  $.map(oldData, (data, name) => ({ name, data }))
1
  • Like it with destructuration, well thought. Be carefull tho about the support of the Object.entries method in browser check here
    – Orelsanpls
    Sep 14, 2018 at 15:13
4

You can use of Object.keys and Array.map to generate your array.

It can be translated to this:

for each key in my object data, create a new item inside of a new array. This item is going to be an object, with a key name and a key data.


const data = {
  A: ['-4927', '8779', '-9971', '-23767'],
  B: ['-10617', '-1456', '3131', '259'],
  C: ['-5185', '1168', '21501', '18989'],
  D: ['2010', '5664', '2148', '-674'],
};

const ret = Object.keys(data).map(x => ({
  name: x,
  data: data[x],
}));

console.log(ret);

2

You could use a for in loop and push each element.

var obj = {
    "A":["-4927","8779","-9971","-23767"],
    "B":["-10617","-1456","3131","259"],
    "C":["-5185","1168","21501","18989"],
    "D":["2010","5664","2148","-674"]
  }

var newArr = [];

  for(p in obj){
    newArr.push({"name":p,"data":obj[p]})
  }

  console.log(newArr)

1
1

Should be:

var newData = [];
$.each($.parseJSON(data), function(k, v) {
    newData.push({'name': k, 'data': v});
});

You also don't need to use jQuery. You can do the same in vanilla JS:

var newData = [];
Object.keys(data).forEach(function(k) {
    newData.push({'name': k, 'data': data[k]});
});
1
1

The following code will return your expected result.

var newData = [];
for(var key in data) {
    newData.push({
        name: key,
        data: data[key]
    });
}
0

If we weren't using jQuery, we could use a combination of Object.keys() and Array.prototype.map()

Object.keys() method returns an array of a given object's own property names, in the same order as we get with a normal loop.

Object.keys(data) would simply return ["A", "B", "C", "D"]


The map() method creates a new array with the results of calling a provided function on every element in the calling array.

In that map function callback we can return an object in the specific way we need our data formatted.

const data = {
  "A": ["-4927", "8779", "-9971", "-23767"],
  "B": ["-10617", "-1456", "3131", "259"],
  "C": ["-5185", "1168", "21501", "18989"],
  "D": ["2010", "5664", "2148", "-674"]
}

const newData = Object.keys(data).map(function(prop) {
  return {
    name: prop,
    data: data[prop]
  }
})

console.log(newData)

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.