How to conditionally convert Array to object

Question

Not just converting from array to object in javascript, I want to omit the specific fields and convert them into the object.

Here is my input data.

taggedItems = [
    {id:0, left:100, top:100, thumbSize:100, image: 'b', url: 'y'},
    {id:1, left:150, top:150, thumbSize:100, image: 'd', url: 'x'},
    {id:2, left:200, top:200, thumbSize:100, image: 'f', url: 'w'},

]

Here expected output

taggedOUtput = {
    0: {id:0, left:100, top:100, thumbSize:100},
    1: {id:1, left:150, top:150, thumbSize:100},
    2: {id:2, left:200, top:200, thumbSize:100},
}

How do we conditionally convert Array to object

Seems weird you want to convert it to an object, but a simple reduce() is all you need. — epascarello, Dec 04 '17 at 13:45
What's the point of doing that? An array already is an object. — Pointy, Dec 04 '17 at 13:46
See the duplicate target. Do that in a loop to get your "subset". — Cerbrus, Dec 04 '17 at 13:48
@Pointy had some performance issue. When I looped through arrays while my PanResponder was moving, it's better to access data using array[i], because it's O(1). But when I send the data, I had to send array data, so I convert it back to array. — merry-go-round, Dec 04 '17 at 13:49
**Arrays are objects**. Access to an array element is exactly the same process as access to an object property, because array elements *are* object properties. — Pointy, Dec 04 '17 at 13:52
@Cerbrus Thanks for pointing it out! But the question you referred doesn't seems like converting array to object problem — merry-go-round, Dec 04 '17 at 13:53
@Pointy: Finding an element by Id in an array of objects is a pain (heavy operation), while it's trivial in a `{ Id : Object }` map. — Cerbrus, Dec 04 '17 at 13:53
@Pointy I see. Uhmm then I don't know why I got better performance on it... I can't explain it why but it works... I will write a blog post on it soon — merry-go-round, Dec 04 '17 at 13:54
@Cerbrus uhh, not in this case, since the goal is to use *exactly the same property names*. In other words, the OP wants an object whose keys are the same as the array indexes. In general you're right, and it may be that the examples the OP gives are deceptive in that the "id" values won't always be the same as the indexes. — Pointy, Dec 04 '17 at 13:57
@Pointy: You're _assuming_ the `id` values match the array index. That's a dangerous assumption I'm not going to agree on. — Cerbrus, Dec 04 '17 at 13:58
I agree with @Cerbrus. I don't have to use _.include(taggedItems, id) and that's O(n), right? — merry-go-round, Dec 04 '17 at 14:00
@Cerbrus well I was just going by the posted sample. Indeed, if the idea is to make an object that supports lookup by "id" value of those objects, then it makes sense. — Pointy, Dec 04 '17 at 14:00
I think both of your are absolutely right. Thanks for helping me on this problem :) And @Cerbrus can you remove the duplicate sign? It doesn't look like it's similar problem. The solution from your reference doesn't convert the array to object. — merry-go-round, Dec 04 '17 at 14:02

Mihai Alexandru-Ionut · Accepted Answer · 2017-12-04T14:30:03.927

2

Just use Object.assign method.

let taggedItems = [{id:0, left:100, top:100, thumbSize:100, image: 'b', url: 'y'},{id:1, left:150, top:150, thumbSize:100, image: 'd', url: 'x'},{id:2, left:200, top:200, thumbSize:100, image: 'f', url: 'w'}]
console.log(Object.assign({},taggedItems.map((item) =>({ id:item.id, left:item.left, top:item.top, thumbSize:item.thumbSize }))));

edited Dec 04 '17 at 14:30

answered Dec 04 '17 at 13:45

Mihai Alexandru-Ionut

47,092
13
101
128

Alexis · Answer 2 · 2017-12-04T13:53:28.553

You can map into each element to return the expected properties...

var taggedItems = [
    {id:0, left:100, top:100, thumbSize:100, image: 'b', url: 'y'},
    {id:1, left:150, top:150, thumbSize:100, image: 'd', url: 'x'},
    {id:2, left:200, top:200, thumbSize:100, image: 'f', url: 'w'},

].map(e => {
  return {
   id:e.id,
   left:e.left,
   top:e.top,
   thumbSize:e.thumbSize
  }
});

//Second method to have only one object
var res = {}
var taggedItems2 = [
    {id:0, left:100, top:100, thumbSize:100, image: 'b', url: 'y'},
    {id:1, left:150, top:150, thumbSize:100, image: 'd', url: 'x'},
    {id:2, left:200, top:200, thumbSize:100, image: 'f', url: 'w'},

].forEach((e,i) => {
  return res[i]=e
});



console.log(taggedItems);
console.log(res)

score 0 · Answer 3 · answered Dec 04 '17 at 13:46

You can use Array.prototype.reduce() for it. On each iteration, your convert curr into a new object.

const taggedItems = [
  { id: 0, left: 100, top: 100, thumbSize: 100, image: 'b', url: 'y' },
  { id: 1, left: 150, top: 150, thumbSize: 100, image: 'd', url: 'x' },
  { id: 2, left: 200, top: 200, thumbSize: 100, image: 'f', url: 'w' },
]

const yourObject = taggedItems.reduce((prev, curr) => ({
  ...prev,
  [curr.id]: {
    id: curr.id,
    left: curr.left,
    top: curr.top,
    thumbSize: curr.thumbSize,
  }
}), {})

console.log(yourObject)

score 0 · Answer 4 · answered Dec 04 '17 at 13:56

You could use reduce and the attributes from the original to create a new object as so:

const taggedItems = [
  {id:0, left:100, top:100, thumbSize:100, image: 'b', url: 'y'},
  {id:1, left:150, top:150, thumbSize:100, image: 'd', url: 'x'},
  {id:2, left:200, top:200, thumbSize:100, image: 'f', url: 'w'},
];

const newTaggedItems = taggedItems.reduce((prev, {id, left, top, thumbSize}) => ({
  ...prev,
  [id]: { id, left, top, thumbSize }
}), {});

console.log(newTaggedItems);

How to conditionally convert Array to object

4 Answers4