How does the front end handle the problem of redundant fields in the backend return data?

Question

let localData = {
  name: '',
  sex: ''
}

let resData = {
  name: 'zzs',
  sex: 'boy',
  age: 18,
  birthday: '10-21',
  address: 'demo'
}

localData = resData

// { name: 'zzs',
//   sex: 'boy',
//   age: 18,
//   birthday: '10-21',
//   address: 'demo' }
console.log(localData)

The result I hope to get is { Name: "zzs", Gender: "Boy" }

I don't want to do it in the following way.

localData.name = resData.name;
localData.sex = resData.sex;

Is there a good performance method that can be achieved? thanks

Does this answer your question? [How to get a subset of a javascript object's properties](https://stackoverflow.com/questions/17781472/how-to-get-a-subset-of-a-javascript-objects-properties) — Federico klez Culloca, Oct 30 '19 at 11:37
https://stackoverflow.com/questions/38750705/filter-object-properties-by-key-in-es6 — Mikhaili, Oct 30 '19 at 11:44

Brett Gregson · Answer 1 · 2019-10-30T11:45:45.943

You can merge your two objects using:

Object.keys(resData).filter(key => key in localData).forEach(key => localData[key] = resData[key]);

So using your example data, see the working fiddle (open the console), or working snippet below:

let localData = {
  name: '',
  sex: ''
}

let resData = {
  name: 'zzs',
  sex: 'boy',
  age: 18,
  birthday: '10-21',
  address: 'demo'
}

Object.keys(resData).filter(key => key in localData).forEach(key => localData[key] = resData[key]);
console.log(localData)

How it works:

Object.keys returns an array of a given object's own enumerable property names. So in this case we find all the keys of resData

We then use filter on our localData data keys, loop them using forEach and set their values from the corresponding resData key

This will work dynamically (you don't have to specify the keys you want to merge). If the same key exists in both localData and resData it will be merged into localData

Pritam Jana · Answer 2 · 2019-10-30T11:48:03.973

0

You can go through this code using external libraries lodash -

let localData = {
  name: '',
  sex: ''
}

let resData = {
  name: 'zzs',
  sex: 'boy',
  age: 18,
  birthday: '10-21',
  address: 'demo'
}

localData = _.pick(resData,_.keys(localData));

console.log(localData)

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script>

edited Oct 30 '19 at 11:48

answered Oct 30 '19 at 11:41

Pritam Jana

298
3
6

You may want to *prominently* point out that this requires an external library. – Federico klez Culloca Oct 30 '19 at 11:42

score 0 · Answer 3 · answered Oct 30 '19 at 11:41

0

You can do something like this :

let {name,sex} = resData; //Destructure only values required
localData = {name,sex} // assign to localdata

console.log(localData) //{name: "zzs", sex: "boy"}

answered Oct 30 '19 at 11:41

Shubham Verma

4,918
1
9
22

score 0 · Answer 4 · answered Oct 30 '19 at 12:00

You could use Object.fromEntries() by mapping your localData's keys to take the values residing in resData. This will create a new object:

const localData = {
  name: '',
  sex: ''
}

const resData = {
  name: 'zzs',
  sex: 'boy',
  age: 18,
  birthday: '10-21',
  address: 'demo'
}

const res = Object.fromEntries(Object.keys(localData).map(k => [k, resData[k]]));
console.log(res);

How does the front end handle the problem of redundant fields in the backend return data?

4 Answers4