filter and concat arrays of objects javascript

Question

i am trying to filter some objects that i have in an array, but inside this array i have some objects that i would like to collect and concat as array, i am working arround but i couldn't reach the expected output

MY ARRAY

[
    {
        _id: '60c0c5d7f5b87a1604d3d555',
        name: 'Colors'
        attribute: {
            value: 'red'
            _id: '60c0c5d7f5b87a1604d3d544',
        }
    },
    {
        _id: '60c0c5d7f5b87a1604d3d555',
        name: 'Colors'
        attribute: {
            value: 'blue'
            _id: '60c0c5d7f5b87a1604fsd33',
        }
    },
    {
        _id: '60c0c5d7f5b87a1604d3f566',
        name: 'Sizes'
        attribute: {
            value: 'M'
            _id: '60c0c5d7f5b87a1604d3d522',
        }
    },
    {
        _id: '60c0c5d7f5b87a1604d3f566',
        name: 'Sizes'
        attribute: {
            value: 'L'
            _id: '60c0c5d7f5b87a1604d3d512',
        }
    }
]

EXPECTED OUTPUT

[
    {
        _id: '60c0c5d7f5b87a1604d3d555',
        name: 'Colors'
        attributes:[
            {
                value: 'red'
                _id: '60c0c5d7f5b87a1604d3d544',
            },
             {
                value: 'blue'
                _id: '60c0c5d7f5b87a1604fsd33',
            }
        ]
    },
    {
        _id: '60c0c5d7f5b87a1604d3f566',
        name: 'Sizes'
        attributes: [
            {
                value: 'M'
                _id: '60c0c5d7f5b87a1604d3d522',
            },
            {
                value: 'L'
                _id: '60c0c5d7f5b87a1604d3d512',
             }
        ]
    }
]

Any help is appreciated, thanks in advance!

Answer 1

Can try to create hashmap list, with id+name identifier and value attribute list. I think that this way you will be able to concatenate and have the expected output.

function concatArray(idTextAreaOut){
    var i =0,j = 0;
    var array = [ { _id: '60c0c5d7f5b87a1604d3d555', name: 'Colors', attribute: { value: 'red', _id: '60c0c5d7f5b87a1604d3d544', } }, { _id: '60c0c5d7f5b87a1604d3d555', name: 'Colors', attribute: { value: 'blue', _id: '60c0c5d7f5b87a1604fsd33', } }, { _id: '60c0c5d7f5b87a1604d3f566', name: 'Sizes', attribute: { value: 'M', _id: '60c0c5d7f5b87a1604d3d522', } }, { _id: '60c0c5d7f5b87a1604d3f566', name: 'Sizes', attribute: { value: 'L', _id: '60c0c5d7f5b87a1604d3d512', } } ];
    var arrayConcat = [];
    for(i = 0; i < array.length;i++){
        var element = array[i];
        var key = element._id+element.name;
        var finded = false;
        for(j = 0; j < arrayConcat.length;j++){
            var otherElement = arrayConcat[j];
            var keyOther = otherElement._id+otherElement.name;
            if(key == keyOther){
                if(!Array.isArray(otherElement.attribute)){
                    var temp = otherElement.attribute;
                    otherElement.attribute = [];
                    otherElement.attribute.push(temp);
                }
                otherElement.attribute.push(element.attribute);
                finded = true;
            }
        }

        if(!finded){
            arrayConcat.push(element);
        }
        
    }
    $('#'+idTextAreaOut).val(JSON.stringify(arrayConcat));
    
}

Answer 2

You can use array#reduce and object.values() to group your array based on _id.

const data = [ { _id: '60c0c5d7f5b87a1604d3d555', name: 'Colors', attribute: { value: 'red', _id: '60c0c5d7f5b87a1604d3d544', } }, { _id: '60c0c5d7f5b87a1604d3d555', name: 'Colors', attribute: { value: 'blue', _id: '60c0c5d7f5b87a1604fsd33', } }, { _id: '60c0c5d7f5b87a1604d3f566', name: 'Sizes', attribute: { value: 'M', _id: '60c0c5d7f5b87a1604d3d522', } }, { _id: '60c0c5d7f5b87a1604d3f566', name: 'Sizes', attribute: { value: 'L', _id: '60c0c5d7f5b87a1604d3d512', } } ],
      result = Object.values(data.reduce((r, {_id, name, attribute}) => {
        r[_id] = r[_id] || {  _id, name, attributes: []};
        r[_id].attributes.push(attribute);
        return r;
      },{}));
console.log(result);

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