Instagram API - 使用 jquery 获取图像

Question

我创建了一个 AJAX 函数，用于获取我的 Instagram 帐户的四张最新图片。现在我想创建一个append 函数，将我的两个第一张图像插入一个名为insta-left 的<div> 和另外两个在第二个<div> 称为insta-right 中，但我找不到拆分的解决方案我的功能：

var token = 'MY_TOKEN', 
    userid = MY_USER_ID,
    num_photos = 4; // number of photos i get

$.ajax({
    url: 'https://api.instagram.com/v1/users/' + userid + '/media/recent',
    dataType: 'jsonp',
    type: 'GET',
    data: {
        access_token: token,
        count: num_photos
    },
    success: function(data) {
        console.log(data);
        for (x in data.data) {
            $('.insta-left').append('<img src="' + data.data[x].images.low_resolution.url + '">');
        }
    },
    error: function(data) {
        console.log(data);
    }
});

如果我这样做，所有图像都将插入insta-left。如何拆分我的功能以获取此 <div> 中的前两张照片和另一张 <div> 中的两张最新照片？

Answer 1

做一个常规的for循环并检查索引怎么样？

success: function(data) {
console.log(data);
    for (i = 0; i < data.data.length; i++) {
        if (i < 2) {
            $('.insta-left').append('<img src="' + data.data[i].images.low_resolution.url + '">');
        } else {
            $('.insta-right').append('<img src="' + data.data[i].images.low_resolution.url + '">')
        }
    }

您可能还想考虑 Instagram API 返回的照片数量少于您请求的照片数量的情况。

Answer 2

你可以试试

for(i = 0; i < 2; i++) {
  $('.insta-left').append(...);
}

for(i = 2; i < 4; i++) {
  $('.insta-right').append(...);
}

您可以使用data.data[i]访问图片。

另外，运行一些检查可能是个好主意，这样它就不会尝试附加不存在的图像。类似的，

if(typeof data.data[i] !== 'undefined') { ... }