Ajax json afficher correctement les données

Question

J'essaie d'afficher les données de json dans mon HTML. Il ne semble pas obtenir les données correctement. Je l'exécute sur mon localhost afin que je puisse voir le json correctement. ici sur ma démo, le json est hébergé sur mon FTP personnel.

• Comment puis-je afficher les données dans mon code HTML?

$(function() { 
 
    ajaxJS(); 
 
    function ajaxJS(e) { 
 
    if (e) { 
 
     e.preventDefault(); 
 
    } 
 
    $.ajax({ 
 
     url: "http://www.domenghini.com/sample-data.json", 
 
     method: "GET", 
 
     success: function(data) { 
 
     console.log(data); 
 
     var html_to_append = ''; 
 
     $.each(data.items, function(i, items) { 
 
      html_to_append += 
 
      '<div class="col-3 mb-3"><div class="name text-left pb-1 text-uppercase"><p>' + 
 
      name.first + 
 
      '<div class="col-3 mb-3"><div class="last text-right pb-1 text-uppercase"><p>' + 
 
      name.last + 
 
      '</p></div><img class="image img-fluid" src="' + 
 
      picture + 
 
      '" /><p class="company">' + 
 
      company + 
 
      '</p></div>'; 
 
     }); 
 
     $("#items-container").html(html_to_append); 
 
     }, 
 
     error: function() { 
 
     console.log(data); 
 
     } 
 
    }); 
 

 
    } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container-fluid"> 
 
\t <div id="items-container" class="row"></div> 
 
</div>

Answer 1

Je pense que la question est que vous essayez d'accéder à name.firstname.last dans .each de $ sans spécifier items.name.first

$(function() { 
 
    ajaxJS(); 
 
    function ajaxJS(e) { 
 
    if (e) { 
 
     e.preventDefault(); 
 
    } 
 
    $.ajax({ 
 
     url: "http://www.domenghini.com/sample-data.json", 
 
     method: "GET", 
 
     success: function(data) { 
 
     console.log(data); 
 
     var html_to_append = ''; 
 
     $.each(data, function(i, item) { 
 
      html_to_append += 
 
      '<div class="col-3 mb-3"><div class="name text-left pb-1 text-uppercase"><p>' + 
 
      item.name.first + 
 
      '<div class="col-3 mb-3"><div class="last text-right pb-1 text-uppercase"><p>' + 
 
      item.name.last + 
 
      '</p></div><img class="image img-fluid" src="' + 
 
      item.picture + 
 
      '" /><p class="company">' + 
 
      item.company + 
 
      '</p></div>'; 
 
     }); 
 
     $("#items-container").html(html_to_append); 
 
     }, 
 
     error: function() { 
 
     console.log(data); 
 
     } 
 
    }); 
 

 
    } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container-fluid"> 
 
\t <div id="items-container" class="row"></div> 
 
</div>