如果您正在使用(或可以使用)jQuery,那么我建议您遍历每个列表并通过 AJAX 显示它们。从 API 调用返回的 JSON 数据如下所示:

这是一个大的 JSON 对象,其中包含每个列表的特定数据,包括图像/尺寸,因此您需要单独获取每个对象(请参阅结果数组)。
一种方法是在回调中使用for
循环。success
然后,您将为所需的每个值分配变量(使用点表示法解析 JSON),然后使用这些变量构建 HTML。
$(document).ready(function () {
// global variables
var url = 'https://openapi.etsy.com/v2/listings/active.js?includes=MainImage',
key = '9njigunpqge5htjynd9uu52f',
limit = 25; // etsy api maximum
// get data
$.ajax({
url: url,
data: {
api_key: key,
limit: limit,
},
dataType: 'jsonp',
success: function (data) {
// log etsy data
console.log(data);
// for each listing... *
for (var i = 0; i < data.results.length; i++) {
// * assign listing variables
var item = data.results[i];
var url = item.url;
var image = item.MainImage.url_570xN; // 75x75, 170x135, 570xN, fullxfull
var title = item.title;
var price = item.price;
var quantity = item.quantity;
// * build html structure for each listing
var result = $('<div class="item">\
<div class="item-image">\
<a href="' + url + '"><img src="' + image + '"/></a>\
</div>\
<div class="item-details">\
<p class="item-title">' + title + '</p>\
<p class="item-price">$' + price + '</p>\
<p class="item-quantity">' + quantity + ' left</p>\
</div>\
</div>');
// * append listings
$('#some-element').append(result);
}
}
});
});
此处概述了 API 中可用的图像大小:https ://www.etsy.com/developers/documentation/reference/listingimage 。
如果你想看一看,我最近在http://codepen.io/markhillard/pen/mErRPk上创建了一个功能更全面的 Etsy 商店。
希望这可以帮助。