Charger plusieurs fichiers json et l'afficher au format html en utilisant ajax et jquery

Question

J'essaie de récupérer trois fichiers json différents contenant des objets et de les charger dans une seule page en utilisant la méthode jquery get. J'ai besoin de saisir les objets et d'afficher tous les trois à la page en utilisant jquery. J'ai du mal à charger et à afficher les trois ... toute aide est appréciée. Merci!

Voici le 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))); 
    }); 
    }); 
}); 

et le code HTML:

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

<div id="mydiv"> 

</div> 

Answer 1

Au lieu de .html() méthode utilisation .append() de JQuery.

Puisque vous utilisez .html() il remplacera le contenu précédent avec le nouveau contenu chaque fois que vous l'appelez, alors qu'avec .append() il ajoutera au contenu exisiting.

Lire la suite here

$(document).ready(function() { 
 
    var url = "https://rawgit.com/typicode/json-server/master/routes.json"; 
 
    $("button").click(function() { 
 
    $.get(url, function(data) { 
 
     $('#mydiv').append((JSON.stringify(data))); 
 
    }); 
 
    $.get(url, function(data) { 
 
     $('#mydiv').append((JSON.stringify(data))); 
 
    }); 
 
    $.get(url, function(data) { 
 
     $('#mydiv').append((JSON.stringify(data))); 
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button" name="button">Click Me</button> 
 

 
<div id="mydiv"> 
 

 
</div>

Answer 2

La méthode .html remplace tout le contenu de l'élément sélectionné avec le contenu html que vous fournissez. En l'utilisant trois fois sur le même élément, vous remplacez tous les du contenu trois fois.

Remplacez .html par .append, qui ajoute les nouvelles données à la fin du contenu de l'élément sélectionné.