Convert object to another object using jQuery

Question

I am getting a result in my JavaScript file which I want to convert into another object.

My original result

    [
  {
    "SName": "Set1",
    "Elements": [
      {
        "Id": "3",
        "Name": "Name1"
      },
      {
        "Id": "5",
        "Name": "Name2"
      }
    ]
  },
  {
    "SName": "Set2",
    "Elements": [
      {
        "Id": "7",
        "Name": "Name3"
      },
      {
        "Id": "8",
        "Name": "Name4"
      }
    ]
  }
]

Convert this to look like array of objects using jQuery or JavaScript. How can I achieve this?

[
  {
    "SName": "Set1",
    "Id": 3,
    "Name": "Name1"
  },
  {
    "SName": "Set1",
    "Id": 5,
    "Name": "Name2"
  },
  {
    "SName": "Set2",
    "Id": 7,
    "Name": "Name3"
  },
  {
    "SName": "Set2",
    "Id": 8,
    "Name": "Name4"
  }
]

Just loop the values and realign them. You don't need to use jQuery. — modernator
– modernator, Commented Sep 27, 2016 at 16:14

aaronofleonard · Accepted Answer · 2016-09-27 16:25:45Z

1

var data =     [
  {
    "SName": "Set1",
    "Elements": [
      {
        "Id": "3",
        "Name": "Name1"
      },
      {
        "Id": "5",
        "Name": "Name2"
      }
    ]
  },
  {
    "SName": "Set2",
    "Elements": [
      {
        "Id": "7",
        "Name": "Name3"
      },
      {
        "Id": "8",
        "Name": "Name4"
      }
    ]
  }
];
console.log(data);

var newData = data.reduce(function (newArray, currentSet) {
    return newArray.concat(currentSet.Elements.map(function (element) {
        return Object.assign( { SName: currentSet.SName }, element);
    }));
}, []);

console.log(newData);

The key here is the reduce function. What we are doing is creating a brand new array, by looping through each value of the outer array. We continuously concatenate onto our new array with the values we map from the inner array.

edited Sep 27, 2016 at 16:25

answered Sep 27, 2016 at 16:20

aaronofleonard

2,57617 silver badges24 bronze badges

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

1 Comment

PSR Over a year ago

Just for information. To support IE use $.extend instead of Object.assign.

Nina Scholz · Accepted Answer · 2016-09-27 16:17:45Z

1

You could iterate the array, the Elements and the properties and build a new object and push it to the result set.

var array = [{ "SName": "Set1", "Elements": [{ "Id": "3", "Name": "Name1" }, { "Id": "5", "Name": "Name2" }] }, { "SName": "Set2", "Elements": [{ "Id": "7", "Name": "Name3" }, { "Id": "8", "Name": "Name4" }] }],
    result = [];

array.forEach(function (a) {
    a.Elements.forEach(function (b) {
        var o = { SName: a.SName };
        Object.keys(b).forEach(function (k) {
            o[k] = b[k];
        });
        result.push(o);
    });
});

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

ES6

var array = [{ "SName": "Set1", "Elements": [{ "Id": "3", "Name": "Name1" }, { "Id": "5", "Name": "Name2" }] }, { "SName": "Set2", "Elements": [{ "Id": "7", "Name": "Name3" }, { "Id": "8", "Name": "Name4" }] }],
    result = [];

array.forEach(a => a.Elements.forEach(b => result.push(Object.assign({ SName: a.SName }, b))));

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

answered Sep 27, 2016 at 16:17

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

2 Comments

PSR Over a year ago

Just for information. To support IE use $.extend instead of Object.assign.

Nina Scholz Over a year ago

$ is part of jquery, isn't it?

Nenad Vracar · Accepted Answer · 2016-09-27 16:19:04Z

1

You can do this with reduce(), forEach() and Object.assign()

var data = [{
  "SName": "Set1",
  "Elements": [{
    "Id": "3",
    "Name": "Name1"
  }, {
    "Id": "5",
    "Name": "Name2"
  }]
}, {
  "SName": "Set2",
  "Elements": [{
    "Id": "7",
    "Name": "Name3"
  }, {
    "Id": "8",
    "Name": "Name4"
  }]
}]

var result = data.reduce(function(r, e) {
  e.Elements.forEach(function(o) {
    r.push(Object.assign({SName: e.SName}, o))
  })
  return r;
}, [])

console.log(result)

answered Sep 27, 2016 at 16:19

Nenad Vracar

122k16 gold badges160 silver badges184 bronze badges

1 Comment

PSR Over a year ago

Just for information. To support IE use $.extend instead of Object.assign.

noitse · Accepted Answer · 2016-09-27 16:24:26Z

Here is solution using jQuery, here is jsfiddle:

https://jsfiddle.net/noitse/3uk9qjnf/

I hope you know all key names so it wont be problem to do it fixed.

var json = [
  {
    "SName": "Set1",
    "Elements": [
      {
        "Id": "3",
        "Name": "Name1"
      },
      {
        "Id": "5",
        "Name": "Name2"
      }
    ]
  },
  {
    "SName": "Set2",
    "Elements": [
      {
        "Id": "7",
        "Name": "Name3"
      },
      {
        "Id": "8",
        "Name": "Name4"
      }
    ]
  }
]

var newJSON = []

$(json).each(function(index,value){

  $(value.Elements).each(function(index1,value1){
        newJSON.push({"SName":value.SName,"Id":value1.Id,"Name":value1.Name})   
})

})

alert(JSON.stringify(newJSON))

Here is code , what it does it loops through first JSON , then loops through its elements , then it push it to new array

ILCAI · Accepted Answer · 2016-09-27 16:30:20Z

0

You could use the $.extend method, which lets you create a copy of an object, while merging with another object.

var source = [] // Replace with the initalization of your source array
var destination = [];

for (var i = 0; i < source.length; i++) {
    var node = source[i];
    for (var j = 0; j < node.Elements.length; j++) {
        var subNode = node.Elements[j];
        newNode = $.extend(subNode, node);
        delete newNode["Elements"];
        destination.push(newNode);
    }
}

You can run the code in this fiddle.

answered Sep 27, 2016 at 16:30

ILCAI

1,2542 gold badges17 silver badges40 bronze badges

Collectives™ on Stack Overflow

Convert object to another object using jQuery

5 Answers 5

1 Comment

2 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related