How to create tables in jQuery for $.each()

Question

I am a beginner programmer that is trying to display data results I get from Etsy API into a table as shown below:

<tr><td>item.images</td><td><tr>item.title</tr><tr>item.price</tr></tr>

However, I am unable to display the results in a table and am having problems applying the solutions to my situation

Here is the set of working codes, and I have commented out my failed attempts.

<script type="text/javascript">
(function($){
    $(document).ready(function(){
        $('#etsy-search').bind('submit', function() {
            api_key = "XXXXXXXXXXXXXXXXXXXXX";
            terms = $('#etsy-terms').val();
            etsyURL = "https://openapi.etsy.com/v2/listings/active.js?keywords="+
                terms+"&limit=3&includes=Images:1&api_key="+api_key;

            $('#etsy-images').empty();
            $('<p></p>').text('Searching for '+terms).appendTo('#etsy-images');

            $.ajax({
                url: etsyURL,
                dataType: 'jsonp',
                success: function(data) {
                    if (data.ok) {
                        // Commented out are my failed attempt
                        //var table = "<table>";
                        $('#etsy-images').empty();
                        if (data.count > 0) {

                                $.each(data.results, function(i,item) {
                               $("<img/>").attr("src", item.Images[0].url_75x75).appendTo("#etsy-images").wrap(
                                    "<a href='" + item.url + "'></a>"
                                //table+='<tr><td>'+item.title+'</td><td>'+item.price+'</td></tr>'; 
                                //}
                                );
                                //  table+='</table>';
                                //  $("#etsy-images").html( table );

                                if (i%4 == 3) {
                                    $('<br/>').appendTo('#etsy-images');
                               }
                            });
                        } else {
                            $('<p>No results.</p>').appendTo('#etsy-images');
                        }
                    } else {
                        $('#etsy-images').empty();
                        alert(data.error);
                    }
                }
            });

            return false;
        })
    });

})(jQuery);
</script>

<body>
    <form id="etsy-search">
        <input id="etsy-terms" size="32">
        <button>Search!</button>
    </form>

    <div id="etsy-images"></div>
</body>

Additional info:
1. Currently the results looks like this:

After a successful search, the JSON results looks like this:

[ { "listing_id": 123, "state": "active", "user_id": 123, "category_id": 123, "title": "XXX", "price": "2.99", "currency_code": "USD" .... } ]

Consider using an HTML templating library. Creating complex HTML from scratch in jQuery is certainly possible, but it's cumbersome, error-prone and hard to maintain. There are mature libraries like handlebars.js that take this burden off you, look at one of them before you invest more time in your current approach. I think it's worth switching away from jQuery-based HTML generation as soon as possible. — Tomalak, Jan 14 '17 at 16:20
instead of something like `var table = "";`, do `var table = $('
')` that's how you do it in JQuery - just like the way you are appending those `
` elements, also check this link for more info: http://stackoverflow.com/questions/8749236/create-table-with-jquery-append — Scott Weaver, Jan 14 '17 at 16:23
Don't you have to convert the JSON array to a JS array? I'm not entirely sure, so correct me if I'm wrong everyone else. — Josh, Jan 14 '17 at 16:25
@Jersh no, is a jsonp request and `$.ajax` success callback will therefore return array or object — charlietfl, Jan 14 '17 at 16:30

Detective merry · Accepted Answer · 2017-01-19T06:13:00.530

I eventually used trHTML to format the table:

                    var trHTML = '';
                    $('#etsy-table').empty();
$.each(data.results, function(i,item) {


                                trHTML += '<tr><td>' + '<a href="'
                                + item.url +'" target="_blank" style="color: white"><img src="' 
                                + item.Images[0].url_75x75 + '" border="0"></a></td><td><tr>' 
                                + item.title + '</tr><tr>' 
                                + item.price + '</tr><tr><a href="'
                                + vimg +'" target="_blank" style="color: white"><img class="autosizeImage"src="' 
                                + vimg + '" border="0"></a></tr></td></tr>';

                                })

                                $('#etsy-table').append(trHTML);

score -2 · Answer 2 · answered Jan 14 '17 at 16:50

-2

Firts step check the "crossdomain" someones browsers don't allow get data between different domains, you can enabled it with headers to allow than.

answered Jan 14 '17 at 16:50

user5031678

1

1

It doesn't apply in his case, since he says he gets a JSON result. – Joel Harkes Jan 14 '17 at 17:22

How to create tables in jQuery for $.each()

2 Answers2