Синтаксический Facebook График API JSON в HTML

Question

Я новичок в JSON, и я пытался вернуть список моих альбомов Facebook:

$(document).ready(function() { 
    $.getJSON("https://graph.facebook.com/me/photos?fields=id,name&access_token=MY TOKEN", function (data) { 
     var items = []; 
     $.each(data, function (key, val) { 
      items.push("<li id='" + key + "'>" + val + "</li>"); 
     }); 

     $("<ul/>", { 
      "class": "my-new-list", 
      html: items.join("") 
     }).appendTo(".results"); 
    }); 
}); 

JSON из Facebook:

{ 
    "data": [ 
     { 
     "id": "10150589771916817", 
     "name": "Mobile Uploads", 
     "created_time": "2012-03-03T14:47:48+0000" 
     }, 
     { 
     "id": "41633726816", 
     "name": "Old pics", 
     "created_time": "2008-08-18T21:44:29+0000" 
     } 
    ], 
    "paging": { 
     "cursors": { 
     "after": "NDE2MzM3MjY4MTY=", 
     "before": "MTAxNTA1ODk3NzE5MTY4MTc=" 
     } 
    } 
} 

[object Object] получает возвращенное для каждый элемент в моем HTML. Что я делаю не так?

Answer 1

Во-первых, ответ имеет массив с именем data, поэтому вам нужно перевернуть data.data.

Во-вторых, в вашем примере key будет целым индексом итерации, а value будет всем объектом в массиве. Вам нужно явно получить доступ к свойствам этого массива. Попробуйте это:

// Your retrieved JSON data... 
 
var data = { 
 
    "data": [{ 
 
     "id": "10150589771916817", 
 
     "name": "Mobile Uploads", 
 
     "created_time": "2012-03-03T14:47:48+0000" 
 
    }, { 
 
     "id": "41633726816", 
 
     "name": "Old pics", 
 
     "created_time": "2008-08-18T21:44:29+0000" 
 
    }], 
 
    "paging": { 
 
     "cursors": { 
 
      "after": "NDE2MzM3MjY4MTY=", 
 
      "before": "MTAxNTA1ODk3NzE5MTY4MTc=" 
 
     } 
 
    } 
 
} 
 

 
// inside your AJAX request callback... 
 
var items = []; 
 
$.each(data.data, function (i, obj) { 
 
    items.push('<li id="' + obj.id + '">' + obj.name + '</li>'); 
 
}); 
 

 
$('<ul/>', { 'class': 'my-new-list' }).append(items).appendTo('.results');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="results"></div>

Answer 2

Ответ содержит массив с именем, Loup думал массив данных, а затем вы можете получить ключ и Вэл во втором цикле.

Выполнение этого действия вы можете получить ключ и значение val.

var fbResponse = { 
 
    "data": [{ 
 
     "id": "10150589771916817", 
 
      "name": "Mobile Uploads", 
 
      "created_time": "2012-03-03T14:47:48+0000" 
 
    }, { 
 
     "id": "41633726816", 
 
      "name": "Old pics", 
 
      "created_time": "2008-08-18T21:44:29+0000" 
 
    }], 
 
     "paging": { 
 
     "cursors": { 
 
      "after": "NDE2MzM3MjY4MTY=", 
 
       "before": "MTAxNTA1ODk3NzE5MTY4MTc=" 
 
     } 
 
    } 
 
}; 
 

 

 
$.each(fbResponse.data, function (index, item) { 
 
    $.each(item, function (key, val) { 
 
     alert("Index=" + index + ", key=" + key + ", val=" + val); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

Answer 3

с JQuery, когда цикл массив вы получите индексировать и значение:

$.each([ 10, 20 ], function(index, value) { 
    alert(index + ": " + value); 
}); 

выход:

0: 10 
0: 20 

А если перебирать коллекцию вы получите ключ и значение:

var obj = { 
    "key 1": "value 1", 
    "key 2": "value 2" 
}; 
$.each(obj, function(key, value) { 
    alert(key + ": " + value); 
}) 

выход:

key 1: value 1 
key 2: value 2