Javascript 从JSON读取文件并循环时，将打印最后一个值，而不是for循环中的每个迭代值

在下面的示例中，我们从JSON数据中读取数据并将其存储在变量中。 然后我们循环遍历它，打印出每个迭代的值

我有“cartList.innerHTML”，它将列出数组中对象数量的4倍“Edit”。如下

编辑

编辑

编辑

编辑

单击第一个“编辑”按钮后，应打开一个模式，并显示第一个对象的名称，单击第二个“编辑第二个对象的名称”，依此类推

但由于某些原因，该值仍然是每次编辑的最后一个对象的名称。如何让它为每次编辑打印正确的名称

// Fetch JSON data
function loadJSON(file, callback) {
    var xobj = new XMLHttpRequest();
    xobj.overrideMimeType("application/json");
    xobj.open('GET', file, true); // Refers to JSON file
    xobj.onreadystatechange = function() {
        if (xobj.readyState == 4 && xobj.status == "200") {
            callback(xobj.responseText);
        }
    }
    xobj.send(null);
}

function load() {
    loadJSON("assets/cart.json", function(response) {
        var actual_JSON = JSON.parse(response);
        console.log(actual_JSON);

        var cartList = document.getElementById("cart-products");
        var itemObj = actual_JSON.productsInCart;       
        var itemLength = actual_JSON.productsInCart.length;

        // Loop through JSON data
        for (var i = 0; i < itemLength; i++) {

            (function(i) {
                /* Output Link Element with Edit text & on click
                   display a modal containing current value of iteration */

                cartList.innerHTML += '<div>'+
                                      '<a href="javascript: void(0);" class="btn btn-outline button-edit" data-toggle="modal" data-target=".bs-example-modal-lg">Edit</a>'+
                                      '</div>';

                var editCartModal = document.getElementById("edit-cart");
                editCartModal.innerHTML = itemObj[i].p_name;// Name of the current object

            })(i);              

        // for loop ends here
        }

    })
}
load(); // Loads function on page load

//获取JSON数据
函数loadJSON（文件，回调）{
var xobj=新的XMLHttpRequest（）；
重写emimetype（“application/json”）；
open（'GET'，file，true）；//表示JSON文件
xobj.onreadystatechange=函数（）{
if（xobj.readyState==4&&xobj.status==200）{
回调（xobj.responseText）；
}
}
xobj.send（空）；
}
函数加载（）{
loadJSON（“assets/cart.json”，函数（响应）{
var-actual_JSON=JSON.parse（响应）；
log（实际的_JSON）；
var cartList=document.getElementById（“购物车产品”）；
var itemObj=actual_JSON.productsInCart；
var itemLength=实际的_JSON.productsInCart.length；
//循环浏览JSON数据
对于（变量i=0；i

这是因为尽管您在生活中运行以下代码：

var editCartModal = document.getElementById("edit-cart");
editCartModal.innerHTML = itemObj[i].p_name;// Name of the current object

您只需修改相同的模式（

getElementById（）

）四次

解决此问题的一个简单方法是添加

数据

属性：

for (var i = 0; i < itemLength; i++) {

    (function(i) {
         /* Output Link Element with Edit text & on click
            display a modal containing current value of iteration */

        cartList.innerHTML += '<div>'+
                              '<a href="javascript: void(0);"' +  
                                  'class="btn btn-outline button-edit" data-toggle="modal"' + 
                                  'data-target=".bs-example-modal-lg" data-custom-value="' + i + 
                                  '">Edit</a>'+
                              '</div>';
    })(i);              

    // for loop ends here
}

/* ES5 way*/
/*
var list = document.getElementsByClassName('button-edit');
list.forEach(function(){
    ...
})
*/

[...document.getElementsByClassName('button-edit')].map(function(element){
    element.addEventListener('click', function(e){
        var chosenIdx = this.dataset.customValue;
        var editCartModal = document.getElementById("edit-cart");
        editCartModal.innerHTML = itemObj[chosenIdx].p_name;// Name of the current object
    }, false);
});

for（var i=0；i

发生这种情况是因为

for

循环中的每个函数都在循环结束后开始执行。这与回调的行为相同。当您调用每个

（函数（i）{}）（i）

时，它们都会进入函数调用堆栈的末尾，并且只有在循环的最后一次迭代之后才开始执行（使用最后一次

i

值）

---

我很好奇为什么需要一个内部内联函数？为什么不直接把这个代码放到循环体上？

Hi@kevlai22。。。谢谢你的回答。。。由于某种原因，它对我仍然不起作用。。。它显示了一个错误“document.getElementsByClassName（…）.addEventListener不是一个函数”请您使用示例JSON尝试一下，看看它是否有效？哦，我犯了一个简单的错误<代码>文档。getElementsByClassName（'button-edit'）提供节点列表。已经编辑了answerHey kevlai22。。。非常感谢您不断的回答。。。那不是ES6吗？我们如何在ES5中做到这一点？编辑了我的答案。你好，谢谢@kevlai22。。。我是javascript的新手。。。请告诉我在for each/*var list=document.getElementsByClassName（'button-edit'）中应该做什么；list.forEach（函数（）{//这里应该做什么？}）*/