I have this array of object

rows = [
    {
      id_temp: 1,
      description: 'template 1',
      color_id: 1,
      code: '#000000'

   },
    {
      id_temp: 1,
      description: 'template 1',
      color_id: 2,
      code: '#ffffff'

    },
   {
      id_temp: 2,
      description: 'template 2',
      color_id: 1,
      code: '#000000'

    },
   {
      id_temp: 2,
      description: 'template 2',
      color_id: 2,
      code: '#ffffff'

    },
]

i need to convert it to this shape, add color property as an array of objects that consists of the code and id from each iteration based on the repeated id_temp

[{
    "id_temp": 1,
    "description": "template 1",
    "color": [{
        "id": 1
        "code": "#000000"
         },
        {
        "id": 2
        "code": "#ffffff"
        }]
},
{
    "id_temp": 2,
    "description": "template 2",
    "color": [{
        "id": 1
        "code": "#000000"
    },
    {
      "id": 2
      "code": "#ffffff"
    }]
}]

i tried to loop through it in foreach but that leads to overwriting the values in the new array

let resultTemplates = [];
rows.forEach((row) => {
        if (resultTemplates[row.id_temp]) {
          resultTemplates['color'] = row.color_id;
          resultTemplates['color'] = row.code;
        } else {
          resultTemplates.id_temp = row.id_temp;
          resultTemplates.description = row.description;
          resultTemplates['color'].id = row.color_id;
          resultTemplates['color'].code = row.code;
        }
        });

CodePudding user response：

Use Reduce method

const rows = [
    {
        id_temp: 1,
        description: "template 1",
        color_id: 1,
        code: "#000000",
    },
    {
        id_temp: 1,
        description: "template 1",
        color_id: 2,
        code: "#ffffff",
    },
    {
        id_temp: 2,
        description: "template 2",
        color_id: 1,
        code: "#000000",
    },
    {
        id_temp: 2,
        description: "template 2",
        color_id: 2,
        code: "#ffffff",
    },
];

const outArr = rows.reduce((acc, crt) => {
    if (!acc[crt.id_temp]) {
        crt["color"] = [
            {
                id: 1,
                code: crt.code,
            },
        ];
        acc[crt.id_temp] = crt;
    } else {
        acc[crt.id_temp].color.push({ id: acc[crt.id_temp].color.length  1, code: crt.code });
    }

    return acc;
}, {});

console.log(Object.values(outArr));

CodePudding user response：

Shoult try:

let resultTemplates = [];
rows.map ( row => {
     if ( ! resultTemplates[row.id_temp] )
        resultTemplates[row.id_temp]={};
     resultTemplates[row.id_temp].id_temp=row.id_temp;
     resultTemplates[row.id_temp].description=row.description;
     if ( ! resultTemplates[row.id_temp].color )
         resultTemplates[row.id_temp].color=[];
     resultTemplates[row.id_temp].color.push({
         id: row.color_id,
         code: row.code
     });
});
resultTemplates=resultTemplates.filter(e => e ;

Sample:

var rows=[{"id_temp":1,"description":"template 1","color_id":1,"code":"#000000"},{"id_temp":1,"description":"template 1","color_id":2,"code":"#ffffff"},{"id_temp":2,"description":"template 2","color_id":1,"code":"#000000"},{"id_temp":2,"description":"template 2","color_id":2,"code":"#ffffff"}]

let resultTemplates = [];

rows.map ( row => {
     if (! resultTemplates[row.id_temp] ) resultTemplates[row.id_temp]={};
     resultTemplates[row.id_temp].id_temp=row.id_temp;
     resultTemplates[row.id_temp].description=row.description;
     if (! resultTemplates[row.id_temp].color) resultTemplates[row.id_temp].color=[];
     resultTemplates[row.id_temp].color.push({
         id: row.color_id,
         code: row.code
     });
});
resultTemplates=resultTemplates.filter(e => e );

document.getElementById('pre').innerHTML=JSON.stringify(resultTemplates,'',2);

<pre id="pre" style='font-size: .8em'></pre>