Javascript-使用映射函数而不是嵌套的for循环反规范化JSON数组

Question

I'm trying to get my head around map functions. Here is my working code and output using a nested for loop:

var jsonsToAddTo = [
    {'cat':'k1','key2':'a'},
    {'cat':'k1','key2':'b'},
    {'cat':'k2','key2':'a'},
    {'cat':'k2','key2':'b'},
    {'cat':'k3','key2':'a'}
]

var additionalData = [
    {'pk':'k1','key3':'data1'},
    {'pk':'k2','key3':'data2'},
    {'pk':'k3','key3':'data3'},
]

// Adds a key value pair from sourceJson to targetJson based on a matching value
function denormalizeJsonOnKey(targetJsonArray,targetKeyToMatch, sourceJsonArray, sourceKeyToMatch, keyToAdd){
    for(thisJson in targetJsonArray){
        for(thatJson in sourceJsonArray){
            if(targetJsonArray[thisJson][targetKeyToMatch]==sourceJsonArray[thatJson][sourceKeyToMatch]){
                console.log('match');
                targetJsonArray[thisJson][keyToAdd]=sourceJsonArray[thatJson][keyToAdd];
            }
        }
    }
    return targetJsonArray
}

console.log(denormalizeJsonOnKey(jsonsToAddTo,'cat',additionalData,'pk','key3'))

OUTPUT:

[ 
    { cat: 'k1', key2: 'a', key3: 'data1' },
    { cat: 'k1', key2: 'b', key3: 'data1' },
    { cat: 'k2', key2: 'a', key3: 'data2' },
    { cat: 'k2', key2: 'b', key3: 'data2' },
    { cat: 'k3', key2: 'a', key3: 'data3' } 
]

I can't figure out how to handle the nesting using a map function on an array.

Answer 1

Using ES6 can simplify using Array#find() and Object#assign()

 var data = [ {'cat':'k1','key2':'a'}, {'cat':'k1','key2':'b'}, {'cat':'k2','key2':'a'}, {'cat':'k2','key2':'b'}, {'cat':'k3','key2':'a'} ] var data2 = [ {'pk':'k1','key3':'data1'}, {'pk':'k2','key3':'data2'}, {'pk':'k3','key3':'data3'}, ] const mergeData= (arr1, arr2, matchKey, filterKey, includeKey)=>{ arr1.forEach(o => { const newObj ={}; const match = arr2.find(e => e[filterKey] === o[matchKey]) newObj[includeKey] = match ? match[includeKey] : null; Object.assign(o, newObj); }); } mergeData(data, data2,'cat', 'pk', 'key3') console.log(data) 

Answer 2

Here is a solution that takes advantage of map and object spread to produce a new array with the desired key added into the target array's elements:

 var jsonsToAddTo = [ {'cat':'k1','key2':'a'}, {'cat':'k1','key2':'b'}, {'cat':'k2','key2':'a'}, {'cat':'k2','key2':'b'}, {'cat':'k3','key2':'a'} ] var additionalData = [ {'pk':'k1','key3':'data1'}, {'pk':'k2','key3':'data2'}, {'pk':'k3','key3':'data3'}, ] function denormalizeJsonOnKey(targetJsonArray,targetKeyToMatch, sourceJsonArray, sourceKeyToMatch, keyToAdd){ return targetJsonArray.map(thisJson => { const addObj = sourceJsonArray.find(thatJson => thatJson[sourceKeyToMatch] === thisJson[targetKeyToMatch]); return { ...thisJson, ...addObj ? {[keyToAdd]: addObj[keyToAdd]} : {}, } }); } console.log(denormalizeJsonOnKey(jsonsToAddTo, 'cat', additionalData, 'pk', 'key3')) 

Note that this solution won't mutate the original array, so the jsonsToAddTo variable will be the same after you invoke the function. If you want to replace the original, you can always just re-assign it:

jsonsToAddTo = denormalizeJsonOnKey(jsonsToAddTo, 'cat', additionalData, 'pk', 'key3')

Answer 3

var targetJsonArray = jsonsToAddTo.map(function(json, index) {
    additionalData.forEach(function(data) {
        if (data.pk === json.cat) {
            json.key3 = data.key3;
        }
    })
    return json;
})

Answer 4

Try this, using maps for both iteration,

 var jsonsToAddTo = [{'cat':'k1','key2':'a'},{'cat':'k1','key2':'b'}, {'cat':'k2','key2':'a'},{'cat':'k2','key2':'b'}, {'cat':'k3','key2':'a'}] var additionalData = [{'pk':'k1','key3':'data1'},{'pk':'k2','key3':'data2'},{'pk':'k3','key3':'data3'}, ] function denormalizeJsonOnKey(targetJsonArray,targetKeyToMatch, sourceJsonArray, sourceKeyToMatch, keyToAdd){ jsonsToAddTo.map((obj,index)=> { additionalData.map((o,idx)=> { if(obj[targetKeyToMatch]==o[sourceKeyToMatch]){ obj[keyToAdd]=o[keyToAdd]; } }) }) return jsonsToAddTo } console.log(denormalizeJsonOnKey(jsonsToAddTo,'cat',additionalData,'pk','key3')) 

Answer 5

Rather than nesting loops here, which will iterate the entire additionalData array for every entry in jsonsToAddTo , I suggest building an object map of the additionalData dataset once at the beginning, and then reference this within a .map on the target dataset:

var jsonsToAddTo = [
    {'cat':'k1','key2':'a'},
    {'cat':'k1','key2':'b'},
    {'cat':'k2','key2':'a'},
    {'cat':'k2','key2':'b'},
    {'cat':'k3','key2':'a'}
]

var additionalData = [
    {'pk':'k1','key3':'data1'},
    {'pk':'k2','key3':'data2'},
    {'pk':'k3','key3':'data3'},
]

// Adds a key value pair from sourceJson to targetJson based on a matching value
function denormalizeJsonOnKey(targetJsonArray,targetKeyToMatch, sourceJsonArray, sourceKeyToMatch, keyToAdd){
    // Build an object of items keyed on sourceKeyToMatch
    const sourceJsonMap = sourceJsonArray.reduce((obj, item) => (obj[item[sourceKeyToMatch]]=item, obj), {});
    return targetJsonArray.map(item => {
        const targetValue = item[targetKeyToMatch];
        if (sourceJsonMap.hasOwnProperty(targetValue)) {
        item[keyToAdd] = sourceJsonMap[targetValue][keyToAdd];
      }
      return item;
    });
}

console.log(denormalizeJsonOnKey(jsonsToAddTo,'cat',additionalData,'pk','key3'))

Doing it this way should be far more efficient, especially if the dataset you are working on is fairly large.