Instagram API - 使用 jquery 获取图片

Question

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

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 returns 少于您请求的照片数量时的情况。

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') { ... }

Instagram API - 使用 jquery 获取图片

Instagram API - get images using jquery

javascript

ajax

jquery

append

instagram-api