Combining attributes of objects in an array

Question

Combining attributes of objects in an array

Is the title accurate for my task? I have an array structured like this:

{
  "someValue": 1,
  "moreValue": 1,
  "parentArray": [
    {
      "id": "2222",
      "array": [
        {
          "type": "test",
          "id": "ID-100"
        },
        {
          "type": "test1",
          "id": "ID-200"
        }
      ]
    },
    {
      "id": "5555",
      "array": [
        {
          "type": "test",
          "id": "ID-100"
        },
        {
          "type": "test1",
          "id": "ID-200"
        }
      ]
    },
    {
      "id": "444",
      "array": [
        {
          "type": "test",
          "id": "ID-100"
        },
        {
          "type": "test1",
          "id": "ID-200"
        }
      ]
    }
  ]
}

I aim to merge all "array" properties into a new array, resulting in a structure similar to this:

{
  "someValue": 1,
  "moreValue": 1,
  "array": [
    {
      "type": "test",
      "id": "ID-100"
    },
    {
      "type": "test1",
      "id": "ID-200"
    },
    {
      "type": "test",
      "id": "ID-4400"
    },
    {
      "type": "test1",
      "id": "ID-500"
    },
    {
      "type": "test",
      "id": "ID-600"
    },
    {
      "type": "test1",
      "id": "ID-700"
    }
  ]
}

What would be the optimal method to consolidate these properties using Typescript? I'm seeking a Typescript/Angular-friendly solution as this data needs to be utilized to generate HTML elements.

angular typescript

Answer 1

Answer №1

If you want to combine inner arrays within your parentArray, you can achieve this by utilizing the reduce method:

let object = {
      "someValue": 1,
      "moreValue": 1,
      "parentArray": [
        {
          "id": "2222",
          "array": [
            {
              "type": "test",
              "id": "ID-100"
            },
            {
              "type": "test1",
              "id": "ID-200"
            }
          ]
        },
        {
          "id": "5555",
          "array": [
            {
              "type": "test",
              "id": "ID-100"
            },
            {
              "type": "test1",
              "id": "ID-200"
            }
          ]
        },
        {
          "id": "444",
          "array": [
            {
              "type": "test",
              "id": "ID-100"
            },
            {
              "type": "test1",
              "id": "ID-200"
            }
          ]
        }
      ]
    }

    let newObject = {
        someValue: object.someValue,
        moreValue: object.moreValue,
        array: object.parentArray.reduce((previous, current) => [...previous, ...current.array],[])
    }
    
    console.log(newObject)

Answer 2

If you want to combine inner arrays within your parentArray, you can achieve this by utilizing the reduce method:

let object = {
      "someValue": 1,
      "moreValue": 1,
      "parentArray": [
        {
          "id": "2222",
          "array": [
            {
              "type": "test",
              "id": "ID-100"
            },
            {
              "type": "test1",
              "id": "ID-200"
            }
          ]
        },
        {
          "id": "5555",
          "array": [
            {
              "type": "test",
              "id": "ID-100"
            },
            {
              "type": "test1",
              "id": "ID-200"
            }
          ]
        },
        {
          "id": "444",
          "array": [
            {
              "type": "test",
              "id": "ID-100"
            },
            {
              "type": "test1",
              "id": "ID-200"
            }
          ]
        }
      ]
    }

    let newObject = {
        someValue: object.someValue,
        moreValue: object.moreValue,
        array: object.parentArray.reduce((previous, current) => [...previous, ...current.array],[])
    }
    
    console.log(newObject)

Answer 3

Answer №2

Here is an alternative approach:

const data = {
  valueA: 1,
  valueB: 1,
  mainArray: [
    {
      id: "1111",
      items: [
        {
          category: "example",
          itemId: "ID-123"
        },
        {
          category: "sample",
          itemId: "ID-456"
        }
      ]
    },
    {
      id: "2222",
      items: [
        {
          category: "example",
          itemId: "ID-123"
        },
        {
          category: "sample",
          itemId: "ID-456"
        }
      ]
    },
    {
      id: "3333",
      items: [
        {
          category: "example",
          itemId: "ID-123"
        },
        {
          category: "sample",
          itemId: "ID-456"
        }
      ]
    }
  ]
};

