How to group jquery array

Question

I have two arrays that I need to merge together, they look like so:

var array1 = 
[
  {x: "1/12/2011", y: 4149.9}
  {x: "2/12/2011", y: 4094.5}
  {x: "3/12/2011", y: 3606.8}
]

and

var array2 =
[
  {x: "1/12/2011", z: 3500}
  {x: "2/12/2011", z: 3600}
  {x: "3/12/2011", z: 3700}
]

I would like to merge them based on x where all properties are kept in the final object.

Expected output:

var excpected =
[
  {x: "1/12/2011", y: 4149.9, z: 3500}
  {x: "2/12/2011", y: 4094.5, z: 3600}
  {x: "3/12/2011", y: 3606.8, z: 3700}
]

I've found $.extend and $.merge but haven't managed to successfully achieve what I need. Any pointers?

"I would like to merge them" Okay. Where are you stuck? What has your research turned up? Or your extensive searching here on SO? — T.J. Crowder
– T.J. Crowder, Commented Dec 8, 2017 at 11:15
does the arrays have the same grouping value at the same index? — Nina Scholz
– Nina Scholz, Commented Dec 8, 2017 at 11:16
@T.J.Crowder - See where you're coming from, mainly had my head in the jQuery docs and console tying to figure it out. Research just found those two jQuery methods but I seemed to be unable to manipulate them how I want. Therefore hit a wall and needed some insight from SO. — m.edmondson
– m.edmondson, Commented Dec 8, 2017 at 11:18
Cool, linked dupetarget should show you how, particularly Oriol's answer. FYI, $.extend is one of the many library utility methods that led to Object.assign being added to JS. (You could use $.extend instead of Object.assign if you wanted in his code, for instance, although Object.assign is trivial to polyfill.) — T.J. Crowder
– T.J. Crowder, Commented Dec 8, 2017 at 11:20

Vipin Kumar · Accepted Answer · 2017-12-08 11:16:56Z

1

While rest of answers are almost correct, but they miss the point of matching x

var array1 = [{
  x: "1/12/2011",
  y: 4149.9
}, {
  x: "2/12/2011",
  y: 4094.5
}, {
  x: "3/12/2011",
  y: 3606.8
}]

var array2 = [{
  x: "1/12/2011",
  z: 3500
}, {
  x: "2/12/2011",
  z: 3600
}, {
  x: "3/12/2011",
  z: 3700
}]

var excpected = array1.map(item => {
  var fromArray2 = array2.filter(array2Item => array2Item.x === item.x)[0];
  item.z = fromArray2.z;
  return item;
})

console.log(excpected);

answered Dec 8, 2017 at 11:16

Vipin Kumar

6,5661 gold badge21 silver badges25 bronze badges

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

Comments

Mihai Alexandru-Ionut · Accepted Answer · 2017-12-08 11:17:24Z

1

Just use map method in combination with Object.assign

var array1 = 
[
  {x: "1/12/2011", y: 4149.9},
  {x: "2/12/2011", y: 4094.5},
  {x: "3/12/2011", y: 3606.8}
]
var array2 =
[
  {x: "1/12/2011", z: 3500},
  {x: "2/12/2011", z: 3600},
  {x: "3/12/2011", z: 3700}
]
var expected = array1.map( (a,i) => Object.assign(a, array2.find(b=>b.x == a.x)));
console.log(expected);

edited Dec 8, 2017 at 11:17

answered Dec 8, 2017 at 11:14

Mihai Alexandru-Ionut

48.6k14 gold badges106 silver badges132 bronze badges

1 Comment

Keith Over a year ago

Although in the example data he has used both arrays are in the same order etc, there is this little bit I would like to merge them based on x. You might want to add a find in there.

Faly · Accepted Answer · 2017-12-08 11:20:52Z

1

Use Object.assign and array.prototype.map:

var array1 = 
[
  {x: "1/12/2011", y: 4149.9},
  {x: "2/12/2011", y: 4094.5},
  {x: "3/12/2011", y: 3606.8}
];

var array2 =
[
  {x: "1/12/2011", z: 3500},
  {x: "2/12/2011", z: 3600},
  {x: "3/12/2011", z: 3700}
]

var merged = array1.map((e, index) => Object.assign({}, e, array2.find(a => a.x === e.x)));

console.log(merged);

edited Dec 8, 2017 at 11:20

answered Dec 8, 2017 at 11:13

Faly

13.4k2 gold badges21 silver badges39 bronze badges

1 Comment

Keith Over a year ago

Same issue as @Alexandru , you missed this bit I would like to merge them based on x

Hassan Imam · Accepted Answer · 2017-12-08 11:18:30Z

0

You can array#concat your array and then use array#reduce to merge them based on value of x.

var array1 = [ {x: "1/12/2011", y: 4149.9}, {x: "2/12/2011", y: 4094.5}, {x: "3/12/2011", y: 3606.8} ],
    array2 = [ {x: "1/12/2011", z: 3500}, {x: "2/12/2011", z: 3600}, {x: "3/12/2011", z: 3700} ];

var result = array1
              .concat(array2)
              .reduce((r, o) => {
                r[o.x] = Object.assign({},r[o.x] || {}, o);
                return r;
              },{});
var output = Object.values(result);
console.log(output);

answered Dec 8, 2017 at 11:18

Hassan Imam

22.6k6 gold badges45 silver badges53 bronze badges

Collectives™ on Stack Overflow

How to group jquery array

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related