Load multiple json files and display it to the html using ajax and jquery

Question

I am trying to grab three different json files that contain objects and load them into a single page using the jquery get method. I need to grab the objects and display all three to the page using jquery. I am having trouble loading and displaying all three... any help is appreciated. Thanks!

Here is the code:

$(document).ready(function(){
$("button").click(function(){
    $.get("objectone.json", function(data){
        $('#mydiv').html((JSON.stringify(data)));
    });
    $.get("objectwo.json", function(data){
        $('#mydiv').html((JSON.stringify(data)));
    });
    $.get("objectthree.json", function(data){
        $('#mydiv').html((JSON.stringify(data)));
    });
  });
});

and the HTML:

<button type="button" name="button">Click Me</button>

<div id="mydiv">

</div>

DreamWave · Accepted Answer · 2017-10-17 20:55:28Z

3

The .html method replaces all of the contents of the selected element with the html contents you provide. By using it three times on the same element you replace all of the contents three times.

Replace .html with .append, which adds the new data to the end of the contents of the selected element.

answered Oct 17, 2017 at 20:55

DreamWave

1,9403 gold badges28 silver badges63 bronze badges

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

4 Comments

Mujo M Over a year ago

Gotcha! Is there anyway to stop the function from running when all three objects appear on the page? Because everytime I click the button to run the function another set of the same objects appear. Anyway to keep that from happening?

DreamWave Over a year ago

@MujoM You can either remove the button or stop it from working. To remove it: $("button").remove(); and to stop it from working: $("button").unbind('click'). Just add one of the above at the end of the "click" callback (one line before the last one)

DreamWave Over a year ago

@MujoM you can also add a class to the element to indicate that it has been filled. At the end of the callback function: $("mydiv").addClass('filled'); and in the beginning ad an "if" with if (!$("mydiv").hasClass('filled') { the rest of the code here }

Mujo M Over a year ago

Awesome! Thanks for the help!

Naren Murali · Accepted Answer · 2017-10-17 20:53:09Z

Instead of .html() method use .append() of JQuery.

Since you are using .html() it will replace the previous content with the new content whenever you call it, whereas with .append() it will add to the exisiting content.

Collectives™ on Stack Overflow

Load multiple json files and display it to the html using ajax and jquery

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related