Converting a JSON object into an array of objects

Question

Converting a JSON object into an array of objects

I am looking to transform the following JSON structure

let data = {
  item1: [11, 12, 13, 14, 15],
  item2: [16, 17, 18, 19, 20]
}

into this specific format using JavaScript's native functionalities of arrays or objects (compatible with all web browsers)

[{
  item1: 11,
  item2: 16
},{
  item1: 12,
  item2: 17
},{
  item1: 13,
  item2: 18
},{
  item1: 14,
  item2: 19
},{
  item1: 15,
  item2: 20
}]

I attempted to achieve this using a for loop and here is the code snippet I came up with:

let keys = Object.keys(data);
let transformedData = [];
for(let i = 0; i < keys.length; i++){
   let key = keys[i];
   for(let j = 0; j < data[key].length; j++){
      if(i === 0){
        let obj1 = {};
        obj1[key] = data[key][j];
        transformedData.push(obj1);
    }else{
        let obj2 = transformedData[j];
        obj2[key] = data[key][j];
    }    
  }
}

javascript arrays json object browser

Answer 1

Answer №1

If you want to achieve this, you can utilize the Array.prototype.reduce() method.

To accomplish this task, iterate through the elements of the test1 array and add a new object to the accumulating array with properties test1 and test2 along with their corresponding values.

let init = {
  test1: [1, 2, 3, 4, 5],
  test2: [6, 7, 8, 9, 10]
};

let keys = Object.keys(init);
let key1 = keys[0];
let key2 = keys[1];

let result = init[key1].reduce((acc, curr, i) => {
  acc.push({
    [key1]: curr,
    [key2]: init[key2][i]
  });

  return acc;
}, []);

console.log(result);

At present, the reduce() method is supported in most modern browsers. If you need support for all browsers, consider using a for loop instead of Object.keys(). Iterate through object properties or use a polyfill.

let init = {
  test1: [1, 2, 3, 4, 5],
  test2: [6, 7, 8, 9, 10]
};

let keys = [];

for (let key in init) {
  if (init.hasOwnProperty(key)) {
    keys.push(key);
  }
}

let key1 = keys[0];
let key2 = keys[1];

let result = [];

for (let i = 0; i < key1.length; i++) {
  result.push({
    [key1]: init[key1][i],
    [key2]: init[key2][i]
  });
}

console.log(result);

Answer 2

If you want to achieve this, you can utilize the Array.prototype.reduce() method.

To accomplish this task, iterate through the elements of the test1 array and add a new object to the accumulating array with properties test1 and test2 along with their corresponding values.

let init = {
  test1: [1, 2, 3, 4, 5],
  test2: [6, 7, 8, 9, 10]
};

let keys = Object.keys(init);
let key1 = keys[0];
let key2 = keys[1];

let result = init[key1].reduce((acc, curr, i) => {
  acc.push({
    [key1]: curr,
    [key2]: init[key2][i]
  });

  return acc;
}, []);

console.log(result);

At present, the reduce() method is supported in most modern browsers. If you need support for all browsers, consider using a for loop instead of Object.keys(). Iterate through object properties or use a polyfill.

let init = {
  test1: [1, 2, 3, 4, 5],
  test2: [6, 7, 8, 9, 10]
};

let keys = [];

for (let key in init) {
  if (init.hasOwnProperty(key)) {
    keys.push(key);
  }
}

let key1 = keys[0];
let key2 = keys[1];

let result = [];

for (let i = 0; i < key1.length; i++) {
  result.push({
    [key1]: init[key1][i],
    [key2]: init[key2][i]
  });
}

console.log(result);

Answer 3

Answer №2

To achieve the desired result, a combination of for...in and Array.forEach can be used in just a few lines of code. For broader browser support, it's recommended to use var instead of let. Browser compatibility reference

var init = {
  test1: [1, 2, 3, 4, 5],
  test2: [6, 7, 8, 9, 10]
}

var result = []
for (var key in init) {
  init[key].forEach(function (item, index) {
    result[index] ? result[index][key] = item : result[index] = { [key]: item }
  })
}

console.log(result)

A simpler approach would be initializing the result with empty objects to avoid using ternary statements:

Note: This method is not compatible with IE11 due to lack of support for Array.fill()

var init = {
  test1: [1, 2, 3, 4, 5],
  test2: [6, 7, 8, 9, 10]
}

var result = new Array(Object.keys(init)[0].length).fill().map(Object);
for (var key in init) {
  init[key].forEach(function(item, index) {
    result[index][key] = item
  })
}

console.log(result)

When implementing this method, be cautious about creating an array with Objects that refer to the same memory object: Reference issue with Array.prototype.fill() and objects

Answer 4

To achieve the desired result, a combination of for...in and Array.forEach can be used in just a few lines of code. For broader browser support, it's recommended to use var instead of let. Browser compatibility reference

var init = {
  test1: [1, 2, 3, 4, 5],
  test2: [6, 7, 8, 9, 10]
}

var result = []
for (var key in init) {
  init[key].forEach(function (item, index) {
    result[index] ? result[index][key] = item : result[index] = { [key]: item }
  })
}

console.log(result)

A simpler approach would be initializing the result with empty objects to avoid using ternary statements:

Note: This method is not compatible with IE11 due to lack of support for Array.fill()

var init = {
  test1: [1, 2, 3, 4, 5],
  test2: [6, 7, 8, 9, 10]
}

var result = new Array(Object.keys(init)[0].length).fill().map(Object);
for (var key in init) {
  init[key].forEach(function(item, index) {
    result[index][key] = item
  })
}

console.log(result)

When implementing this method, be cautious about creating an array with Objects that refer to the same memory object: Reference issue with Array.prototype.fill() and objects

Converting a JSON object into an array of objects

Answer №1

Answer №2

Similar questions

Transmit JSON from PHP to an autocomplete feature and include a data attribute in the input field

How to properly Open a "div" Element by its ID in ReactJS

Initial position of jQuery slider

How can I convert a series of numerical values into a numpy array?

jquery plugin for creating Excel-like filters

Transform the jQuery UI Slider to be clickable rather than draggable

Is it possible for Cypress to execute test files that are imported from outside of the Cypress folder

What is the method to eliminate waitedMS and ok values from the output of a MongoDB aggregation query?

Getting the elements from multiple arrays in Python

Tips for storing information from Json using Alamofire and SwiftyJSON?

What strategies can be employed to tackle the challenges posed by Ajax asynchronous calls?

Retrieve the date one week prior to today's date in Node.js and format it in Mysql style

The abort() function in Chrome can trigger an Undefined Error

display JSON data beautifully on a webpage using Express

Error: The function this.$.AjaxPost.go is missing or not recognized in the core-ajax module

Issues with object changes not reflecting in Vue.js 2.0 component rendering

What is the best way to transmit a Blob object to the server without it arriving empty?

Is it possible to associate an unidentified JSON with a JsonObject in AspNetCore?

Display a modal before leaving the page?

Tips for choosing the desired test to execute with Nightwatch Programmatic API