Loop through an array of objects and create a new object

Question

I have an array of objects, each object has a title, content and contentHTML. I want to map over this array and create a new object. The new object will take the value of the title property and use this as the parent property for each of the content and contentHTML properties. The code below only seems to be getting the last object in the array.

The results is:

{
  "sidebar": {
      "text": "Some sidbar text here",
      "content": "<p>Some sidebar text here</p>"
    }
}

The expected result is:

{
    header: {
        text: "Some header text here",
        content: "<p>Some header text here</p>"
    },
    footer: {
        text: "Some footer text here",
        content: "<p>Some footer text here</p>"
    },
    sidebar: {
        text: "Some sidbar text here",
        content: "<p>Some sidebar text here</p>"
    }
}

var originalObj = [{
    title: "header",
    content: "Some header text here",
    contentHTML: "<p>Some header text here</p>"
  },
  {
    title: "footer",
    content: "Some footer text here",
    contentHTML: "<p>Some footer text here</p>"
  },
  {
    title: "sidebar",
    content: "Some sidbar text here",
    contentHTML: "<p>Some sidebar text here</p>"
  }
];
let newObject = {};
for (let item of originalObj) {
  var tempObj = {
    [item.title]: {
      text: item.content,
      content: item.contentHTML
    }
  };
  newObject = tempObj;
}
console.log(newObject);

Anurag Awasthi · Accepted Answer · 2021-10-28 11:25:25Z

3

You are overwriting your object with new value every time you're doing

var tempObj = {//object keys}

Use spread operator to copy the previous values. Spread operator loops through objects iterable values and expands them.

var originalObj = [
    {
        title: "header",
        content: "Some header text here",
        contentHTML: "<p>Some header text here</p>"
    },
    {
        title: "footer",
        content: "Some footer text here",
        contentHTML: "<p>Some footer text here</p>"
    },
    {
        title: "sidebar",
        content: "Some sidbar text here",
        contentHTML: "<p>Some sidebar text here</p>"
    }
];

let newObject = {};
for (let item of originalObj) {
    newObject = {
        ...newObject,
        [item.title]: {
            text: item.content,
            content: item.contentHTML
        }
    };
}
console.log(newObject);

edited Oct 28, 2021 at 11:25

answered Jul 26, 2018 at 13:17

Anurag Awasthi

6,2532 gold badges21 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user3486427 Over a year ago

Thanks you, what does ...tempObj do?

Niet the Dark Absol Over a year ago

Unpacks the existing tempObj into the new tempObj - basically allows you to extend the object. Although personally I would've done something like newObject[item.title] = {text:item.content, content:item.contentHTML};

James Over a year ago

The tempObj is redundant. You can get the same result by replacing tempObj with newObject (next to var and the splat) and then you also don't need newObject = tempObj;

Andrew Bone · Accepted Answer · 2018-07-26 13:22:09Z

1

You were overriding newObject with the contents of tempObj it's much easier if you just write directly into newObject like this.

var originalObj = [{
    title: "header",
    content: "Some header text here",
    contentHTML: "<p>Some header text here</p>"
  },
  {
    title: "footer",
    content: "Some footer text here",
    contentHTML: "<p>Some footer text here</p>"
  },
  {
    title: "sidebar",
    content: "Some sidbar text here",
    contentHTML: "<p>Some sidebar text here</p>"
  }
];
let newObject = {};
for (let item of originalObj) {
  newObject[item.title] = {
    text: item.content,
    content: item.contentHTML
  }
}
console.log(newObject);

I hope this makes sense

answered Jul 26, 2018 at 13:22

Andrew Bone

7,3112 gold badges21 silver badges35 bronze badges

Comments

Niladri Basu · Accepted Answer · 2018-07-26 13:23:29Z

1

You can also use Array#reduce to do something like this perhaps:

var originalObj = [
	{
		title: "header",
		content: "Some header text here",
		contentHTML: "<p>Some header text here</p>"
	},
	{
		title: "footer",
		content: "Some footer text here",
		contentHTML: "<p>Some footer text here</p>"
	},
	{
		title: "sidebar",
		content: "Some sidbar text here",
		contentHTML: "<p>Some sidebar text here</p>"
	}
];

var output = originalObj.reduce((accumulator, ele) => {
  accumulator[ele['title']] = {'text': ele['content'], 'content': ele['contentHTML']}
  return accumulator;
}, {})

console.log(output);

answered Jul 26, 2018 at 13:23

Niladri Basu

10.7k7 gold badges59 silver badges65 bronze badges

Comments

Ele · Accepted Answer · 2018-07-26 13:26:13Z

1

This alternative uses the function reduce to build the desired output.

var originalObj = [	{		title: "header",		content: "Some header text here",		contentHTML: "<p>Some header text here</p>"	},	{		title: "footer",		content: "Some footer text here",		contentHTML: "<p>Some footer text here</p>"	},	{		title: "sidebar",		content: "Some sidbar text here",		contentHTML: "<p>Some sidebar text here</p>"	}],
    newObject = originalObj.reduce((a, {title, content: text, contentHTML: content} = obj) => {
      return Object.assign(a, {[title]: {text, content}});
    }, Object.create(null));

console.log(newObject);

.as-console-wrapper { max-height: 100% !important; top: 0; }

edited Jul 26, 2018 at 13:26

answered Jul 26, 2018 at 13:20

Ele

33.8k7 gold badges43 silver badges80 bronze badges

Comments

ddy250 · Accepted Answer · 2018-07-26 15:11:06Z

0

It has been answered but if it still helps:

var newObject = {};
for (let item of originalObj) {
      newObject[item.title] = {
      text: item.content,
      content: item.contentHTML
    }
  };

answered Jul 26, 2018 at 15:11

ddy250

3112 gold badges6 silver badges18 bronze badges

Comments

Aravind Kethireddy · Accepted Answer · 2022-03-08 07:23:45Z

I tried with a different example and wanted to answer more dynamically firstly, getting how many unique values we can have for a property i.e,res array in this example then, filtering the objects and pushing into an array that the object's property matches with each unique value of the res array in the example the resultant object is resObj

let anArray = [{id: 1, name:"orange"},
{id: 2, name:"orange"},
{id: 3, name:"apple"},
{id: 4, name:"apple"},
{id: 5, name:"rusk"},
{id: 6, name:"grape"}]
let res =  [...new Set(anArray.map(item => item.name))];
let resObj = {};

let newObj = (item, arr) => {
    let resArr = [];
  
    anArray.map((obj) => {
     if(item == obj.name){
     resArr.push(obj)
     }
 })
 return resArr
}
resObject = Object.fromEntries(res.map((item) => [item, newObj(item, anArray) ]) )

 
console.log(resObject)

Collectives™ on Stack Overflow

Loop through an array of objects and create a new object

6 Answers 6

3 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related