比较2个数组并替换匹配的键中的值？

Question

Heres my attempt.

Problems: Currently my return ds1.locale = dataSrc2[i][property] line is a point of failure. I know map returns a new array; however, I want the properties and values of the original dataSrc1 with exception to the value of ds1.locale .

Question: How can I return an array while carry over the original other key value pairs from dataSrc1 with exception to dataSrc1.locale which value is replaced with the matching dataSrc2 key's value.

UPDATE I solved it. But the code is really ugly. Is there a better approch to this? perhaps not using 3 damn loops?

Here's pseudo code of the steps.

//1. loop over dataSrc1.
//2. loop over dataSrc2.
//3. try find a match from dataSrc2[key] e.g. dataSrc2['af'] === dataSrc1.locale;
//4. if matched save dataSrc2's key
//5. replace dataSrc1.language = dataSrc2[savedDataSrc2Key]

var dataSrc1 = [{'locale': 'af', 'language': 'Afrikaans'}, {'locale': 'ar', 'language': 'Arabic'}];
var dataSrc2 = [{'ar': '丹麥文'},{'af': '土耳其文'}];
//Intended output
//dataSrc3 = [{'locale': 'af', 'language': '土耳其文'}, {'locale': 'ar', 'language': '丹麥文'}]

Repl Code

var dataSrc3 = dataSrc1.map(function(ds1){
    for(var i = 0; i < dataSrc2.length; i += 1){

        for (var property in dataSrc2[i]) {
            if (dataSrc2[i].hasOwnProperty(property)) {
                if(property === ds1.locale){
                    ds1.language = dataSrc2[i][property];
                    return ds1; 
                }
            }
        }
    }
})
console.log(dataSrc3);

//Current output
//[ '土耳其文', '丹麥文' ]

//Intended output
//dataSrc3 = [{'locale': 'af', 'language': '土耳其文'}, {'locale': 'ar', 'language': '丹麥文'}]

Answer 1

You can refactor a little bit:

var dataSrc3 = dataSrc1.map(function(d1) {
  var language = null;
  // .some will iterate until you return true or last item is passed
  // set variable language to found language
  dataSrc2.some(function(d) {
    if (Object.prototype.hasOwnProperty.call(d, d1.locale)) {
      language = d[d1.locale];
      return true;
    }
  });
  // return a new object, this will not modify the objects in dataSrc1 and dataSrc2
  return { language: language, locale: d1.locale };
});
console.log(dataSrc3); // [{'locale': 'af', 'language': '土耳其文'}, {'locale': 'ar', 'language': '丹麥文'}]

---

There is an experimental array method called .find that works sort of like .some but will give you the current value in the array:

var dataSrc3 = dataSrc1.map(function(d1) {
  var d2 = dataSrc2.find(function(d2) {
    return Object.prototype.hasOwnProperty.call(d2, d1.locale);
  });
  // return a new object, this will not modify the objects in dataSrc1 and dataSrc2
  return { 
    language: d2[d1.locale], 
    locale: d1.locale 
  };
});
console.log(dataSrc3); // [{'locale': 'af', 'language': '土耳其文'}, {'locale': 'ar', 'language': '丹麥文'}]

You might wanna take a look at underscore.js or lodash . These libraries will provide usefull util functions that can be used for older browser as well:

var dataSrc3 = _.map(dataSrc1, function(d1) {
  var d2 = _.find(dataSrc2, function(d2) {
    return _.has(d2, d1.locale);
  });
  return { 
    language: d2[d1.locale], 
    locale: d1.locale 
  };
});

Answer 2

There are two mistakes in our code:

return ds1.locale = dataSrc2[i][property];

This assigns to and returns ds1.locale , while you want to assign to ds1.language , and return the modified ds1 :

ds1.language = dataSrc2[i][property];
return ds1;

Secondly, you should also return any unmodified ds1 , so add after the for loop:

return ds1;

As others have indicated, you can write the function more concisely.