Imprimir datos de json con jquery

xoceunder · #1 (**permalink**) 23/08/2018, 16:00

Hola a todos es que ando tratando de imprimir datos de json

Este es mi Json

Código json:

Ver original{
    "pets":[
        { "animal":"dog", "name":"Fido" },
        { "animal":"cat", "name":"Felix" },
        { "animal":"hamster", "name":"Lightning" }
    ]
}

index.html

Código HTML:

Ver original<!DOCTYPE html>  
 <html>  
      <head>  
           <title>Webslesson Tutorial | Load JSON Data using Ajax getJSON Method</title>  
           <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
           <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
           <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
 <script>  
 $(document).ready(function(){  
      $("button").click(function(){  
           $("table").show();  
           $.getJSON("pets.json", function(data){  
                $.each(data, function(key, value){  
                     $("table").append("<tr><td>"+value.name+"</td></tr>");  
                });  
           });  
      });  
 });  
 </script>  
      </head>  
      <body>  
           <br />  
           <div class="container" style="width:600px;">  
                <h3 align="">Load JSON Data using Ajax getJSON Method</h3><br />  
                <button class="btn btn-info">Load name List JSON Data</button>  
                <table class="table table-bordered" style="display:none;">  
                     <tr>  
                          <th>name Title</th>  
                     </tr>  
                </table>  
           </div>  
           <br />  
      </body>  
 </html>

xoceunder · #2 (**permalink**) 23/08/2018, 16:04

que estoy haciendo mal para que no muestra lo que queiro

Alexis88 · #3 (**permalink**) 24/08/2018, 09:42

Te hace falta acceder al atributo pets.

Código Javascript:

Ver original$.getJSON("pets.json", function(data){  
    $.each(data.pets, function(key, value){  
        $("table").append("<tr><td>"+value.name+"</td></tr>");  
    });  
});