Transform array of objects into a transposed array of objects

Question

I need to transform an array of objects into another array of objects but transposed. This is the form highcharts accepts arrays.

I need to go from

    var n0 = [{
        "a": 1,
        "b": 4
    }, {
        "a": 2,
        "b": 6
    }, {
        "a": 3,
        "b": 8
    }]

to

    var n1 = [{
        "name": "a",
        "data": [1, 2, 3]
    }, {
        "name": "b",
        "data": [4, 6, 8]
    }];

What about changing from

            var input = [{
                "date": "JAN",
                "category": "abc",
                "thevalue": 5
            }, {
                "date": "JAN",
                "category": "xyz",
                "thevalue": 4
            }, {
                "date": "FEB",
                "category": "abc",
                "thevalue": 9
            }, {
                "date": "FEB",
                "category": "xyz",
                "thevalue": 10
            }]

To

                var output = [{
                    "name": "abc",
                    "data": [5,9]
                }, {
                    "name": "xyz",
                    "data": [4, 10]
                }];

Can this be accomplished with the same functions? I've read two javascript books but somehow these puzzles are far above my abilities. I don't even know where to start learning. I guess I could reread the chapter about objects and arrays, the issue is those examples are very basic.

Can elaborate on the input and expected output? Because it looks like your arbitrarily threw out the key date in your expected output — Andrew
– Andrew, Commented Jun 19, 2018 at 6:40
I was using this for a graph. So it's a highcharts graph with 3 dimensions. One is date which I make unique with a function and use it on the x axis. So I already know how to use that part. Thevalue become my y-axis, and the category the z-axis. I get the data from a query. So the 3rd axis will be the category. HighCharts wants the series in this format an array of objects with the keys name and data[] jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/… — Dong
– Dong, Commented Jun 19, 2018 at 6:49
I wonder if it's just easier to hard code as name["category"][0] name["category"][1] and so on, but I was hoping on learning how to do it in a smarter way in case I want to do this again. Feels like a good opportunity to learn how objects and arrays work. — Dong
– Dong, Commented Jun 19, 2018 at 6:53

Andrew · Accepted Answer · 2018-06-19 07:45:25Z

1

An easy way to solve this is to keep in mind that every key you're using exists in each entry of the input array. Getting an array all of the keys of any of those objects using Object.keys gives you the list of names. From there, iterate over that array and keep selecting out the specific key value you're interested in using .map.

Just a heads up, this will throw an error if your array is empty. You can have an early return condition if you encounter that corner case.

If you have any questions about the syntax I use, feel free to ask for clarification.

    var n0 = [{
      "a": 1,
      "b": 4,
      "c": 5
    }, {
      "a": 2,
      "b": 6,
      "c": 4
    }, {
      "a": 3,
      "b": 8,
      "c": 10
    }]

    function transposeObject(array) {
      const newArr = [] // an empty array I make to store my values that I will eventually return
      const arrayOfKeys = Object.keys(array[0]) // selecting the first element in the array. Taking the keys as an array
      arrayKeys.forEach(name => {
        const newObj = { name }; // new object. I insert the name to start.
        const arrayOfNumbersByKeyName = array.map(object => object[name]) // create new array that is only compromised of the value from object[name], where name is a variable representing a key from arrayKeys
        newObj.data = arrayOfNumbersByKeyName // insert my newly created array into newObject under the key 'data'
        newArr.push(newObj) // push my fully constructed array into my newArr that I initialized at the top of the function
      });
      return newArr
    }

    console.log(transposeObject(n0))

Update:

It looks like you're trying to get every value that correlates with a key from category. Apologies, but there's no "easy" way to solve this unless you want to write an incredibly long algorithm.

One way is to grab every possible value of key and then filtering only for the specific category name each time.

var input = [{
    "date": "JAN",
    "category": "abc",
    "thevalue": 5
}, {
    "date": "JAN",
    "category": "xyz",
    "thevalue": 4
}, {
    "date": "FEB",
    "category": "abc",
    "thevalue": 9
}, {
    "date": "FEB",
    "category": "xyz",
    "thevalue": 10
}]

function generateGraphData(array) {
    const newArr = []
    const arrayOfCategories = array.map(object => object.category)
    const setOfCategories = new Set(arrayOfCategories)
    for (const category of setOfCategories) {
        const filteredCategories = array.filter(obj => obj.category === category)
        const graphData = filteredCategories.map(obj => obj.thevalue)
        newArr.push({ name: category, data: graphData})
    }
    return newArr
}

const data = generateGraphData(input)
console.log(data)

edited Jun 19, 2018 at 7:45

answered Jun 19, 2018 at 6:03

Andrew

7,5855 gold badges28 silver badges35 bronze badges

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

3 Comments

Dong Over a year ago

This is very valuable but I need to probably spend a few hours taking it step by step before I understand what it does. I've basically asked the wrong question because I didn't realize I need the value to become the new key as in my edited second example in the OP.

Dong Over a year ago

Thank you, I'll look at it more closely tomorrow. 3:30 am now. I only looked at it superficially now, looks like you had a spelling error on the second arraykeys should be arrayofkeys.

Andrew Over a year ago

@Dong Updated with your changes

CertainPerformance · Accepted Answer · 2018-06-19 05:42:28Z

1

reduce the items into an object indexed by name, then get that object's values:

var n0 = [{
  "a": 1,
  "b": 4
}, {
  "a": 2,
  "b": 6
}, {
  "a": 3,
  "b": 8
}];
console.log(
  Object.values(
    n0.reduce((a, obj) => {
      Object.entries(obj).forEach(([name, val]) => {
        if (!a[name]) a[name] = { name, data: [] };
        a[name].data.push(val);
      })
      return a;
    }, {})
  )
);

answered Jun 19, 2018 at 5:42

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

1 Comment

Dong Over a year ago

Thank you, I've tried it and it does what I asked for. I need to exercise the reduce function a bit before I understand the solution.

Nina Scholz · Accepted Answer · 2018-06-19 14:09:13Z

You could check if a handed over name and value key is given, then take both for generating the grouped result, otherwise take all keys of the objects for grouping.

function groupBy(array, name, value) {
    const
        groupByNameValue = (r, o) => {
            var object = r.find(p => p.name === o[name]);
            if (!object) {
                r.push(object = { name: o[name], data: [] });
            }
            object.data.push(o[value]);
            return r;
        },
        groupByAllKeys = (r, o) => {
            Object.entries(o).forEach(([name, value]) => {
                var object = r.find(p => p.name === name);
                if (!object) {
                    r.push(object = { name, data: [] });
                }
                object.data.push(value);
            });
            return r;
        }

    return array.reduce(name && value ? groupByNameValue : groupByAllKeys, []);
}

var data1 = [{ a: 1, b: 4 }, { a: 2, b: 6 }, { a: 3, b: 8 }],
    data2 = [{ date: "JAN", category: "abc", thevalue: 5 }, { date: "JAN", category: "xyz", thevalue: 4 }, { date: "FEB", category: "abc", thevalue: 9 }, { date: "FEB", category: "xyz", thevalue: 10 }];

console.log(groupBy(data1));
console.log(groupBy(data2, 'category', 'thevalue'));

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

Collectives™ on Stack Overflow

Transform array of objects into a transposed array of objects

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related