Javascript - Update Object Keys Based Another Object's Value Mapping

Question

I am working with two objects, data and map , in which I need to update the keys of the data object with the text value of the map object based on the key of data matching the value of the datafield key within the map object.

data = [{
  1230c9299007b07bf73bb396: "Current",
  5900c9299007b07bf73bb3a0: "Will",
  5900c9299007b07bf73bb39f: "Johnson"
}, {
  1230c9299007b07bf73bb396: "Current",
  5900c9299007b07bf73bb3a0: "Donna",
  5900c9299007b07bf73bb39f: "Sampson"
}, {
  1230c9299007b07bf73bb396: "Past",
  5900c9299007b07bf73bb3a0: "Frank",
  5900c9299007b07bf73bb39f: "Lloyd"
}];

map = [{
  dataField: "1230c9299007b07bf73bb396",
  text: "Customer Type"
}, {
  dataField: "5900c9299007b07bf73bb3a0",
  text: "First Name"
}, {
  dataField: "5900c9299007b07bf73bb39f",
  text: "Last Name"
}];

Expected result:

result = [{
  "Customer Type": "Current",
  "First Name": "Will",
  "Last Name": "Johnson"
}, {
  "Customer Type": "Current",
  "First Name": "Donna",
  "Last Name": "Sampson"
}, {
  "Customer Type": "Past",
  "First Name": "Frank",
  "Last Name": "Lloyd"
}];

I have attempted with the following code only to find the two objects merge and do not update any of the object keys as expected:

let items = Object.keys(data).map((key) => {
  const newKey = map[key] || key;
  return { [newKey] : data[key] };
});

Answer 1

Voilà.

 var data = [{ "1230c9299007b07bf73bb396": "Current", "5900c9299007b07bf73bb3a0": "Will", "5900c9299007b07bf73bb39f": "Johnson" }, { "1230c9299007b07bf73bb396": "Current", "5900c9299007b07bf73bb3a0": "Donna", "5900c9299007b07bf73bb39f": "Sampson" }, { "1230c9299007b07bf73bb396": "Past", "5900c9299007b07bf73bb3a0": "Frank", "5900c9299007b07bf73bb39f": "Lloyd" }]; var map = [{ dataField: "1230c9299007b07bf73bb396", text: "Customer Type" }, { dataField: "5900c9299007b07bf73bb3a0", text: "First Name" }, { dataField: "5900c9299007b07bf73bb39f", text: "Last Name" }]; let items = data.map(object => { let newObj = {}; map.forEach(prop => newObj[prop.text] = object[prop.dataField]); return newObj; }); console.log(items); 

Hope it answers

Answer 2

Here you go:

 const pre = document.getElementById('pre'); const data = [{ '1230c9299007b07bf73bb396': "Current", '5900c9299007b07bf73bb3a0': "Will", '5900c9299007b07bf73bb39f': "Johnson" }, { '1230c9299007b07bf73bb396': "Current", '5900c9299007b07bf73bb3a0': "Donna", '5900c9299007b07bf73bb39f': "Sampson" }, { '1230c9299007b07bf73bb396': "Past", '5900c9299007b07bf73bb3a0': "Frank", '5900c9299007b07bf73bb39f': "Lloyd" } ]; const map = [{ dataField: "1230c9299007b07bf73bb396", text: "Customer Type" }, { dataField: "5900c9299007b07bf73bb3a0", text: "First Name" }, { dataField: "5900c9299007b07bf73bb39f", text: "Last Name" }]; const fieldToText = map.reduce((result, el) => { result[el.dataField] = el.text; return result }, []); const result = data.map((el) => { return Object.entries(el).reduce((result, [key, value]) => { result[fieldToText[key]] = value; return result; }, {}); }); pre.innerHTML = JSON.stringify(result, null, 2); 

 <pre id="pre"></pre> 

https://jsfiddle.net/oniondomes/gqgkroux/

Answer 3

At first build up a number - key map:

  const keys = new Map(map.map({dataField, text}) => ([dataField, text])));

Now you can map every data entry to a new object by iterating over all the key value pairs abd building new objects:

  const result = data.map(obj => {
    const tmp = {};
    for(const [key, value] of Object.entries(obj)){
      tmp[keys.get(key) || "_"] = value;
    }
    return tmp;
 });