Reduce an Array of object based on value of attribute

Question

I am trying to create a new array of object from an existing array of object based on the common attribute (category.blocktitle) value inside the object. My array of object looks like this.

[
  {
    "category": {
      "name": "test1111",
      "val": "test111111111",
      "blocktitle": ".test.0"
    }
  },
  {
    "category": {
      "name": "test22",
      "val": "test2222",
      "blocktitle": ".test.0.test2"
    }
  },
  {
    "category": {
      "name": "test1111111",
      "val": "test11111111111",
      "blocktitle": ".test.0"
    }
  },
  {
    "category": {
      "name": "test2222",
      "val": "test222222",
      "blocktitle": ".test.0.test2"
    }
  }
]

My desired output is

[
  {
    "category": {
       "name_val" : [
              {
                     "name": "test1111",
                     "val": "test111111111"
              }, 
              { 
                     "name": "test1111111",
                     "val": "test11111111111",
              }
       ]
    },
    "blocktitle": ".test.0"
  },
  {
    "category": {
        "name_val" : [
                  {
                         "name": "test22",
                         "val": "test2222"
                  }, 
                  { 
                         "name": "test2222",
                         "val": "test222222",
                  }
        ]
    },
    "blocktitle": ".test.0.test2"
  }
]

I have tried reduce / map / filter but not sure what I am doing wrong.

Just so it is explicitly stated, how are you wanting to "match"? Because the names that you have grouped are not equal. Or is it that you are matching on the blocktitle? — Taplar
– Taplar, Commented Nov 2, 2017 at 15:13
“I have tried reduce / map / filter” — Great! Show your attempt in your question! We also won’t know what you’re doing wrong, unless you include your attempt and a clear problem statement. — Sebastian Simon
– Sebastian Simon, Commented Nov 2, 2017 at 15:13

mplungjan · Accepted Answer · 2018-06-22 08:03:28Z

3

I would use ES6 Array.prototype.reduce and Array.prototype.filter methods:

let result = data.reduce((acc, d) => { 
  const found = acc.find(a => a.blocktitle === d.category.blocktitle);
  const value = { name: d.category.name, val: d.category.val };
  if(found) {
    found.category.name_val.push(value);
  }
  else {
    acc.push({blocktitle: d.category.blocktitle, category: { name_val: [value]} });
  }
  return acc;
}, []);

Where data is your initial data array.

edited Jun 22, 2018 at 8:03

mplungjan

180k29 gold badges183 silver badges246 bronze badges

answered Nov 2, 2017 at 15:22

dhilt

21.1k8 gold badges79 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Yosvel Quintero Over a year ago

This answer is not performant because you are making a search for all elements in the array with the code acc.find(a => a.blocktitle === d.category.blocktitle)..

dhilt Over a year ago

@YosvelQuintero Maybe your a.findIndex(e => e.blocktitle === blocktitle) is more performant? ;)

Yosvel Quintero Over a year ago

he findIndex() method returns the index of the first element in the array that satisfies the provided testing function. Otherwise -1 is returned. - But, notice that I only do Array.prototype.findIndex() if objHash[blocktitle] evaluate falsey

dhilt Over a year ago

@YosvelQuintero Yes, and the same is true also for find. Per MDN: The find() method returns the value of the first element in the array that satisfies the provided testing function. Otherwise undefined is returned.

Yosvel Quintero Over a year ago

But you are doing Array.prototype.find() for every elements in the Array.prototype.reduce() - And that is not performant ;)

|

Taplar · Accepted Answer · 2017-11-02 15:27:36Z

var test = [
  {
    "category": {
      "name": "test1111",
      "val": "test111111111",
      "blocktitle": ".test.0"
    }
  },
  {
    "category": {
      "name": "test22",
      "val": "test2222",
      "blocktitle": ".test.0.test2"
    }
  },
  {
    "category": {
      "name": "test1111111",
      "val": "test11111111111",
      "blocktitle": ".test.0"
    }
  },
  {
    "category": {
      "name": "test2222",
      "val": "test222222",
      "blocktitle": ".test.0.test2"
    }
  }
];

//create a map of blocktitle to elements with that blocktitle
var temp = test.reduce(function(collection, element){
  if (collection[element.category.blocktitle] === undefined) collection[element.category.blocktitle] = [];
  
  collection[element.category.blocktitle].push(element);
  return collection;
}, {});

//convert temp to expected result
var result = Object.keys(temp).map(function(blocktitle){
  return {
    blocktitle: blocktitle,
    category: {
      name_val: temp[blocktitle].map(function(element){
        return { name: element.category.name, val: element.category.val };
      })
    }
  };
});

console.log(result);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Nina Scholz · Accepted Answer · 2017-11-02 15:24:02Z

You could use an object as reference to the same group.

var data = [{ category: { name: "test1111", val: "test111111111", blocktitle: ".test.0" } }, { category: { name: "test22", val: "test2222", blocktitle: ".test.0.test2" } }, { category: { name: "test1111111", val: "test11111111111", blocktitle: ".test.0" } }, { category: { name: "test2222", val: "test222222", blocktitle: ".test.0.test2" } }],
    hash = Object.create(null),
    grouped = [];

data.forEach(function (o) {
    var key = o.category.blocktitle;
    if (!hash[key]) {
        hash[key] = [];
        grouped.push({ category: { name_val: hash[key], blocktitle: o.category.blocktitle } });
    }
    hash[key].push({ name: o.category.name, val: o.category.val });
});

console.log(grouped);

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

Yosvel Quintero · Accepted Answer · 2017-11-03 10:31:28Z

You can use Array.prototype.reduce():

const data = [{category: {name: 'test1111',val: 'test111111111',blocktitle: '.test.0'}},{category: { name: 'test22', val: 'test2222', blocktitle: '.test.0.test2' }},{category: {name: 'test1111111',val: 'test11111111111',blocktitle: '.test.0'}},{category: {name: 'test2222',val: 'test222222',blocktitle: '.test.0.test2'}}]
const result = data.reduce((a, c) => {
  let blocktitle = c.category.blocktitle;
  let objNameVal = { name: c.category.name, val: c.category.val };

  if (a.hash[blocktitle]) {
    let index = a.array.findIndex(e => e.blocktitle === blocktitle);
    a.array[index].category.name_val.push(objNameVal);
  } else {
    a.hash[blocktitle] = true;
    a.array.push({ category: { name_val: [objNameVal] }, blocktitle: blocktitle });
  }
  return a;
}, { array: [], hash: {} });

// Clean hash..
delete result.hash;

console.log(result.array);

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

Alex K · Accepted Answer · 2017-11-02 15:38:05Z

You can use a reduce to index the items by blocktitle, and then map that object to an array.

function convert(input) {
  const byBlocktitle = input.reduce((byBlocktitleOut, inputObject) => {
    const blocktitle = inputObject.category.blocktitle;

    byBlocktitleOut[blocktitle] = byBlocktitleOut[blocktitle] || [];
    byBlocktitleOut[blocktitle].push(inputObject);

    return byBlocktitleOut;
  }, {});

  return Object.keys(byBlocktitle).map((blocktitle) => {
    const inputObjects = byBlocktitle[blocktitle];

    return {
      category: {
        name_val: inputObjects.map((inputObject) => {
          return {
            name: inputObject.category.name,
            val: inputObject.category.val,
          };
        }),
      },
      blocktitle: blocktitle,
    };
  });
}

Working example/test: http://jsbin.com/yifapacupi/edit?js,console,output

Collectives™ on Stack Overflow

Reduce an Array of object based on value of attribute

5 Answers 5

7 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

7 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related