Javascript Question

how to process json data through an .each loop into html table

I am making an ajax get request that displays json data in a html table. I know how to do this with javascript, so I thought I'd try it with jquery. There is a problem in my

.each
loop. I am vague on how the arguments
(key, object)
process more than one key value pair in each position and suspect this is where my error lies.

I have tried
JSON.parse
, but that didn't help. I am definitely getting the data as I can display it in an alert box. I suspect that what I'm doing is not industry standard and that there is a more elegant way to reach my objective.

$("#button").click(function(){

$.ajax({
type: 'get',
url: "http://www.adweb.agency/interview/api/animals",
data: {format: 'json' },
dataType: 'json',
success: function(data){

var i = 0;
var table = '<table class="mainTable"><tr><th>item</th><th>image</th><th>description</th></tr>';

$.each(data, function(key, object){

table += ('<tr>');
table += ('<td>' + data.Title + '</td>');
table += ('<td><img src="' + data.ImageURLs.Thumb + '"></td>');
table += ('<td>' + data.Description + '</td>');
table += ('</tr>');

});

table += '</table>';

$('#tableContainer').html(table);

}

});

});

Answer

here's the right code that you need, just copy and paste, regards!

 <!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>

<input id = "btnSubmit" type="button" value="Release"/>

<div id="tableContainer">
</div>

<script type="text/javascript">
$(document).ready(function() {
    $("#btnSubmit").click(function(){           

              $.ajax({
                      dataType: 'json',
                      url:   "http://www.adweb.agency/interview/api/animals",
                      type:  'get',

                      success:  function (data) {
                         var i = 0;
                         var table = '<table class="mainTable"><tr><th>item</th><th>image</th><th>description</th></tr>';
                         data = $.parseJSON(data)
                               $.each(data, function (idx, obj) {                                   
                                    table += ('<tr>');
                                    table += ('<td>' + obj.Title + '</td>');
                                    table += ('<td><img src="' + obj.ImageURLs.Thumb + '"></td>');
                                    table += ('<td>' + obj.Description + '</td>');
                                    table += ('</tr>');
                              });
                         table += '</table>';
                        $("#tableContainer").html(table);

                      },
                      error: function(XMLHttpRequest, textStatus, errorThrown) {
                            alert("some error");
                      }
              });
    }); 
});




</script>
</body>

</html>
Comments