Typescript object with arrays to array

Question

I need some help solving this :)

I want to transfer the object to an array. The expected result should be:

result = [
  {
    id: 'test-1',
    message: 'test#1.1'
  },
  {
    id: 'test-1',
    message: 'test#1.2'
  },
  {
    id: 'test-2',
    message: 'test#2.1'
  },
  {
    id: 'test-2',
    message: 'test#2.2'
  }
]

My apparent solution is with objects.keys() and map(). Unfortunately, this does not work as desired:

mockData = {
  'test-1': [
    {
      message: 'test#1.1'
    },
    {
      message: 'test#1.2'
    }
  ],
  'test-2': [
    {
      message: 'test#2.1'
    },
    {
      message: 'test#2.2'
    }
  ]
}

const result = Object.keys(this.mockData).map((id) => {
  return {
    id,
    ...this.mockData[id],
  }
})

console.log(result)

do I have to put another map() over this.mockData[id]? what am I doing wrong and what is best practice here (maybe reduce()?)?

I hope you can help me

Does this answer your question? [How can I group an array of objects by key?](https://stackoverflow.com/questions/40774697/how-can-i-group-an-array-of-objects-by-key) — pilchard, Jun 03 '22 at 09:59

pilchard · Accepted Answer · 2022-06-03T10:14:42.847

To ungroup you can flatMap the Object.entries of the grouped object with a nested map() call over the grouped array elements.

const mockData = { 'test-1': [{ message: 'test#1.1' }, { message: 'test#1.2' }], 'test-2': [{ message: 'test#2.1' }, { message: 'test#2.2' }] };

const result = Object.entries(mockData).flatMap(([id, vs]) => vs.map(v => ({ id, ...v })));

console.log(result);

Or using a for...of loop if you'd rather

const mockData = { 'test-1': [{ message: 'test#1.1' }, { message: 'test#1.2' }], 'test-2': [{ message: 'test#2.1' }, { message: 'test#2.2' }] };

const result = [];
for (const [id, messages] of Object.entries(mockData)) {
  for (const message of messages) {
    result.push({ id, ...message });
  }
}

console.log(result);

score 0 · Answer 2 · answered Jun 03 '22 at 10:01

0

This will return the desire solution,

const arr = [];
Object.keys(mockData).forEach((key) => {
    mockData[key].forEach((data) => {
        arr.push({
            id: key, 
            message: data.message
        })
    })
})

answered Jun 03 '22 at 10:01

Seerat Ahmed

247
3
12

score -1 · Answer 3 · answered Jun 03 '22 at 10:11

-1

Object.keys(mockData)
    .map((id) =>
      mockData[id].map((l) => {
        return { ...l, id };
      })
    )
    .flat()

answered Jun 03 '22 at 10:11

tjkeast

94
1

1

per the [docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap), `flatMap()` *'is identical to a `map()` followed by a `flat()` of depth 1, but slightly more efficient than calling those two methods separately.'* – pilchard Jun 03 '22 at 10:16

Typescript object with arrays to array

3 Answers3