『ids』クエリパラメーターを使って複数のオブジェクトを取得する場合のメモ【Graph API】

Facebookページや個人ユーザーの画像などの情報をサイトに表示させるときにGraph APIを使って取得するわけですが、 『ids』クエリパラメーターを使うと複数の情報を一回で取得することができます。そのときのメモです。

『ids』クエリパラメーターを用いてJSONで取得する場合の注意点

情報を単体で取得する場合、下記のようなJSONデータが返ってきます。

{
   "id": "1234567",
   "name": "name",
   "first_name": "hoge",
   "last_name": "huga",
   "link": "https://www.facebook.com/hoge",
   "username": "hoge",
   "gender": "male",
   "locale": "ja_JP"
}

場合によったら、FacebookページなどのIDが「123456」のような数字の場合がありますが、この場合だと下記のようにしてしまうと取得できません。

json.123456.username

また、ユーザーネームの中に、「hoge.fuga」のように「.」(ドット)がある場合もあります。その場合も下記のようにしてしまうと取得できません。

json.hoge.fuga.username

そのためデータを取得するのに、ちょっとした別の書き方が必要になります。

『ids』クエリパラメーターを用いてJSONで取得方法

『ids』クエリパラメーターを用いた場合、下記のようなJSONデータが返ってきます。

{
   "name1": {
      "id": "123456",
      "name": "name",
      "first_name": "hoge",
      "last_name": "fuga",
      "link": "https://www.facebook.com/hoge",
      "username": "hoge",
      "gender": "male",
      "locale": "ja_JP"
   },
   "name2": {
      "id": "2345678",
      "name": "name2",
      "first_name": "foo",
      "last_name": "bar",
      "link": "https://www.facebook.com/foo",
      "username": "foo",
      "gender": "female",
      "locale": "ja_JP"
   }
}

これでも単体で取得することもできますが、一気に取得してしまったほうがあとあと便利です。

FacebookページなどのIDを配列に格納(list)して『ids』クエリパラメーターを用いてJSONで取得します。その方法は下記のようにします。

json[List].name;

これをID数分の処理を行うので、下記のようにします。そして、取得した名前まどの情報を配列に格納するという処理です。

jQuery(function($) {
	var list = ['id1', 'id2', 'id3'];
	var api = "https://graph.facebook.com?ids=";
	for(var i = 0; i < list.length; i++) {
		api += list[i];
		if (i != (list.length - 1)) {
			api += ',';
		} else {
			api += "&callback=?"
		}
	}

	$.ajax({
		url : api,
		dataType: "jsonp",
		type: "GET",
		success: function(json, status){

				var picList = [];
				var linkList = [];
				var nameList = [];
				var aboutList = [];
				var descriptionList = [];

				for(var i =0; i < list.length; i++) {
					fbPicList.push('https://graph.facebook.com/' +list[i]+ '/picture?type=large');
					linkList.push('http://www.facebook.com/' +list[i] );
					nameList.push(json[list[i]].name);
					aboutList.push(json[list[i]].about);
					descriptionList.push(json[list[i]].description);
				}
		},
		error : function(){ console.log("error") }
	});

});

これで情報を取得できるので、picList[1]とかdescriptionList[3]というふうに指定するとそれぞれの情報を表示することができます。