在Javascript中解析Giphy

Question

我想使用Javascript解析来自api的响应，我希望使用giphy获得所有映像的缩小的url。

以下是json响应的样子

http://www.jsoneditoronline.org/?id=bbd7b24363fb7fa5035c22059b392bd7

下面是我的代码，它不太好用

const url = `http://api.giphy.com/v1/gifs/search?q=cat&api_key=dc6zaTOxFJmzC`;
            var xhr = new XMLHttpRequest();
            xhr.onload = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var response = JSON.parse(xhr.responseText);
                    var data = response.data;
                    for (var i in data) 
                        console.log(i.url);
                }
            }
            xhr.open('GET', url, true); 
            xhr.send();
          } 

Answer 1

几个月前，我不得不用这个api做作业。像这样循环遍历您的响应会将所有缩小的图像urls记录到控制台。

     var data = response.data;

     for(var i=0; i < data.length; i++){

         console.log(data[i].images.downsized.url);

     }

Answer 2

您可以使用一个非常简单的约简函数来获得数组：

var result = response.data.reduce((prev,curr) => {
    return prev.concat(curr.images.downsized.url)
},[])

Answer 3

您可以使用地图原型函数并解析数据数组中的每个对象，如下所示。

const url = `http://api.giphy.com/v1/gifs/search?q=cat&api_key=dc6zaTOxFJmzC`;
var xhr = new XMLHttpRequest();
xhr.onload = function() {

  if (xhr.readyState == 4 && xhr.status == 200) {
    var response = JSON.parse(xhr.responseText);
    var data = response.data;

    data.map(function(image) { // image = current object in array
      console.log(image.images.downsized.url);  // parse downsized url from current object in array     
    })

  }
}
xhr.open('GET', url, true);
xhr.send();

码页中的工作实例