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

Sending information from the backend to the frontend using Node.js and Express

Modify the CSS style of the select label and change the color of the currently selected option in MUI

Here is a guide on implementing Hash in URLs with React Router

Can the value in a JavaScript object be updated dynamically when a button is clicked?

struggling to access the value of [(ngModel)] within Angular 6 component

Is there a way to break this down so that I can obtain an array containing the data for each month?

Creating a binary tree in vanilla JavaScript and styling it with HTML and CSS

Dealing with Errors in Angular 8: Best Practices for Handling Response Errors

Vue JS: Extracting both the unique ID and value from an array of input simultaneously

How can typescript configurations be imported/exported in a node environment?

Using the Count() function in PHP to update information upon page refresh

Encountering a MiniCssExtractPlugin error while trying to build with npm

Guide to filling a dropdown menu by aligning with the text it contains?

Effortless implementation of list loading with images and text in the Ionic 2 framework

The React functional component fails to update when triggered by a parent component's setState method

Express is experiencing issues with Angular Universal, preventing it from functioning properly

Discovering all invalid elements in an Angular 8 Form using Typescript by revealing required fields post button click

Ajax - Trouble with Updating DIV Content

Adjust the setting for the useHash parameter within the RouterModule during execution

Is there a way to alter a container component depending on a condition without duplicating its content?