Converting Typescript objects containing arrays into a single array

Question

Converting Typescript objects containing arrays into a single array

Looking for some assistance with this problem :)

I am trying to convert the object into an array with the following expected result:

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'
  }
]

I attempted using Object.keys() and map(), but it did not produce the desired outcome as shown below:

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 need to add another map() over this.mockData[id]? What mistake am I making, and what would be the best practice in this situation (maybe reduce()?)?

Your help is greatly appreciated!

javascript arrays angular typescript object

Answer 1

Answer №1

To separate a grouped object into individual elements, you can employ the flatMap method with the Object.entries function and utilize nested map() functions.

const data = { 'group-1': [{ item: 'group#1.1' }, { item: 'group#1.2' }], 'group-2': [{ item: 'group#2.1' }, { item: 'group#2.2' }] };

const result = Object.entries(data).flatMap(([key, values]) => values.map(value => ({ key, ...value })));

console.log(result);

Alternatively, you can opt for a for...of loop approach

const data = { 'group-1': [{ item: 'group#1.1' }, { item: 'group#1.2' }], 'group-2': [{ item: 'group#2.1' }, { item: 'group#2.2' }] };

const result = [];
for (const [key, items] of Object.entries(data)) {
  for (const item of items) {
    result.push({ key, ...item });
  }
}

console.log(result);

Answer 2

To separate a grouped object into individual elements, you can employ the flatMap method with the Object.entries function and utilize nested map() functions.

const data = { 'group-1': [{ item: 'group#1.1' }, { item: 'group#1.2' }], 'group-2': [{ item: 'group#2.1' }, { item: 'group#2.2' }] };

const result = Object.entries(data).flatMap(([key, values]) => values.map(value => ({ key, ...value })));

console.log(result);

Alternatively, you can opt for a for...of loop approach

const data = { 'group-1': [{ item: 'group#1.1' }, { item: 'group#1.2' }], 'group-2': [{ item: 'group#2.1' }, { item: 'group#2.2' }] };

const result = [];
for (const [key, items] of Object.entries(data)) {
  for (const item of items) {
    result.push({ key, ...item });
  }
}

console.log(result);

Answer 3

Answer №2

Here is the solution you've been seeking:

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

Answer 4

Here is the solution you've been seeking:

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

Answer 5

Answer №3

Using the Object.keys method on mockData to iterate through its properties, then mapping over each property to create a new array of objects with the id added as a key using ES6 spread syntax, and finally flattening the nested arrays into one flat array.

Answer 6

Using the Object.keys method on mockData to iterate through its properties, then mapping over each property to create a new array of objects with the id added as a key using ES6 spread syntax, and finally flattening the nested arrays into one flat array.

Converting Typescript objects containing arrays into a single array

Answer №1

Answer №2

Answer №3

Similar questions

Discover the steps to activate and utilize mat-error without the need for form control manipulation

Ways to resolve the issue of BrowserWindow not being recognized as a constructor when trying to create a child window within the Electron

Retrieve components of Node.js Express response using axios before terminating with end()

Preserve HTML element states upon refreshing the page

Learn how to assign an ID to a React component in order to access it using the document.getElementById() method

Creating a function to update data in a Node.js/MongoDB environment

Obtaining multiple values: Utilizing array versus modifying referenced parameters

Shift the content downwards within an 'a' snippet located in the sidebar when it reaches the edge of the right border

Store the image URL in cache during AJAX loading

What is the correct way to pass a 2-dimensional array from Python to Postgres?

Retrieve returned data using jQuery

Issue with Vue 3: Composition API does not support Array of refs

Ways to detect when the window printing process has been completed

What is causing the consistent error message "unable to read property 'logged' of undefined"?

Exploring ways to dynamically alter templates using the link function in Angular.js

React Router imports and renders multiple components

Tips on selecting data from an array to populate a mat-selection-list

Can TypeScript be set up to include undefined as a potential type in optional chains?

The behavior of the jQuery click function seems to be quirky and not functioning as expected. Additionally, the

Is there a way to horizontally navigate a pallet using Next and Prev buttons?