let newData = {
  ...data,
  items: Object.values(data.mainArray).flatMap(item => item.items)
};

delete newData.mainArray;

console.log(newData);

Answer 4

Here is an alternative approach:

const data = {
  valueA: 1,
  valueB: 1,
  mainArray: [
    {
      id: "1111",
      items: [
        {
          category: "example",
          itemId: "ID-123"
        },
        {
          category: "sample",
          itemId: "ID-456"
        }
      ]
    },
    {
      id: "2222",
      items: [
        {
          category: "example",
          itemId: "ID-123"
        },
        {
          category: "sample",
          itemId: "ID-456"
        }
      ]
    },
    {
      id: "3333",
      items: [
        {
          category: "example",
          itemId: "ID-123"
        },
        {
          category: "sample",
          itemId: "ID-456"
        }
      ]
    }
  ]
};

let newData = {
  ...data,
  items: Object.values(data.mainArray).flatMap(item => item.items)
};

delete newData.mainArray;

console.log(newData);

Answer 5

Answer №3

If you need to transform data, consider using a mapping function. Personally, I find lodash to be quite handy in these situations. You can check out the documentation here: https://lodash.com/docs/4.17.15#flatMap

const destination = {
    someValue: source.someValue,
    moreValue: source.moreValue,
    array: _.flatMap(source.parentArray, (value) => value.array)
};

Answer 6

If you need to transform data, consider using a mapping function. Personally, I find lodash to be quite handy in these situations. You can check out the documentation here: https://lodash.com/docs/4.17.15#flatMap

const destination = {
    someValue: source.someValue,
    moreValue: source.moreValue,
    array: _.flatMap(source.parentArray, (value) => value.array)
};

Answer 7

Answer №4

If you want to extract values using map, use the following code:

this.data.parentArray.map(item => item.array)

:

Here is an example:

var result = {
  someValue: this.data.someValue,
  moreValue: this.data.moreValue,
  array: this.data.parentArray.map(item => item.array)
};

See Working Demo Here

Answer 8

If you want to extract values using map, use the following code:

this.data.parentArray.map(item => item.array)

:

Here is an example:

var result = {
  someValue: this.data.someValue,
  moreValue: this.data.moreValue,
  array: this.data.parentArray.map(item => item.array)
};

See Working Demo Here

Answer 9

Answer №5

If you want to test out the next solution (which supports "infinite" nesting), give this a try:

function collectDescendants(inputArr) {
  return inputArr.reduce((output, element) => [...output, ...(element.array ? collectDescendants(element.array) : [element])], []);
}

Then simply use the function like so:

collectDescendants(your_object.parentArray);

See Demo Here

Answer 10

If you want to test out the next solution (which supports "infinite" nesting), give this a try:

function collectDescendants(inputArr) {
  return inputArr.reduce((output, element) => [...output, ...(element.array ? collectDescendants(element.array) : [element])], []);
}

Then simply use the function like so:

collectDescendants(your_object.parentArray);

See Demo Here

Combining attributes of objects in an array

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Retrieving JSON data in Angular 5 returns a 400 bad request error

Ways to determine the current active tab in React are:

Tips for optimizing file sizes in an Angular 11 app for production deployment

Unable to simultaneously execute TypeScript and nodemon

"Data in Fusioncharts appears to be correctly formatted, but it is having difficulties

The Angular Material nested Stepper's label position is being forcefully changed

Icon for closing Mui Snackbar

The API's post call is throwing an error, yet it functions perfectly when tested on

Converting HTML to an array using Angular

"Exploring the Power of Angular 2 with Route Resolving

Upon launching Google Chrome, a series of errors plague the WSL2 Ubuntu setup while running Karma and Jasmine for Angular testing

What could be causing NestJS/TypeORM to remove the attribute passed in during save operation?

Rearranging lists in JHipster: What is the best way to do it?

Getting a "module not found" error in Next.js while trying to import a TypeScript

The malfunctioning collapse feature in Bootstrap 4 sidebar within an Angular 6 application

Troubleshooting Azure typescript function: Entry point for function cannot be determined

Tips for implementing HTTP requests in Angular 2 without TypeScript

What is the process of accessing the changelog.md file within a component in Angular?

From a series of arrays filled with objects, transform into a single array of objects

Creating hierarchical TreeNode structure in TypeScript