Push array into JavaScript Object

Question

x is an object

let x = {a: [0], b: [1], c: [2], d: [3]}

y is a an array

let y = [4, 5, 6, 7]

What is the proper way to push y into x such that x becomes

x = {a: [0, 4], b: [1, 5], c: [2, 6], d: [3, 7]}

I've done it using for loop but maybe there is a better way.

How do you correlate array items and object keys, given that objects are unordered collections of key-value pairs? — zerkms, Nov 14 '19 at 23:09
Show how you have done it, otherwise we can't tell how to do better. — Elias Soares, Nov 14 '19 at 23:10
You need to define this problem better. For example you've used data that has the exact number of keeps and the exact length array. What if the array is length 5 and the object only has 4 keys ? Its important to note that an object is an unordered collection of keys. How do you determine the matching from array indexes to object keys? — Viktor Garba, Nov 14 '19 at 23:13
Keys of an object are guaranteed to be iterated in insertion order since ES2015, as long as none of them are symbols or number-like keys. See [here](https://stackoverflow.com/questions/5525795/does-javascript-guarantee-object-property-order/38218582#38218582) - if this order is important, consider using a Map instead, as there are no edge cases like objects — Klaycon, Nov 14 '19 at 23:13
Which really confuses me why it's being downvoted as an answer..... Map is the correct way to go for preserving insertion order — pinkwaffles, Nov 14 '19 at 23:15
For everyone saying 'Keys are guaranteed insertion order', sure thats great but this problem hasn't clearly layed out the order it wants to use. And it seems like @d.b wants alphabetical order or something of that nature. — Viktor Garba, Nov 14 '19 at 23:15
I agree, it can't properly be answer until the order in which array indexes should be distributed is defined, as well as what to do with extra indexes — Viktor Garba, Nov 14 '19 at 23:17
I took the use of keys like `a, b, c, d` as sample data. It is true that @d.b could want either alphabetical or insertion order. — Klaycon, Nov 14 '19 at 23:17

score 4 · Accepted Answer · edited Nov 15 '19 at 03:11

4

Define the association order with another array:

let order = ["a","b","c","d"];
let x = {a: [0], b: [1], c: [2], d: [3]};
let y = [4, 5, 6, 7, 8];
y.forEach((n,i) => {
  let key = order[i % order.length];
  x[key].push(n);
});

edited Nov 15 '19 at 03:11

pinkwaffles

463
4
12

answered Nov 14 '19 at 23:20

Klaycon

10,599
18
35

2

Could use some [edge-case / error checking](https://stackoverflow.com/questions/58867909/push-array-into-javascript-object/58868023?noredirect=1#comment104005116_58867909) but this is definitely the best answer here – Phil Nov 14 '19 at 23:24

coreyward · Answer 2 · 2019-11-14T23:14:32.697

2

You could accomplish the same using this approach:

Object.entries(x).reduce((acc, [key, arr], index) => {
  acc[key] = [...arr, y[index]]
  return acc
}, {})

This said, as has been mentioned in the comments above, there's no guarantee of the key order, so you may encounter unexpected behavior in some browsers or under certain conditions.

edited Nov 14 '19 at 23:14

answered Nov 14 '19 at 23:13

coreyward

77,547
20
137
166

1

As mentioned in the comments the association between keys and data array is hardwired. It's not "in order". – zerkms Nov 14 '19 at 23:14
@zerkms I'm well aware. The same is true of a for loop. This said, while order is not guaranteed, it's remarkably consistent within a particular runtime environment. – coreyward Nov 14 '19 at 23:15
1

What I meant is that - they have a "spec" that establishes association `0` index goes to `a`, and so forth. I'm not sure any implementation that does not follow that "spec" complies with it :shrug: – zerkms Nov 14 '19 at 23:17
@zerkms Who has that spec? The question doesn't mention it. I think this a user looking for help with creating a less verbose routine for a simple task, and while the warnings re: order are important, demonstrating how this is accomplished using a reducer is useful. – coreyward Nov 14 '19 at 23:20
1

The question does not, that's why we had a long conversation in comments, where they mentioned the association is explicitly given. "I think this a user" --- that''s the very reason I did not rush posting an answer but instead tried to find the _real problem_ they are solving :shrug: – zerkms Nov 14 '19 at 23:21

score 1 · Answer 3 · answered Nov 14 '19 at 23:18

1

if your order is guaranteed and the length of items in x and y match, then something trivial like:

let x = {
  a: [0],
  b: [1],
  c: [2],
  d: [3]
};

let y = [4, 5, 6, 7];

let i = 0;
for (let key in x) {
  x[key].push(y[i++]);
}

console.info(x);

answered Nov 14 '19 at 23:18

Samuel Goldenbaum

18,391
17
66
104

I bet this is exactly what OP has with their _"`for` loop"_ – Phil Nov 14 '19 at 23:19
1

Yip, pretty sure it's a version of something similar. Here for others to review as it is a solution and OP didn't share any code. – Samuel Goldenbaum Nov 14 '19 at 23:24

score 0 · Answer 4 · answered Nov 14 '19 at 23:17

0

I don't know the full context but I guess you can use something like this:

Object.keys(x).reduce((acc, key, index) => ({...acc, [key]: [...x[key], y[index]]}), {})

answered Nov 14 '19 at 23:17

Grissom

1,080
8
21

pinkwaffles · Answer 5 · 2019-11-14T23:46:32.683

-2

I don't think it's possible using a JS object (as mentioned in the comments) since there is no guarantee of key order. Alternatively, there's this fancy map object which does exactly what you're looking for:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map#Objects_and_maps_compared

It's iterable as an array and hence, preserves key insertion order. Here's a working example.

https://repl.it/repls/HandyPuzzlingDeal

edited Nov 14 '19 at 23:46

answered Nov 14 '19 at 23:12

pinkwaffles

463
4
12

1

The whole object keys are unordered thing isn't what it used to be. See https://stackoverflow.com/a/5525820/283366 – Phil Nov 14 '19 at 23:14
Also, there's practically no answer here. A link to the MDN should be a comment at best. Now, if you were to provide an example, that would be much better – Phil Nov 14 '19 at 23:17
I've added a working example. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map#Objects_and_maps_compared There are actually a few key benefits of maps: 1. Keys can be any type, including other objects, functions, arrays 2. Insertion order is always guaranteed - no edge cases 3. In rare cases, Map has better performance than Objects. – pinkwaffles Nov 14 '19 at 23:44

Push array into JavaScript Object

5 Answers5