1

我不认为我会调用它两次，但出于某种原因，我从我的 JSON 中获取了 5 个元素，显示了两次。这是Jquery。

$.getJSON('js/data.json', function(data) {

    function rowBuilder(value) {
          return '<tr>'
                + '<td>'
                      + value.productList
                + '</td>'
                + '<td class="center">'
                      + value.sales
                + '</td>'
                + '<td class="center">'
                      + value.awards
                + '</td>'
          + '</tr>';
    }

    $.each(data.productRewards, function(k,v){
        $('#details tbody').append(rowBuilder(v));
    });

});

我的JSON如下：

{ "productRewards":[
{
    "productList": "New Sales",
    "sales": "25",
    "awards": "500"
},
{
    "productList": "TV",
    "sales": "12",
    "awards": "18"
},
{
    "productList": "TV Completers",
    "sales": "7",
    "awards": "210"
},
{
    "productList": "HSI Enhanced",
    "sales": "15",
    "awards": "150"
},
{
    "productList": "MODULE",
    "sales": "68",
    "awards": "360"
}
]
}

它显示 10 个项目。任何帮助将不胜感激。

4

4 回答 4

0

试试这个来清除以下内容<tbody>：

$('#details tbody').html("");
$.each(data.productRewards, function(k,v){
    $('#details tbody').append(rowBuilder(v));
});

但是您的代码在这个小提琴中运行良好：JSFiddle

于 2013-06-03T17:51:19.920 回答
0

在追加任何内容之前尝试重置表格的内容

$('#details tbody').empty();

$.each(data.productRewards, function(k,v){
    $('#details tbody').append(rowBuilder(v));
});
于 2013-06-03T17:53:00.820 回答
0

我在使用 Jquery 使用 Worklight 时遇到了这个问题。这是因为包含了几个 Jquery 核心文件。我已经在 html 的头部包含了一次 Jquery 核心文件。如果您也在使用 Jquery mobile，请确保在页面末尾加载这些文件。这一切都在加载脚本的时间以及对函数的调用中。

于 2013-06-03T17:54:07.790 回答
0

我不知道你HTML的结构是如何的，但这是一个工作示例。确保您$.getJSON()没有在其他任何地方被调用两次（如果您有数百条数据记录，这可能会导致更大的问题）。但是，这将解决记录在您的表中显示两次的问题。

HTML

<table id="details">
    <thead><th>Product</th><th>Sales</th><th>Awards</th></thead>
    <tbody></tbody>
</table>

JavaScript

/** Sample JSON from the server. */
var json = {
    "productRewards": [{
        "productList": "New Sales",
            "sales": "25",
            "awards": "500"
    }, {
        "productList": "TV",
         "sales": "12",
        "awards": "18"
    }, {
        "productList": "TV Completers",
        "sales": "7",
        "awards": "210"
    }, {
        "productList": "HSI Enhanced",
        "sales": "15",
        "awards": "150"
    }, {
        "productList": "MODULE",
        "sales": "68",
        "awards": "360"
    }]
};

/** Row builder */
var rowBuilder = function (value) {
    return '<tr>' + '<td>' + value.productList + '</td>' + '<td class="center">' +
    value.sales + '</td>' + '<td class="center">' + value.awards + '</td>' + '</tr>';
};

/** Loop through JSON and build the grid. */
var buildGrid = function () {
    var $tContext = $('#details tbody');
    $tContext.empty();
    $.each(json.productRewards, function (i, data) {
        $tContext.append(rowBuilder(data));
    });
}();
于 2013-06-06T19:45:51.213 回答