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

Question

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

What error are you getting? And also if you can provide the JSON you're getting. — DCruz22
– DCruz22, Commented Jun 30, 2016 at 15:39
the json is coming from adweb.agency/interview/api/animals . I have no error message. — Forgive me I'm a drummer.
– Forgive me I'm a drummer., Commented Jun 30, 2016 at 15:42

Don't Panic · Accepted Answer · 2025-07-29 23:03:04Z

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>

Wes King · Accepted Answer · 2016-06-30 16:53:06Z

1

Assuming that your response variable 'data' is an array, you're accessing the wrong variable inside each iteration of your each loop:

$("#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>';

            // NOTE!  I changed 'object' to 'value' here
            // NOTE 2!  We added a JSON.parse on the 'data' variable to convert from JSON to JavaScript objects.
            $.each(JSON.parse(data), function(key, value){ 

                // We need to access the value variable in this loop because 'data' is the original array that we were iterating!
                table += ('<tr>');
                table += ('<td>' + value.Title + '</td>');
                table += ('<td><img src="' + value.ImageURLs.Thumb + '"></td>');
                table += ('<td>' + value.Description + '</td>');
                table += ('</tr>');

            });

            table += '</table>'; 

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

        }

    });

});

See the comments in the above code for the changes.

See the docs on jQuery's .each() iterator here.

edited Jun 30, 2016 at 16:53

answered Jun 30, 2016 at 16:18

Wes King

6274 silver badges7 bronze badges

3 Comments

Forgive me I'm a drummer. Over a year ago

Sorry. This did not work. It does help me understand this better.

Wes King Over a year ago

Check the new code. Your original idea to JSON.parse was correct, but only with the newly changed variables within the .each() loop that I provided. Give the new code a shot. In the future, when you are asking for help in parsing responses via AJAX or the like, it's a good idea to post an example of what the response from the API looks like. In this case, I had to do a request myself to see the result.

Forgive me I'm a drummer. Over a year ago

Thank you. I'm here to learn and all tips appreciated. I will as you advise,

DCruz22 · Accepted Answer · 2016-06-30 16:14:55Z

-1

Try this code:

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

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

answered Jun 30, 2016 at 16:14

DCruz22

8061 gold badge9 silver badges18 bronze badges

3 Comments

DCruz22 Over a year ago

I think you'll need to give more details about what you are getting

Forgive me I'm a drummer. Over a year ago

i'm not getting much. When I click the button I get the table header but no data in the table.

DCruz22 Over a year ago

If you console.log(table) what is the result?

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related