merge two array and make it short

Question

so I got a situation where I have two arrays 1st array contains objects some are parent and some object are child 2nd array is object of pngs so I want to make a resultant array with only parent items with pngs inside it and non parent items as its child array of object

array1=[
{id:1,name:"ABC", parentId:null, {innerObj:"value"} },
{id:2,name"XYZ"}, parentId:1, { innerObj:"value"},
{id:3,name"XYY"}, parentId:1, { innerObj:"value"},
{id:4,name"XYX"}, parentId:null,{ innerObj:"value"},
{id:5,name"PQR"}, parentId:4, { innerObj:"value"},
{id:6,name"AAA"}, parentId:4,{ innerObj:"value"}
...]
this array is of length 73
but parentItems are 16


aray2=[
{icon:"assests/icon.png", color:"fff"},
{icon:"assests/icon2.png", color:"fff"},
{icon:"assests/icon3.png", color:"fff"}
...]
this array is of length 16

So my question is how can I make a resultant array with length 16 and merge it like below array

array3=[
{id:1,name:"ABC",parentId:null,{innerObj:"value"},icon:"assests/icon.png",color:"fff",childs:
[
  {id:2,name"XYZ"},parentId:1,{innerObj:"value"},
  {id:3,name"XYY"},parentId:1,{innerObj:"value"}
]
},

{id:4,name"XYX"},parentId:null,{innerObj:"value",icon:"assests/icon2.png",color:"fff",childs:
[
  {id:5,name"PQR"},parentId:4,{innerObj:"value"},
  {id:6,name"AAA"},parentId:4,{innerObj:"value"}
]},
...]

this is resultant array3 which will be of length 16 
because parentItems and icons array(array) both are of length 16
any help would be appreciated

Note:array1 and array2 is maintained in sequence so need to bother about it

I tried doing this but cannot figure out the problem;

array1.forEach((ele, i) => {
      if (ele.parentId==null)
      {
        var parent=ele.parentId;
        array3[i] =ele;
        array3[i]["icon"] = array2[i].icon;
        array3[i]["color"] = array2[i].color; 
      }
      else
      {
        this.steps[parent]["child"] = {ele};
      }

    });

If my question is not clear enough just tell me i will add more explaination in it.

After looking into some syntax errors and logic I managed to solve this so I'm posting the answer in the question itself. Here is the solution to get my desired output:

var num =0;
    array1.forEach((ele, i) => {
      if (ele.parentId==null)
      {
        ele["childs"]=[];
        array1forEach(ele1=>{
            if(ele1.parentId==ele.id){
            ele["childs"].push(ele1);
            }
        });
        ele["icon"] = this.array2[num]["icon"];
        ele["colorc"] = this.array2[num]["color"];
        array3[num]=ele;
        num++;
      }
    });

user_1447675 · Answer

You could take a hash table as reference for the parent object and an index for the second array's additionl information for the objects with parentId: null.

This approach works for sorted data and for an infinite depth of children.

var array1 = [{ id: 1, name: "ABC", parentId: null, innerObj: "value" }, { id: 2, name: "XYZ", parentId: 1, innerObj: "value" }, { id: 3, name: "XYY", parentId: 1, innerObj: "value" }, { id: 4, name: "XYX", parentId: null, innerObj: "value" }, { id: 5, name: "PQR", parentId: 4, innerObj: "value" }, { id: 6, name: "AAA", parentId: 4, innerObj: "value" }],
    array2 = [{ icon: "assests/icon.png", color: "fff" }, { icon: "assests/icon2.png", color: "fff" }, { icon: "assests/icon3.png", color: "fff" }],
    index = 0,
    hash = Object.create(null),
    result = array1.reduce((accumulator, object) => {
        if (object.parentId === null) {
            accumulator.push(hash[object.id] = { ...object, ...array2[index++] });
        } else {
            if (!hash[object.parentId].children) hash[object.parentId].children = [];
            hash[object.parentId].children.push(hash[object.id] = { ...object });
        }
        return accumulator;
    }, []);

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

merge two array and make it short

1 Answers