Turn keys and values of an object into array of objects

Question

so I have a data structure that looks like this :

data = {
  a: [1, 2, 3, 4, 5],
  b: ["a", "b", "c", "d", "e"],
  c: ["123", "235423", "12312", "1231", "12312"],
  d: ["aa", "bb", "cc", "dd", "ee"],
  ...
}

and I need to convert it into a following structure:

[
   { a: 1, b: "a", c: "123", d: "aa", ... },
   { a: 2, b: "b", c: "235423", d: "bb", ... },
   { a: 3, b: "c", c: "12312", d: "cc", ... },
   { a: 4, b: "d", c: "1231", d: "dd", ... },
   { a: 5, b: "a", c: "12312", d: "ee", ... },
]

the number of keys in data can vary, but the length of the values will always be same across all arrays, i.e. data[a].length === data[z].length will always be true.

My solution:

const doStuff = () => {
    const result = [];
    const keys = Object.keys(data);

    if (!keys) return result;

    const valuesLength = keys[0].length
    const result = [];

    for (let i = 0; i < valuesLength ; i++) {
        const obj = {};
        for (const key in data) {
            obj[key] = data[key][i];
        }

        result.push(obj);
    }
    return result;
};

is using two for loops is not most effective one since the number of keys can be large, so i'm looking for a most optimal solution

It is going to be two loops. Show your solution.

epascarello
– epascarello

2020-10-07 19:25:04 +00:00
Commented Oct 7, 2020 at 19:25 — epascarello
– epascarello, Commented Oct 7, 2020 at 19:25
@epascarello updated

testing_kate
– testing_kate

2020-10-07 19:41:47 +00:00
Commented Oct 7, 2020 at 19:41 — testing_kate
– testing_kate, Commented Oct 7, 2020 at 19:41

Yevhen Horbunkov · Accepted Answer · 2020-10-07 19:42:52Z

1

You may traverse your source object keys (Object.keys()) with Array.prototype.reduce(), looping inner arrays with Array.prototype.forEach() and assigning corresponding property of resulting object:

const src = {a:[1,2,3,4,5],b:["a","b","c","d","e"],c:["123","235423","12312","1231","12312"],d:["aa","bb","cc","dd","ee"]},

      result = Object
        .keys(src)
        .reduce((acc, key, i, keys) => {
          src[key].forEach((v, j) => {
            acc[j] = acc[j] || {}
            acc[j][key] = v
          })
          return acc
        }, [])
        
console.log(result)

.as-console-wrapper{min-height:100%;}

answered Oct 7, 2020 at 19:42

Yevhen Horbunkov

15.6k3 gold badges27 silver badges46 bronze badges

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

Comments

epascarello · Accepted Answer · 2020-10-07 20:08:24Z

The solution is going to require two loops. One to go over the properties in the object, the other to loop over the array of values.

Personally I would use reduce and forEach for the two loops

const data = {
  a: [1, 2, 3, 4, 5],
  b: ["a", "b", "c", "d", "e"],
  c: ["123", "235423", "12312", "1231", "12312"],
  d: ["aa", "bb", "cc", "dd", "ee"]
}

const result = Object.entries(data).reduce((arr, [key, values]) => (
  values.forEach((value, index) => {
    arr[index] = {
      ...arr[index],
      [key]: value
    };
  }),
  arr), []);

console.log(result);

without the fat arrows and destructuring

var data = {
  a: [1, 2, 3, 4, 5],
  b: ["a", "b", "c", "d", "e"],
  c: ["123", "235423", "12312", "1231", "12312"],
  d: ["aa", "bb", "cc", "dd", "ee"]
};

var result = Object.entries(data).reduce(function(result, entry) {
  var key = entry[0];
  var arr = entry[1];

  arr.forEach(function(value, index) {
    result[index] = result[index] || {};
    result[index][key] = value;
  });

  return result;
}, []);

console.log(result);

mukhtar alam · Accepted Answer · 2020-10-07 20:16:08Z

0

Please check the below code:

var data = {
  a: [1, 2, 3, 4, 5],
  b: ["a", "b", "c", "d", "e"],
  c: ["123", "235423", "12312", "1231", "12312"],
  d: ["aa", "bb", "cc", "dd", "ee"]
}
  
var anotherObjArray = [];

  for(var i=0;i<data[Object.keys(data)[0]].length;i++){
    let tempObj = {};
    for(var j=0;j<Object.keys(data).length;j++){
        tempObj[Object.keys(data)[j]] = data[Object.keys(data)[j]][i];    
    }
    anotherObjArray.push(tempObj);
  }

anotherObjArray is the final array for your requirement.

answered Oct 7, 2020 at 20:16

mukhtar alam

3233 silver badges12 bronze badges

2 Comments

testing_kate Over a year ago

thats basically the same that i have

mukhtar alam Over a year ago

@testing_kate Yeah, basically almost same except the inner for loop which I iterated over an array instead of object. Because iterating over array is most preferred one than an object.

Nina Scholz · Accepted Answer · 2020-10-08 08:21:41Z

0

By assuming same length arrays, you could get the entries and reduce the array by mapping all values along with the object at the same index and the new property.

const
    data = { a: [1, 2, 3, 4, 5], b: ["a", "b", "c", "d", "e"], c: ["123", "235423", "12312", "1231", "12312"], d: ["aa", "bb", "cc", "dd", "ee"] },
    result = Object
        .entries(data)
        .reduce((r, [k, a]) => a.map((v, i) => ({ ...r[i], [k]: v })), []);

console.log(result);

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

edited Oct 8, 2020 at 8:21

answered Oct 7, 2020 at 19:53

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

1 Comment

Nina Scholz Over a year ago

right. it need same length arrays, which op is asking for.

Collectives™ on Stack Overflow

Turn keys and values of an object into array of objects

4 Answers 4

Comments

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related