CODEWITHSUNDEEP
javascriptjqueryjson
Unknown User
Unknown User

Reputation: 3668

jquery - creating nested json from flat json

Below is the JSON data.

JSON :

[{
    "Code":"US-AL",
    "Name":"Alabama",
    "Population":4833722
    },
    {
    "Code":"US-AK",
    "Name":"Alaska",
    "Population":735132
    },
    {
    "Code":"US-AZ",
    "Name":"Arizona",
    "Population":6626624
    },
    {
    "Code":"US-AR",
    "Name":"Arkansas",
    "Population":2959373
    },
    {
    "Code":"US-CA",
    "Name":"California",
    "Population":38332521
    },
    {
    "Code":"US-CO",
    "Name":"Colorado",
    "Population":5268367
    },
    {
    "Code":"US-CT",
    "Name":"Connecticut",
    "Population":3596080
}]

I wanted to convert that data to this format.

[{
    "US-AL": {
        "name" : "Alabama",
        "population" : 4833772
    },
    "US-AK": {
        "name" : "Alaska",
        "population" : 735132
    }
}]

I tried with this function and separated the name and population from it.

var ParentData = [];
var ChildData = {"name": [], "population": []};

data.forEach(function(val, i) {

    ParentData.push(val.Code);
    ChildData.name.push(val.Name);
    ChildData.population.push(val.Population);

})

But I'm not that expert in this. Just a learner and I don't know how to push to the parent data which gets aligned to it respectively.

Any help will be very much helpful for me to achieve this.

Thanks in advance.

Upvotes: 1

Views: 605

Answers (3)

Attila Kling
Attila Kling

Reputation: 1787

[{
   "US-AL":{
     "name":"Alabama",
     "population":4833722
   }
 },
 {
   "US-AK":{
     "name":"Alaska",
     "population":735132
   }
 },
 {
   "US-AZ":{
     "name":"Arizona",
     "population":6626624
   }
 },
 {
   "US-AR":{
     "name":"Arkansas",
     "population":2959373
   }
 },
 {
   "US-CA":{
     "name":"California",
     "population":38332521
   }
 },
 {
   "US-CO":{
     "name":"Colorado",
     "population":5268367
   }
 },
 {
   "US-CT":{
     "name":"Connecticut",
     "population":3596080
   }
 }
]

And the code:

var newDatas = datas.map(function(item) {
    var obj = {};
    obj[item.Code] = { name: item.Name, population: item.Population };
    return obj;
});

datas is the array containing your original source.

Upvotes: 0

Mritunjay
Mritunjay

Reputation: 25882

Try with native map of javascript

var newData = data.map(function (obj) {
    var newObj = {};
    newObj[obj.Code] = {};
    newObj[obj.Code].name = obj.Name;
    newObj[obj.Code].population = obj.Population;
    return newObj;
});

console.log(newData)

Upvotes: 0

MaxArt
MaxArt

Reputation: 22617

Try this:

var newData = {};
data.forEach(function(val) {
    newData[val.Code] = {name: val.Name, population: val.Population};
});

Keep in mind that forEach isn't natively supported by IE8-, although it can be polyfilled. This works in every browser:

for (var i = 0; i < data.length; i++)
    newData[data[i].Code] = {name: data[i].Name, population: data[i].Population};

Or, since you added the "jquery" tag, you can also use:

$.each(data, function() {
    newData[this.Code] = {name: this.Name, population: this.Population};
});

Upvotes: 1

Related Questions