jqueryjsonajax

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

Solution

  • 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>