迭代對象數組並將模板應用於其中的每個對象

Question

我不想使用 JQuery，只是想把它放在前面。

我有一個數據模板。 此模板將用於呈現數據字段（或不視情況而定）。 我已經整理了對象的匹配部分。 我遇到的問題是在迭代對象數組並將所述對象與模板匹配時。 我得到的結果都與傳入數組中的最后一個對象具有相同的值。

//template
//actual template/incoming data is much more than this, but im keeping it a simple example

const template = {"firstname":null, "lastname":null, "dob":null}

//incoming (from a fileupload, but i will put it here an example)
const incoming = [{"firstname":"John", "dob":"1996-04-03"},
                  {"firstname":"Jill", "lastname":"Smith", "dob":"1986-09-17"}]

function readFile() { // function read the files from upload
    const fileIn = document.querySelector('#file-input'); //finds the input area in the form
    var reader = new FileReader();
    reader.onload = onReaderLoad;
    reader.readAsText(filein.files[0]); //gets the uploaded json file
};

function onReaderLoad(event) {
    const obj = JSON.parse(event.target.result); //parse the uploaded file
    const matched = []; //empty array to push matched objects to

    obj.forEach(el => {
        //i left this function out of this example because it works as expected, returns 1 object
        matched.push(cleanData(el)); //call the function that matches the template and incoming
    });
    console.log(matched)
};

document.getElementById('file-input).addEventListener('change', onChange);

當我這樣做時，結果會輸出一個 2 項數組，所有結果都與“吉爾”對象的數據匹配。

[{"firstname":"Jill", "lastname":"Smith", "dob":"1986-09-17"},
{"firstname":"Jill", "lastname":"Smith", "dob":"1986-09-17"}]

我期待的是：

[{"firstname":"John", "lastname":null, "dob":"1996-04-03"},
{"firstname":"Jill", "lastname":"Smith", "dob":"1986-09-17"}]

我的期望是，在forEach調用中，它應該將具有匹配字段的新對象推送到空的matched數組，但是，它似乎並沒有那樣工作。 我誤解了什么嗎？ 我來自 python 背景，所以 javascript 不是我的第一語言，我傾向於用 python 大腦思考。

這是cleanData()函數：

function cleanData(d1, d2=template) {
    let _copy = Object.assign({}, d2) //makes a copy
    const commonKeys = getKeys(d1, _copy) //returns a list of keys found in both


    commonKeys.forEach(element => {

        //is it an object, but not array?
        if((d1[element] instanceof Object) && (Array.isArray(d1[element]))){
             const subKeys = getKeys(d1[element], _copy[element]);

             subKeys.forEach(el => {
                 _copy[element][el] = d1[element][el];});

        }else if(Array.isArray(d1[element])){ //is it an array?
             var objList = [];

             for(var i=0; i<d1[element].length; ++i){
                 if((d1[element] instanceof Object) && (Array.isArray(d1[element]))){
                     const temp=d1[element][i];
                     //array in _copy will always be length 0
                     const temp_fix = cleanData(temp, _copy[element][0])

                     objList.push(temp_fix);
                     _copy[element] =  objList;
                 }else { _copy[element] = d1[element]}
             }
        } else { //if not array or obj
              _copy[element] = d1[element]
        }
     });
    return _copy;
}

Answer 1

所以感謝@VLAZ 鏈接這些 SO 頁面。 正如他（她）有先見之明地指出的那樣，這是cleanData函數中的一個問題。 我用let _copy = JSON.parse(JSON.stringify(d2))替換了let _copy = Object.assign({}, d2)行，這給了我預期的輸出。 我使用了這個而不是一個非常花哨的深度復制方法，因為在模板中它只會有 dtypes Object 、 Array 、 String或Integer 。