Javascript-使用映射函數而不是嵌套的for循環反規范化JSON數組

Question

我正在努力使自己了解地圖功能。 這是我的工作代碼，並使用嵌套的for循環輸出：

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' } 
]

我不知道如何使用數組上的map函數來處理嵌套。

Answer 1

使用ES6可以簡化使用Array#find()和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

這是一個利用map和對象擴展來產生一個新數組的解決方案，該數組將所需的鍵添加到目標數組的元素中：

 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')) 

請注意，此解決方案不會jsonsToAddTo原始數組，因此調用該函數后， jsonsToAddTo變量將相同。 如果您想更換原件，可以隨時重新分配它：

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

嘗試使用maps進行兩次迭代，

 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

而不是在這里築巢循環，這將遍歷整個additionalData陣列中每個項目jsonsToAddTo ，我建議建立的一個對象映射additionalData開頭數據集一次 ，然后對目標數據集.MAP中引用這樣的：

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'))

這樣做的效率應該更高得多，尤其是當您正在處理的數據集相當大時。