jQuery AJAX each loop using append and html

Question

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.

HTML :

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

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"
}}]

Zakaria Acharki · Accepted Answer · 2016-04-01T22:34:09.913

Working fiddle.

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

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

$("#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.

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>

I agree with your answer, and the html errors. 'p' tag is not needed and an can cause spacing errors. In side the li tag he can only use the 'a' tag and the span tag, and I do not see a need for them. The most he could add is a ul wrapper. — , Apr 01 '16 at 22:39
Happy to help @Zakaria. I Like the final results, clean and simple. Using the ul tag for DOM tracking is clever. — , Apr 01 '16 at 22:47
Thanks a lot Zakaria for correcting my post. I removed the
and replaced it with a
in the end of loop so the second object of the json file to be separated from the first one in the output. I also used the one() instead of bind () that is the "usual" one in most cases. It worked! Thank you!! Did n't know about one(). Know now... Thank you Sparky for your comment, too. — Danis35, Apr 01 '16 at 23:02

score 0 · Answer 2 · answered Apr 02 '16 at 00:00

0

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.

answered Apr 02 '16 at 00:00

Danis35

53
1
1
8

You did not mention that this was part of an ajax routine. Now .one() has to be reset after use. In other words a page change must reset the .one() function without a page refresh. I have been searching but not much detail on that function, unless it is implicitly a non-ajax compatible function. – Apr 02 '16 at 02:37
I refferred to getJSON so I supposed u understand I was talking about ajax request. Now about your thought... interesting one, may be difficult in implementing may not... don't know... if you acquire any piece of info about it, please let me know. Thanks Sparky256 – Danis35 Apr 02 '16 at 21:38

jQuery AJAX each loop using append and html

2 Answers2

Linked