sorry if the title is messy, I didn't know how to phrase it right, but it will be easier to show.
I'm using React JS, and I'm getting this object from my database:
{
id1: "1",
name1: "Jon",
image1: {url: "...."},
id2: "2",
name2: "Ron",
image2: {url: "...." , height: "10"},
id3: "2",
name3: "Jess",
image3: {url: "...." , height: "10"},
...
}
and so on, all the fields are on their own in the object, but I need that it would be an array (or object, I can map it through Object.keys..) and every 3 fields (name, id, image) will be in the same object, so I can map it to use with my component,
this is the example output that I am struggling to make:
[
{ name1:"Jon", id1:"1", image1: { url:"....", height:"10" } },
{ name2:"Ron", id2:"2", image2: { url:"....", height:"10" } },
{ name3:"Jess", id3:"3", image3: { url:"....", height:"10" } },
]
Thanks in advance for any help!
I let you a piece of code who made that transformation
import React from 'react';
function Question24() {
const initialObject = {
id1: "1",
name1: "Jon",
image1: {url: "...."},
id2: "2",
name2: "Ron",
image2: {url: "...." , height: "10"},
id3: "2",
name3: "Jess",
image3: {url: "...." , height: "10"},
};
const result = [];
let index = 1;
while(Object.keys(initialObject).length) {
const idKey = `id${index}`;
const nameKey = `name${index}`;
const imageKey = `image${index}`;
const resObject = {};
// I whould do -> resObject.id = initialObject[idKey];
resObject[idKey] = initialObject[idKey];
delete initialObject[idKey];
// I whould do -> resObject.name = initialObject[idKey];
resObject[nameKey] = initialObject[nameKey];
delete initialObject[nameKey];
// I whould do -> resObject.image = initialObject[idKey];
resObject[imageKey] = initialObject[imageKey];
delete initialObject[imageKey];
result.push(resObject);
index++;
}
console.log("result: ", result);
return (
<div>Check the console</div>
);
}
export default Question24;
I hope I've helped you :)
it is simple, just iterate through object keys and count every third step and put the last 3 entries into answers array. although I am not sure if that model is the best practice to get data from database.
obj = {
id1: "1",
name1: "Jon",
image1: {url: "...."},
id2: "2",
name2: "Ron",
image2: {url: "...." , height: "10"},
id3: "2",
name3: "Jess",
}
let answer = []
let temp = {}
let counter = 1;
for (let item in obj) {
temp[item] = obj[item]
if(counter == 3)
{
answer.push(temp);
temp = {}
counter = 1;
continue;
}
counter ++;
}
// in case number of keys is not dividable by 3 and temp is not empty
answer.push(temp);
You can try this code:
let object = {
id1: "1",
name1: "Jon",
image1: {url: "...."},
id2: "2",
name2: "Ron",
image2: {url: "...." , height: "10"},
id3: "2",
name3: "Jess",
image3: {url: "...." , height: "10"},
};
const convertToArr = (object) => {
let arr = [];
for(let i=1; i<=Object.keys(object).length / 3; i++){
let obj = {};
obj.id = object[`id${i}`];
obj.name = object[`name${i}`];
obj.image = object[`image${i}`];
arr.push(obj);
}
return arr;
}
console.log(convertToArr(object));