How to convert array to object in an array of objects

Question

I have this sample data

let data = [{
    id: 1,
    info: [
      'Optical',
      'Drive'
    ]
  },
  {
    id: 2,
    info: [
      'Paper',
      'Binder'
    ]
  }
];

I want to convert the array in data.info to object and assign 2 key/value pairs, first key is name with value from data.info and 2nd key is the length of data.info string. The result would be something like this:

let data = [{
    id: 1,
    info: [{
        name: 'Optical',
        length: 7
      },
      {
        name: 'Drive',
        length: 5
      },
    ]
  },
  {
    id: 2,
    info: [{
        name: 'Paper',
        length: 5
      },
      {
        name: 'Binder',
        length: 6
      }
    ]
  }
];

Here's what I've tried so far

const getLength = (str) => (str.length)

const addLength = (str) => {
  try {
    let newObj = {};
    newObj.name = str;
    newObj.length = getLength(str);
    return newObj;
  } catch (error) {
    console.log(error)
  }
}

const mapedData = data.map((object) => {
  object.info.map((str) => (addLength(str)))
})

However the result is

[ undefined, undefined ]

Any idea how to fix it?

When you use an arrow function with curly braces, the return must be explicit. — user12273078
– user12273078, Commented Oct 11, 2022 at 7:52

Rory McCrossan · Accepted Answer · 2022-10-11 07:52:21Z

4

To do what you require you can loop through the array, using map() to update the info array within each element. The part your original logic is missing is that you don't set the response of addLength() to the property of the parent object - you just execute the function.

let data = [{id: 1,info: ['Optical','Drive']}, {id: 2,info: ['Paper','Binder']}];

data.forEach(x => {
  x.info = x.info.map(y => ({
    name: y,
    length: y.length
  }))
});

console.log(data);

answered Oct 11, 2022 at 7:52

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

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

2 Comments

Dimas Rizqi Over a year ago

Thanks a lot, but why does forEach is usable in this case? Because as far as I know, forEach doesn't return a new array

Rory McCrossan Over a year ago

Glad to help. You're correct in that forEach() doesn't return a new array, I'm using it to amend the properties of the existing parent array, not to create a new one.

Jinu Joseph Daniel · Accepted Answer · 2022-10-11 07:57:58Z

1

It is as simple as

data.forEach(item => item.info = item.info.map((value) => ({name: value, length: value.length})));

answered Oct 11, 2022 at 7:57

Jinu Joseph Daniel

6,36117 gold badges65 silver badges94 bronze badges

Comments

Oskar Hane · Accepted Answer · 2022-10-11 08:04:42Z

1

This should do it.

const result = data.map(curr => {
  // Calculate new info array
  const info = curr.info.map(item => ({name: item, length: item.length}))
  // Create new object from old object and use the new info
  // to not mutate the original object
  return {...curr, info}
}, [])

edited Oct 11, 2022 at 8:04

answered Oct 11, 2022 at 7:56

Oskar Hane

1,88213 silver badges8 bronze badges

Comments

Robin Webb · Accepted Answer · 2022-10-11 08:05:00Z

0

const data = [{
    id: 1,
    info: [
      'Optical',
      'Drive'
    ]
  },
  {
    id: 2,
    info: [
      'Paper',
      'Binder'
    ]
  }
];

console.log(data.map(e => ({
  id: e.id,
  info: e.info.map(i => ({
    name: i,
    length: i.length
  }))
})));

answered Oct 11, 2022 at 8:05

Robin Webb

1,5311 gold badge10 silver badges16 bronze badges

Collectives™ on Stack Overflow

How to convert array to object in an array of objects

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related