Question

我不认为我这两次打电话，但由于某种原因，我从我的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个项目。非常感谢任何帮助。

Answer 1

尝试此操作以清除<tbody>：

的内容

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

但是你的代码在这个小提琴中表现得很好：JSFiddle

Answer 2

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

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

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

Answer 3

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

Answer 4

我不知道你的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));
    });
}();

使用jquery显示两次的JSON数据

4 个答案: