Merging object properties from array

Question

I hope the title is accurate but what I have is an array 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"
        }
      ]
    }
  ]
}

And I would like to merge all "array" properties together in a new array possibly, to something that looks like 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 a good way to combine all these properties in Typescript? I'm looking for a Typescript/Angular friendly solution since this will be looped over to create elements in HTML.

zhuber · Accepted Answer · 2019-10-15 13:43:15Z

You could use reduce method on your parentArray property to merge inner arrays:

let obj = {
      "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 newObj = {
        someValue: obj.someValue,
        moreValue: obj.moreValue,
        array: obj.parentArray.reduce((prev, current) => [...prev, ...current.array],[])
    }
    
    console.log(newObj)

SuleymanSah · Accepted Answer · 2019-10-15 13:46:01Z

1

Another way you can do this:

const obj = {
  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 result = {
  ...obj,
  array: Object.values(obj.parentArray).flatMap(arr => arr.array)
};

delete result.parentArray;

console.log(result);

answered Oct 15, 2019 at 13:46

SuleymanSah

18k6 gold badges38 silver badges60 bronze badges

1 Comment

Giovani Vercauteren Over a year ago

I like the use of flatMap, but be careful that you can still support all the browsers you want to support.

Damian C · Accepted Answer · 2019-10-15 13:49:46Z

1

You can use a mapper. I usually use lodash for these things: https://lodash.com/docs/4.17.15#flatMap

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

answered Oct 15, 2019 at 13:49

Damian C

2,1812 gold badges16 silver badges18 bronze badges

Comments

Adrita Sharma · Accepted Answer · 2019-10-15 13:43:31Z

0

You can use map this.data.parentArray.map(item => item.array):

Try like this:

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

Working Demo

answered Oct 15, 2019 at 13:43

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

1 Comment

Giovani Vercauteren Over a year ago

That solution is not entirely correct though, there's multiple arrays where OP wants one array.

Fedor Saenko · Accepted Answer · 2019-10-15 14:06:18Z

0

You can try next (It will work, with "infinite" nesting):

function getChildren(arr) {
  return arr.reduce((items, item) => [...items, ...(item.array ? getChildren(item.array) : [item])], []);
}

and call with:

getChildren(your_object.parentArray);

DEMO

edited Oct 15, 2019 at 14:06

answered Oct 15, 2019 at 13:50

Fedor Saenko

1386 bronze badges

Collectives™ on Stack Overflow

Merging object properties from array

5 Answers 5

Comments

1 Comment

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related