jQuery AJAX每一个循环都使用append和html

I want from the following code to retrieve the data of the json file but the problem is that if I press again the button I see twice the results. I changed the first append of my each loop to html but then only the last object of my json is loaded.

我希望从下面的代码中检索json文件的数据，但问题是，如果我再次按下按钮，会看到两倍的结果。我将每个循环的第一个append更改为html，但最后只加载了json的最后一个对象。

HTML :

HTML:

<ul id="myorders"></ul>
<button type="button" id="add-order">Load the orders</button>

JS :

JS:

$("#add-order").click(function(){ 

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

        $.each(data, function(i, order){
            $("#myorders").append("<p><li> id: " + data[i].order.id + "</li>");
            $("#myorders").append("<li> Name: " + data[i].order.name + "</li>");
            $("#myorders").append("<li> Drink: " + data[i].order.drink + "</li></p>")
        });         
    });
});

Data example :

数据的例子:

[{ "order":{"id": "1",
    "name": "Bill",
    "drink": "Capuccino"}},


  { "order":{"id": "2",
    "name": "Sofia",
    "drink": "Late"
}}]

2 个解决方案

#1

Working fiddle.

工作小提琴。

.one() : Attach a handler to an event for the elements. The handler is executed at most once per element per event type.

.one():将处理程序附加到元素的事件上。处理程序在每个事件类型的每个元素上最多执行一次。

You could use JQuery one() that will trigger the click one time :

您可以使用JQuery one()来触发一次单击:

$("#add-order").one("click", function(){ 
    $.getJSON('API/orders.json', function(data){

        var my_orders = $("#myorders");

        $.each(data, function(i, order){
            my_orders.append("<li> id: " + data[i].order.id + "</li>");
            my_orders.append("<li> Name: " + data[i].order.name + "</li>");
            my_orders.append("<li> Drink: " + data[i].order.drink + "</li>")
        });    
    }); 
});

NOTE : You append invalid HTML, <li> tag should be a direct child of ul so you should remove p.

注意:您附加了无效的HTML，

标记应该是ul的直接子标记，所以应该删除p。

标记应该是ul的直接子标记,所以应该删除p。

Hope this helps.

希望这个有帮助。

var data = [{ "order":{"id": "1",
    "name": "Bill",
    "drink": "Capuccino"}},


  { "order":{"id": "2",
    "name": "Sofia",
    "drink": "Late"
}}]

$("#add-order").one("click", function(){ 
  var my_orders = $("#myorders");

  $.each(data, function(i, order){
    my_orders.append("<li> id: " + data[i].order.id + "</li>");
    my_orders.append("<li> Name: " + data[i].order.name + "</li>");
    my_orders.append("<li> Drink: " + data[i].order.drink + "</li>")
  });   
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="myorders"></ul>
<button type="button" id="add-order">Load the orders</button>

#2

I 've just found out that there is a matter with that solution...if you change/update the data of the json file, then you have to reload the page because the one() has been already used once.

我刚发现那个解决办法有问题……如果更改/更新json文件的数据，则必须重新加载页面，因为one()已经使用过一次。

#1