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

What is the best way to line up changing column values with changing row values in an HTML table?

What is the best way to remove query string parameters prior to running a function when a button is clicked?

Upgrading from Angular v6 to v8: Troubleshooting the issue of "The loader "datatable.component.css" did not return a string error"

Utilize the class or interface method's data type

`Angular2 - exploring the complexities of function scope`

Angular8 Material Grid displaying headers and tiles, experiencing slight resizing issue with mat-grid-tile content

Challenges of Mocking Functions in Different Files When Testing with Jest

Trigger Function on Input Change in Angular 2

Challenges with Typescript Integration in Visual Studio 2013

Steps for implementing a button to erase all created polygons in Leaflet and Geoman

What is the best way to handle various sections with changing structures within a complex form using react-hook-form?

Is there a method to add columns to an Angular material table dynamically?

encountered an error stating module '@angular/compiler-cli/ngc' could not be located while attempting to execute ng serve

Storing basic input values for a function

The NbDatePicker does not display certain Spanish names

What are the best ways to enhance change detection efficiency in Angular?

Tips for sending a parameter to an onClick handler function in a component generated using array.map()

Initiating the ngOnInit lifecycle hook in child components within Angular

The transformation from className to class attribute does not occur for custom elements in JSX

"Exploring the dynamic duo of Angular2 and ng2Material