Create an array of object based on first value as key and second value as value in javascript

Question

Sample input:

[{'size': '56 X 56 X 190', 'no_of_ups': 5}, {'size': '65 X 55 X 110', 'no_of_ups': 2}]

Corresponding ouput:

[{'56 X 56 X 190': 5}, {'65 X 55 X 110': 2}]

How do we create an array of Object from input array of Object having fixed number of keys and create new array of Object having certail value of key as key and certail value of value as value of that key.

Basically, We want to transform input array of Object to value of 'size' as key and value of 'no_of_ups' as value.

`const output = input.map(({ size, no_of_ups }) => ({ [size]: no_of_ups }))` This makes use of argument [destructuring assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#object_destructuring) and [computed property names](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#computed_property_names). — 3limin4t0r, Jun 23 '22 at 14:50
Are you sure you want that output and not a single object with multiple properties? eg `{'56 X 56 X 190': 5,'65 X 55 X 110': 2}` — James, Jun 23 '22 at 15:14

3limin4t0r · Answer 1 · 2022-06-24T11:48:52.090

1

One of the most readable ways of doing this would probably be in normal JavaScript.

const output = input.map(({ size, no_of_ups }) => ({ [size]: no_of_ups }));

The expression ({ size, no_of_ups }) => ({ [size]: no_of_ups }) might be a bit confusing, but is just a normal arrow function.

({ size, no_of_ups }) defines the arguments. In this scenario a single object that we'll destructure into size and no_of_ups.

({ [size]: no_of_ups }) is the return value of the arrow function. We'll use a computed property name to dynamically set the value of the key and assign it the value of no_of_ups.

See ECMAScript 6 arrow function that returns an object for the reason why the return object has to be wrapped within parentheses.

edited Jun 24 '22 at 11:48

answered Jun 23 '22 at 15:15

3limin4t0r

19,353
2
31
52

Definitely the best answer, imho. Only thing, I'd probably remove the last part if favour of a simple redirection to [this answer](https://stackoverflow.com/a/28770578/5825294). – Enlico Jun 24 '22 at 10:45
@Enlico I've updated the answer removing the explanation of why the object has to be wrapped in parentheses. Pointing to the question that you've linked in you comment. – 3limin4t0r Jun 24 '22 at 11:51

Enlico · Answer 2 · 2022-06-23T15:32:37.947

(If the order of the arguments looks strange, it's because I'm assuming [lodash/fp module] Here's the function that you want to execute on your argument:

f = _.compose(_.spread(_.zipObject), 
              _.unzip,
              _.map(_.over(['size', 'no_of_ups'])));

And here it is in action:

arr = [{'size': '56 X 56 X 190', 'no_of_ups': 5}, {'size': '65 X 55 X 110', 'no_of_ups': 2}];
f = _.compose(_.spread(_.zipObject), 
              _.unzip,
              _.map(_.over(['size', 'no_of_ups'])));
console.log(f(arr))

<script src="https://cdn.jsdelivr.net/g/lodash@4(lodash.min.js+lodash.fp.min.js)"></script>

And here's a bit of explanation:

_.map(_.over(['size', 'no_of_ups'])) runs _.over(['size', 'no_of_ups']) on each element,
- and _.over(['size', 'no_of_ups']) simply picks 'size' and the 'no_of_ups' of the element and puts the two results in an array), so you get an array of arrays, in this case [["56 X 56 X 190", 5], ["65 X 55 X 110", 2]];
then _.unzip fundamentally transposes the array of arrays, in this case giving you [["56 X 56 X 190", "65 X 55 X 110"], [5, 2]]
finally _.spread(_.zipObject) feeds the two inner arrays as comma separated arguments to _.zipObject, which constructs objects out of the two arrays, using them as the array of keys and the array of values, thus giving you the final result.

If you really want an array of objects rather than a single object, you can change _.zipObject for _.zipWith((x,y) => ({[x]: y})).

score 0 · Answer 3 · edited Jun 25 '22 at 12:56

0

Input - [
  {
    'size': '56 X 56 X 190',
    'no_of_ups': 5
  }, {
    'size': '65 X 55 X 110',
    'no_of_ups': 2
  }
]

Input.forEach((val) => { 
  j = {};
  j[val[size]] = val[no_of_ups];
  Output.push(j)
});

edited Jun 25 '22 at 12:56

Tyler2P

2,324
26
22
31

answered Jun 23 '22 at 14:52

R. Avinash kumar

1
1

1

Please don't post code-only answers. Future readers will be grateful to see explained *why* this answers the question instead of having to infer it from the code. – Gert Arnold Jun 23 '22 at 18:18

Create an array of object based on first value as key and second value as value in javascript

3 Answers3