how to split an array of objects with a single row into multiple rows in javascript

AbednegoNasila
June 13, 2023
194 views
4 votes
4 Answers

I have the following array with one object:

[{
  "0key1": "a33",
  "0key2": "Aab",
  "0key3": "i",
  "1key1": "e78",
  "1key2": "Vib",
  "1key3": "j",
  "2key1": "c99",
  "2key2": "Aig",
  "2key3": "k"
}]

I would like to split it into three "key": "value" per row as shown below:

[
  {"0key1":"a33","0key2":"Aab","0key3":"i"},
  {"1key1":"e78","1key2":"Vib","1key3":"j"},
  {"2key1":"c99","2key2":"Aig","2key3":"k"}
]

Please help me achieve that.

Tags: javascript

Answers

This snippet works for your example, but you will want to add some bounds checking if needed.

const input = [
  {
    "0key1": "a33",
    "0key2": "Aab",
    "0key3": "i",
    "1key1": "e78",
    "1key2": "Vib",
    "1key3": "j",
    "2key1": "c99",
    "2key2": "Aig",
    "2key3": "k",
  },
];

function transform(input) {
  const m = new Map();
  for (const key in input) {
    const idx = parseInt(key.slice(0, 1));
    if (!m.get(idx)) {
      m.set(idx, {});
    }
    const obj = m.get(idx);
    obj[key] = input[key];
  }
  const output = [];
  for (const [idx, obj] of m) {
    output.push(obj);
  }
  output.sort((a, b) => {
    const ak = Object.keys(a);
    const bk = Object.keys(b);
    if (ak[0] < bk[0]) {
      return -1;
    }
    return 1;
  });
  return output;
}

const output = transform(input[0]);

console.log(output);

Here’s a potential approach:

// Problem:
// based on the first char of each object key
// store the properties in separate objects in the array

// Algo:
// create a new array to store the objects
// for each object key
//  get its first character
//  if there is already an object with that starting char in its first key
//    (how to: `find` an object in the new array whose first key starts with that char)
//    add the current key-value pair in that object
//  otherwise, create a new one and append it to the new array

const arr = [{"0key1":"a33","0key2":"Aab","0key3":"i","1key1":"e78","1key2":"Vib","1key3":"j","2key1":"c99","2key2":"Aig","2key3":"k"}];
const obj = arr[0];

const splitArr = [];
for (let key in obj) {
  let firstChar = key[0];
  let matchObj = splitArr.find(obj => Object.keys(obj)[0][0] === firstChar);

  if (matchObj) matchObj[key] = obj[key];
  else splitArr.push({ [key]: obj[key] });
}

console.log(splitArr);

I would use reduce and a nullish coalescing assigment

const input = [{ 
  "0key1": "a33", "0key2": "Aab", "0key3": "i",
  "1key1": "e78", "1key2": "Vib", "1key3": "j",
  "2key1": "c99",  "2key2": "Aig", "2key3": "k"
}]
const output = Object.entries(input[0]).reduce((acc,cur) => {
  const key = cur[0];
  const [mainIdx,idx] = key.split("key");
  acc[mainIdx] ??= {}; // nullish coalescing assignment
  acc[mainIdx][key]=cur[1];
  return acc;
}
,[])
console.log(output)

Short and simple. Easy to understand and gets the job done.

const original = [{
  "0key1": "a33",
  "0key2": "Aab",
  "0key3": "i",
  "1key1": "e78",
  "1key2": "Vib",
  "1key3": "j",
  "2key1": "c99",
  "2key2": "Aig",
  "2key3": "k"
}];

console.log('Original:', original);
console.log('Output:', splitArray(original));

function splitArray(input) {
  const splitObjects = {}

  Object.keys(input[0]).forEach((key) => {
    const firstChar = key.substr(0, 1)

    splitObjects[firstChar] = splitObjects[firstChar] || {}
    splitObjects[firstChar][key] = input[0][key]
  })

  return Object.keys(splitObjects).map((key) => splitObjects[key])
}

Please signup or login to give your own answer.

Click here to cancel reply.