使用jQuery加载json数据时遇到问题

Question

我有一个文件data.json，内容如下：

[
{"Images" : "images/car1.jpg", "Model" : "model x", "Name" : "car a1"},
{"Images" : "images/car2.jpg", "Model" : "model y", "Name" : "car b2"},
{"Images" : "images/car3.jpg", "Model" : "model z", "Name" : "car c3"}
] 

这是我的jQuery代码。

$.getJSON("data.json", function (data) {
    var columns = header(data);


    for (var i = 0; i < data.length; i++) {
        var row$ = $('<tr/>');
              for (var colIndex = 0; colIndex < columns.length; colIndex++) {


        $.each(data, function () {
            data[i][columns[0]] = '<img src= "' + this.Images + '" width=240 height=160>';
        });

             var cellValue = data[i][columns[colIndex]];


            if (cellValue == null) { cellValue = ""; }               
            row$.append($('<td/>').html(cellValue));
        }
        $("#jsonTable").append(row$);
    }
});
function header(list) {
    var columnSet = [];
    var headerTr$ = $('<tr/>');

    for (var i = 0; i < list.length; i++) {
        var rowHash = list[i];
        for (var key in rowHash) {
            if ($.inArray(key, columnSet) == -1) {
                columnSet.push(key);
                headerTr$.append($('<th/>').html(key));
            }
        }
    }
    $("#jsonTable").append(headerTr$);

    return columnSet;
}

现在我的 HTML 表格（id="jsonTable"）中的图片列似乎加载了错误的数据。我只看到所有 3 行的图片列中都加载了 car1 的图片... 我没有看到 car2 和 car3 的图片。

- Mohan

Answer 1

这个循环$.each是不必要的。移除$.each 试试这样做，不用$.each

data[i][columns[0]] = '<img src= "' + data[i].Images+ '" width=240 height=160>';

JSFIDDLE

- Anik Islam Abhi

---

感谢Anik快速介入，但是我发现删除循环后没有任何图像加载，似乎不起作用。 - Mohan

我已经添加了 Fiddle :) - Anik Islam Abhi