从GET响应/ JSON对象提取数据

Question

有一阵子没接触过Javascript，也找不到从JSON对象提取数据的正确方法。 因此，我基本上是向Giphy API发送一个简单的GET请求，并尝试从响应中获取URL，但是由于某种原因，我会遇到各种错误。 这是我尝试的：

  $(function() { $('#searchButton').click(function() { console.log("test"); $("#result").append("test<br />"); var xhr = $.get("http://api.giphy.com/v1/gifs/search?q=cats&api_key=dc6zaTOxFJmzC&limit=1"); xhr.done(function(data) { console.log(this.fixed_height); $("#result").append("success got data<br />" + data + "<br />"); console.log("success got data", data); $.each(data.results, function() { $.each(this.images, function() { console.log(this.fixed_height); $("#result").append(this.fixed_height + "<br />"); }); }) }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <button id="searchButton">search!</button> <div id="result"></div> 

Answer 1

你有几个问题。 首先， data对象中没有results成员。 我看到的唯一可以迭代的内容是数据对象中的另一个data成员。 其次，在images内部，没有fixed_height ，只有height 。 这有效：

var xhr = $.get("http://api.giphy.com/v1/gifs/search?q=cats&api_key=dc6zaTOxFJmzC&limit=1");
xhr.done(function (data) {  
    $.each(data.data, function () {
        $.each(this.images, function () {
            console.log(this.height);
        });
    })
});

http://jsfiddle.net/n9ffva83/

记住$(function () {}); JSFiddle中不需要，因此您必须提供（就像您在上面提供给我们的代码中所做的那样）。

编辑 ：要获取固定高度的网址，请尝试以下操作：

var xhr = $.get("http://api.giphy.com/v1/gifs/search?q=cats&api_key=dc6zaTOxFJmzC&limit=1");
xhr.done(function (data) {  
    $.each(data.data, function () {
        console.log(this.images.fixed_height.url);
    })
});

看来这个网址只是一个，属于图片。

http://jsfiddle.net/n9ffva83/1/