Question

我是一名初学程序员，正试图将我从Etsy API获得的数据结果显示到一个表中，如下所示：

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

但是，我无法在表格中显示结果，并且在将解决方案应用于我的情况时遇到了问题

这是一组工作代码，我已经注释了我失败的尝试。

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

其他信息：
1.目前结果如下：

成功搜索后，JSON结果如下所示：

[ { “listing_id”：123， “州”：“活跃”， “user_id”：123， “category_id”：123， “title”：“XXX”， “价格”：“2.99”， “currency_code”：“USD” .... } ]

Answer 1

我最终使用trHTML格式化表格：

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

Answer 2

第一步检查“跨域”某些浏览器不允许在不同域之间获取数据，您可以使用标题来启用它。

如何在jQuery中为$ .each（）创建表

2 个答案: