基于键值数组将 javascript object 转换为对象数组

Question

I have the following object structure in javascript

{
city: ["Gepps Cross", "Mooroolbark"],
collection_id: ["132", "3846"],
company: ["Wallis Drive-In", "Liz Skilbeck 0404 139 489"],
country: ["Australia", "Australia"],
dates: ["29/07/2020|10/08/2020|20/07/2020", "30/08/2020"],
name: ["METRO NORTH - Wallis Drive In", "MOOROOLBARK"],
state: ["South Australia", ""],
street_address: ["Wallis Drive-In - 588 Main North Road (enter at main gates)", "40 Orrong Road"],
zip: ["5094", "3138"]
}

I would like the data to be presented as an array of objects where the shape of object is exactly the same as the original but each value in the original key values is separated into a new object.

[
{
city: "Gepps Cross",
collection_id: "132",
company: "Wallis Drive-In",
country: "Australia",
dates: "29/07/2020|10/08/2020|20/07/2020",
name: "METRO NORTH - Wallis Drive In",
state: "South Australia",
street_address: "Wallis Drive-In - 588 Main North Road (enter at main gates)",
zip: "5094"
},
{
city: "Mooroolbark",
collection_id: "3846",
company: "Liz Skilbeck 0404 139 489",
country: "Australia",
dates: "30/08/2020",
name: "MOOROOLBARK",
state: "",
street_address: "40 Orrong Road"],
zip: "3138"
}
]

Answer 1

The esiest way is to map one of the array in object

 const obj = { city: ["Gepps Cross", "Mooroolbark"], collection_id: ["132", "3846"], company: ["Wallis Drive-In", "Liz Skilbeck 0404 139 489"], country: ["Australia", "Australia"], dates: ["29/07/2020|10/08/2020|20/07/2020", "30/08/2020"], name: ["METRO NORTH - Wallis Drive In", "MOOROOLBARK"], state: ["South Australia", ""], street_address: ["Wallis Drive-In - 588 Main North Road (enter at main gates)", "40 Orrong Road"], zip: ["5094", "3138"] } const result = obj.city.map((rec, index) => { return { city: obj.city[index], collection_id: obj.collection_id[index], company: obj.company[index], country: obj.country[index], dates: obj.dates[index], name: obj.name[index], state: obj.state[index], street_address: obj.street_address[index], zip: obj.zip[index] } }) console.log(result)

But if you have dinamacly array with different fields this way will be better

 const obj = { city: ["Gepps Cross", "Mooroolbark"], collection_id: ["132", "3846"], company: ["Wallis Drive-In", "Liz Skilbeck 0404 139 489"], country: ["Australia", "Australia"], dates: ["29/07/2020|10/08/2020|20/07/2020", "30/08/2020"], name: ["METRO NORTH - Wallis Drive In", "MOOROOLBARK"], state: ["South Australia", ""], street_address: ["Wallis Drive-In - 588 Main North Road (enter at main gates)", "40 Orrong Road"], zip: ["5094", "3138"] } const result = obj.city.map((rec, index) => { const keys = Object.keys(obj) return keys.reduce((acc, element) => { return {...acc, [element]: obj[element][index] } }, {}) }) console.log(result)

Answer 2

This is one way to do it.

You loop trough one random object's property (in this case city ). This will give you as many loops as the resulting array's intended length.

For each loop you parse all object's properties and save the value in a temporary object item .

Finally you push the item into the result array.

 const obj = { city: ["Gepps Cross", "Mooroolbark"], collection_id: ["132", "3846"], company: ["Wallis Drive-In", "Liz Skilbeck 0404 139 489"], country: ["Australia", "Australia"], dates: ["29/07/2020|10/08/2020|20/07/2020", "30/08/2020"], name: ["METRO NORTH - Wallis Drive In", "MOOROOLBARK"], state: ["South Australia", ""], street_address: ["Wallis Drive-In - 588 Main North Road (enter at main gates)", "40 Orrong Road"], zip: ["5094", "3138"] } let result = []; obj.city.forEach( (el, i) => { let item = {}; for (const property in obj) { item[property] = obj[property][i]; } result.push(item); }); console.log(result);

Answer 3

Assuming values length is same.

let obj = {
city: ["Gepps Cross", "Mooroolbark"],
collection_id: ["132", "3846"],
company: ["Wallis Drive-In", "Liz Skilbeck 0404 139 489"],
country: ["Australia", "Australia"],
dates: ["29/07/2020|10/08/2020|20/07/2020", "30/08/2020"],
name: ["METRO NORTH - Wallis Drive In", "MOOROOLBARK"],
state: ["South Australia", ""],
street_address: ["Wallis Drive-In - 588 Main North Road (enter at main gates)", "40 Orrong Road"],
zip: ["5094", "3138"]
};

var keys = Object.keys(obj);
var values = Object.values(obj);
var valueslength = values[0].length;
var results = [];
for(var i=0; i<valueslength; i++){  
  var to = {};
  for(k of keys){
    to[k] = obj[k][i];    
  }  
  results.push(to);
  
}