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

I didn't downvote, but note that object keys cannot begin with a number. (1230c9299007b07bf73bb396, etc. need to be in quotes.) — Rick Hitchcock
– Rick Hitchcock, Commented Feb 16, 2018 at 19:48
Object.keys(data) are the indices of the array. Notice your map is used on the array. I think you meant to loop through the data array and then for each object compare the key — Tim Han
– Tim Han, Commented Feb 16, 2018 at 19:50

theAlexandrian · Accepted Answer · 2018-02-16 20:12:13Z

3

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

answered Feb 16, 2018 at 20:12

theAlexandrian

9086 silver badges18 bronze badges

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

5 Comments

Rick Hitchcock Over a year ago

I posted pretty much the same answer a couple minutes after you did. Now deleted, and +1.

oniondomes Over a year ago

This one really seems to be the best solution so far.

Rick Hitchcock Over a year ago

Thanks, I appreciate the votes, but the system moderators will probably remove them since they came so quickly. Best to vote up answers only if they help you.

theAlexandrian Over a year ago

@RickHitchcock hope they don't notice

Rick Hitchcock Over a year ago

You may not want to risk their wrath. I have no problem if you remove the upvotes : )

oniondomes · Accepted Answer · 2018-02-16 19:57:33Z

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/

answered Feb 16, 2018 at 19:57

oniondomes

2,07315 silver badges22 bronze badges

1 Comment

kabanus Over a year ago

Op should note how @oniondomes converts the map to something that's a real map (fieldToText). If you have control of this, you should have your map in this structure to begin with.

Jonas Wilms · Accepted Answer · 2018-02-16 20:02:37Z

0

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

answered Feb 16, 2018 at 20:02

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related