使用jquery显示两次JSON数据

我不认为我调用了两次，但出于某种原因，我从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));
    });

});

---

它显示10个项目。非常感谢您的帮助。

请尝试此操作以清除

的内容：

---

但是，您的代码在这种情况下运行良好：

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

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

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

---

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

我不知道您的

HTML

是如何精确构造的，但这里有一个工作示例。确保您的

$.getJSON（）

没有在其他任何地方被调用两次（如果您有数百条数据记录，这可能会导致更大的问题）。但是，这将解决记录在表中显示两次的问题

HTML

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

ProductSalesAwards

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));
    });
}();

/**来自服务器的JSON示例*/
var json={
“产品奖励”：[{
“产品列表”：“新销售”，
“销售”：“25”，
“奖项”：“500”
}, {
“产品列表”：“电视”，
“销售”：“12”，
“奖项”：“18”
}, {
“产品列表”：“电视完成器”，
“销售”：“7”，
“奖项”：“210”
}, {
“产品列表”：“HSI增强型”，
“销售”：“15”，
“奖项”：“150”
}, {
“产品列表”：“模块”，
“销售”：“68”，
“奖项”：“360”
}]
};
/**行生成器*/
var rowBuilder=函数（值）{
返回'++'+value.productList+'+''+
value.sales+“”+“”+“”+value.awards+“”+“”；
};
/**循环使用JSON并构建网格*/
var buildGrid=函数（）{
var$tContext=$（“#详细信息主体”）；
$tContext.empty（）；
$.each（json.productRewards，函数（i，数据）{
$tContext.append（行生成器（数据））；
});
}();

尝试将函数声明置于

$之外。getJSON

？

#details

表最初是否包含任何内容？尝试在附加任何内容之前重置表的内容

$（'#details tbody'）。empty（）

他是正确的，您可能需要执行

$（'#details tbody'）。empty（）

。尝试在

.each（…）

中添加

console.log（）

，然后查看输出了多少项。出于某种原因，清除表只会清除TH标记。您正在为每个循环过程清除它，因此在循环后只会插入一行。

html（“”）

应该在插入

之前在循环之外完成。遗憾的是，这也不起作用。它只是删除了整个表。我试着移动它们，但没用。我使用的是jQuery1.9.1这会删除TH标记，并且不会阻止数据循环两次。

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

/** 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));
    });
}();