How to change a property name of each object stored in an array in JavaScript?

Question

I have an array of objects in the following form

var data = [{"name":"Lenovo Thinkpad 41A4298","website":"google"},
{"name":"Lenovo Thinkpad 41A2222","website":"google"},
{"name":"Lenovo Thinkpad 41Awww33","website":"yahoo"}];

I want to convert this to

var data = [{"Brand":"Lenovo Thinkpad 41A4298","Link":"google"},
{"Brand":"Lenovo Thinkpad 41A2222","Link":"google"},
{"Brand":"Lenovo Thinkpad 41Awww33","Link":"yahoo"}];

How do I achieve this?

Answer 1

Using foreach loop

var data = [{
    "name": "Lenovo Thinkpad 41A4298",
    "website": "google"
  },
  {
    "name": "Lenovo Thinkpad 41A2222",
    "website": "google"
  },
  {
    "name": "Lenovo Thinkpad 41Awww33",
    "website": "yahoo"
  }
];

var Result = [];

var Key = Object.keys(data[0]); // get keys in a variable

// use index insted of specific key

data.forEach(function(item) {
  Result.push({    Brand: item[Key[0]],    Link: item[Key[1]]  });
});

console.log(Result);

Answer 2

You can use map to loop thru the array. Without using the key, you can use Object.values to convert the object into an array. Assign the first element of the array on Brand and the second to Link to form a new object.

var data = [{
    "name": "Lenovo Thinkpad 41A4298",
    "website": "google"
  },
  {
    "name": "Lenovo Thinkpad 41A2222",
    "website": "google"
  },
  {
    "name": "Lenovo Thinkpad 41Awww33",
    "website": "yahoo"
  }
];

var result = data.map(o => {
  let v = Object.values(o);
  return {"Brand": v[0],"Link": v[1]};
});

console.log(result);

Answer 3

Array.map may be your friend - returns a new array with each element being the returned result of the function you pass to the .map function.

Mozilla Developer Network link to Array.map reference here

In this example

• the function takes the first object in the array
• Creates a new object to return
• assigns a key of "Brand" to the new object and assigns the "name" value from the old object to it
• assigns a key of "Link" to the new object and assigns it the "website" value from the old object to it
• returns the new object that gets put into a new array that will eventually get assigned to newData
• Repeats this for each element in the array

let data = [
      {"name":"Lenovo Thinkpad 41A4298","website":"google"},
      {"name":"Lenovo Thinkpad 41A2222","website":"google"},
      {"name":"Lenovo Thinkpad 41Awww33","website":"yahoo"}
    ];
        
let newData = data.map((originalObject)=>{
  return {
    "Brand":originalObject.name,
    "Link":originalObject.website
    }
})

console.log(newData)

If you want to get even fancier - you can use object destructing here - about half way down to make the code a little neater

let data = [
          {"name":"Lenovo Thinkpad 41A4298","website":"google"},
          {"name":"Lenovo Thinkpad 41A2222","website":"google"},
          {"name":"Lenovo Thinkpad 41Awww33","website":"yahoo"}
        ];
            
let newData = data.map(( {name,website} )=>{
  return {
    "Brand":name,
    "Link":website
    }
})

console.log(newData)

Answer 4

Like this:

var data = [{ "name": "Lenovo Thinkpad 41A4298", "website": "google" },
{ "name": "Lenovo Thinkpad 41A2222", "website": "google" },
{ "name": "Lenovo Thinkpad 41Awww33", "website": "yahoo" }];

const newData = data.map(obj => ({ Brand: obj.name, Link: obj.website }));
console.log(newData);

---

To make it more dynamically, you can create some mappings:

    var data = [{ "name": "Lenovo Thinkpad 41A4298", "website": "google" },
    { "name": "Lenovo Thinkpad 41A2222", "website": "google" },
    { "name": "Lenovo Thinkpad 41Awww33", "website": "yahoo" },
    { "rate": "25", "review": "Well done" }];

    const mappings = {
      name: 'Brand',
      website: 'Link',
      review: 'Review',
      rate: 'Rate'
    }
    
    const newData = data.map(obj => {
      const newObj = {};
      const keys = Object.keys(mappings);
      keys.forEach(key => {
         if (obj[key]) {
           const newName = mappings[key];
           newObj[newName] = obj[key];
         }
      });
      return newObj;
    });

    console.log(newData);

Then you can just change "mappings" based on source data or whatever you want to do with it.