Javascript 将数据从一个对象分配给另一个对象会添加重复项

Question

我试图找到问题的解决方案，但不幸的是找不到匹配的主题。我是 Javascript 新手，所以我想这是我的理解问题所在。无论如何，我尝试了几天后还是没有得到它。所以非常感谢 hep - 谢谢。

问题:我尝试映射从 API(源)获取的 JSON 对象中的一些数据，并将其映射到不同的数据结构(结果)。不知何故，即使我认为我明确地分配到数据对象中的确切位置，我的分配也会生成重复项。

抱歉，代码示例有点长，但可以肯定的是，问题位于示例的最后。在调试器中，我可以看到在循环的每次迭代中，所有值都分配给所有结果系列。数据始终如此 - 但不明白为什么。

我的代码是:

function Sample(){

    // Source data from the API simplified
    var SourceData = {
        "hits": 4,
        "job": [
            {
                "status": "FINISHED",
                "type": "IMPORT",
            },
            {
                "status": "FAILED",
                "type": "EXPORT",
            },
            {
                "status": "RUNNING",
                "type": "TRANSCODE",
            },
            {
                "status": "FINISHED",
                "type": "TRANSCODE",
            }
        ]
    };

    // Helper variable
    var status = [];


    //Initialize Result data object
    var ResultData = {
    labels: [],
    series: []
    };

    // Used to to extend the Result Data Object later
    var placeholderSeries = {name:'', data: []}

    // Get job types and Status from SourceData and write as labels and series.name to result object without duplicates 
    for (var i=0; i < SourceData.job.length; i++){

        var typeExists = ResultData.labels.indexOf(SourceData.job[i].type);
        var statusExists = status.indexOf(SourceData.job[i].status);

        if (typeExists == -1){
        ResultData.labels.push(SourceData.job[i].type);
        ResultData.labels.sort();
        }

        if (statusExists == -1){

        // Fill array with Status values without duplicates
        status.push(SourceData.job[i].status);
        // Fill result data with empty sub structure
        ResultData.series.push(placeholderSeries);
        }
    }

  // Write a series name for each job status corresponding with the status values of the source
 for(var i=0; i < ResultData.series.length; i++)
  {
      // THIS LINE DOESN'T WORK AS I WOULD EXPECT
      ResultData.series[i].name = status[i]; 
   }
   console.log(JSON.stringify(ResultData,null,4));
}  

我得到的结果是:

{
    "labels": [
        "EXPORT",
        "IMPORT",
        "TRANSCODE"
    ],
    "series": [
        {
            "name": "RUNNING",
            "data": []
        },
        {
            "name": "RUNNING",
            "data": []
        },
        {
            "name": "RUNNING",
            "data": []
        }
    ]
}

预期结果是:

{
    "labels": [
        "EXPORT",
        "IMPORT",
        "TRANSCODE"
    ],
    "series": [
        {
            "name": "FINISH",
            "data": []
        },
        {
            "name": "FAILED",
            "data": []
        },
        {
            "name": "RUNNING",
            "data": []
        }
    ]
} 

Answer 1

function Sample() {
        // Source data from the API simplified
        var SourceData = {
            hits: 4,
            job: [
                {
                    status: "FINISHED",
                    type: "IMPORT"
                },
                {
                    status: "FAILED",
                    type: "EXPORT"
                },
                {
                    status: "RUNNING",
                    type: "TRANSCODE"
                },
                {
                    status: "FINISHED",
                    type: "TRANSCODE"
                }
            ]
        };

        // Helper variable
        var status = [];

        //Initialize Result data object
        var ResultData = {
            labels: [],
            series: []
        };


        // Get job types and Status from SourceData and write as labels and series.name to result object without duplicates
        for (var i = 0; i < SourceData.job.length; i++) {
            var typeExists = ResultData.labels.indexOf(SourceData.job[i].type);
            var statusExists = status.indexOf(SourceData.job[i].status);
            
            if (typeExists == -1) {
                ResultData.labels.push(SourceData.job[i].type);
                ResultData.labels.sort();
            }

            if (statusExists == -1) {
                // Fill array with Status values without duplicates
                status.push(SourceData.job[i].status);
                // Fill result data with empty sub structure
                var placeholderSeries = { name: "", data: [] };
                ResultData.series.push(placeholderSeries);
            }
        }

        // Write a series name for each job status corresponding with the status values of the source
        for (var i = 0; i < ResultData.series.length; i++) {
            // THIS LINE DOESN'T WORK AS I WOULD EXPECT
            ResultData.series[i].name = status[i];
        }
        console.log(JSON.stringify(ResultData, null, 4));
    }
    Sample();

基本上你使用了错误的引用类型。您已多次将相同的 placeholderSeries 添加到数组中，但添加了相同的对象。

当您使用引用类型时，您不会将值存储在该变量中，而是存储对其的引用，您可以将多个变量指向同一值。

如果您有例如:

var x = {"name": "John"};
var y = x;
y.name = "John2";

x 和 y 都会被修改，因为它们指向同一个对象。

为了解决您的问题，您应该将 placeholderSeries 声明移到循环内。这样，每个循环都会创建一个新对象。