insert every 3 element from object to a new array of objects-CodePudding

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!

CodePudding user response：

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 :)

CodePudding user response：

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);

CodePudding user response：

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));