How Do I Pivot An Array Of Objects in JavaScript?

Question

I have an array of object which I need to convert to a table (kind of pivoting the data). Saying this I need to get another array of objects with the unique titles which have nested arrays of object with pairs of the values. Could you please take a look into this and help with achiving what I need? Please see the original and the desired array below:

Original Array:

[
{title: "Title1", value1: "value1", value2: "value2"},
{title: "Title2", value1: "value1", value2: "value2"},
{title: "Title1", value1: "value1", value2: "value2"},
{title: "Title3", value1: "value1", value2: "value2"},
{title: "Title2", value1: "value1", value2: "value2"},
{title: "Title1", value1: "value1", value2: "value2"},
{title: "Title3", value1: "value1", value2: "value2"},
{title: "Title1", value1: "value1", value2: "value2"},
]

Desired result:

[
{title: "Title1", values: [{value1: "value1"}, {value2: "value2"}]},
{title: "Title2", values: [{value1: "value1"}, {value2: "value2"}]},
{title: "Title3", values: [{value1: "value1"}, {value2: "value2"}]},
]

Thanks if advance for any suggestions.

Too many duplicate "value1" "value2" for your example too make any sense. — Paul
– Paul, Commented Nov 10, 2016 at 8:47

ste2425 · Accepted Answer · 2016-11-10 09:01:05Z

6

A simple array reduce may be of help

let data = [{
  title: "Title1",
  value1: "value1",
  value2: "value2"
}, {
  title: "Title2",
  value1: "value1",
  value2: "value2"
}, {
  title: "Title1",
  value1: "value1",
  value2: "value2"
}, {
  title: "Title3",
  value1: "value1",
  value2: "value2"
}, {
  title: "Title2",
  value1: "value1",
  value2: "value2"
}, {
  title: "Title1",
  value1: "value1",
  value2: "value2"
}, {
  title: "Title3",
  value1: "value1",
  value2: "value2"
}, {
  title: "Title1",
  value1: "value1",
  value2: "value2"
}];

let pivoted = data.reduce((prev, cur) => {
  let existing = prev.find(x => x.title === cur.title);

  if (existing)
    existing.values.push(cur)
  else
    prev.push({
      title: cur.title,
      values: [cur]
    });

  return prev;
}, []);

console.log(pivoted);

API's used

Reduce

Find

This could then be adapted to pivot by any field you desire, it would need error handling adding if that field does not exist however:

let pivotBy = (key, data) => data.reduce((prev, cur) => {
  let existing = prev.find(x => x[key] === cur[key]);

  if (existing) {
    existing.values.push(cur);
  } else {
    let toInsert = {
        values: [cur]
    }

    toInsert[key] = cur[key];

    prev.push(toInsert);
  }

  return prev;
}, []);

EDIT I misinterpreted your desired output format, however the reduce approach could be modified to fulfill that requirement.

edited Nov 10, 2016 at 9:01

answered Nov 10, 2016 at 8:54

ste2425

4,8473 gold badges26 silver badges39 bronze badges

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

1 Comment

sifr_dot_in Over a year ago

can u just add the code for multiple columns too. e.g. array when title1 + title2 change!

Nina Scholz · Accepted Answer · 2016-11-10 09:47:14Z

4

You could use a hash table for grouping as thisArg with Array#forEach.

var data = [{ title: "Title1", value1: "value1", value2: "value2" }, { title: "Title2", value1: "value1", value2: "value2" }, { title: "Title1", value1: "value1", value2: "value2" }, { title: "Title3", value1: "value1", value2: "value2" }, { title: "Title2", value1: "value1", value2: "value2" }, { title: "Title1", value1: "value1", value2: "value2" }, { title: "Title3", value1: "value1", value2: "value2" }, { title: "Title1", value1: "value1", value2: "value2" }],
    grouped = [];

data.forEach(function (a) {

    // check if title is not in hash table
    if (!this[a.title]) {

        // if not, create new object with title and values array
        // and assign it with the title as hash to the hash table
        this[a.title] = { title: a.title, values: [] };

        // add the new object to the result set, too
        grouped.push(this[a.title]);
    }

    // create a new object with the other values and push it
    // to the array of the object of the hash table
    this[a.title].values.push({ value1: a.value1, value2: a.value2 });
}, Object.create(null)); // Object.create creates an empty object without prototypes

console.log(grouped);

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

edited Nov 10, 2016 at 9:47

answered Nov 10, 2016 at 8:51

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

1 Comment

egurb Over a year ago

Thanks, Nina! This is exactly what I wanted. May I ask you to add some comments to the code as I would love to get a better understanding of what we have here. However, it's not that Important, if you don't have time I will try to investigate everything by myself.

xale94 · Accepted Answer · 2016-11-10 08:58:42Z

    var originalArray = [
      {title: "Title1", value1: "value1", value2: "value2"},
      {title: "Title2", value1: "value1", value2: "value2"},
      {title: "Title1", value1: "value1", value2: "value2"},
      {title: "Title3", value1: "value1", value2: "value2"},
      {title: "Title2", value1: "value1", value2: "value2"},
      {title: "Title1", value1: "value1", value2: "value2"},
      {title: "Title3", value1: "value1", value2: "value2"},
      {title: "Title1", value1: "value1", value2: "value2"},
    ];
    var newArray = [];

    for(var i = 0; i<originalArray.length; i++){
      var object = {};
      object.title=originalArray[i].title;
      var values = [];
      values.push({value1: originalArray[i].value1});
      values.push({value2: originalArray[i].value2});
      object.values= values;
      newArray.push(object);
    }

This will work, although honestly, I don't know why you have some duplicated tittles. I supossed that it was just an example. If not, the answer is another.

Collectives™ on Stack Overflow

How Do I Pivot An Array Of Objects in JavaScript?

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related