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-01 22:34:09Z

4

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>

edited Apr 1, 2016 at 22:34

answered Apr 1, 2016 at 22:28

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user5952891 Over a year ago

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.

user5952891 Over a year ago

Happy to help @Zakaria. I Like the final results, clean and simple. Using the ul tag for DOM tracking is clever.

Danis35 Over a year ago

Thanks a lot Zakaria for correcting my post. I removed the <p> and replaced it with a <br /> 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 · Accepted Answer · 2016-04-02 00:00:38Z

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 2, 2016 at 0:00

Danis35

531 gold badge1 silver badge8 bronze badges

2 Comments

user5952891 Over a year ago

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.

Danis35 Over a year ago

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

Collectives™ on Stack Overflow

jQuery AJAX each loop using append and html

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related