試試看Json

之前寫了很久的CSS，很久都沒機會碰js，原本就沒多厲害的js又變得更生疏了...，最近正在學json就來稍微介紹一下吧。

Json

http://zh.wikipedia.org/zh-tw/JSON

如果需要看簡介，可以看wiki的介紹，不過要特別注意的就是他的結構。

//物件 （object）
//利用{}所包起來的
{name:value}

//陣列 Array
//利用[]所包起來的
[collection, collection]

如果對js有一咪咪概念的話，相信會對後面的介紹很容易了解。

Jquery

小朋友都愛寫jQuery，因為比較簡單，所以在這就用jQuery介紹json。

http://api.jquery.com/jQuery.getJSON/

如果打開jQuery介紹json的網頁，可以會得到向下面的code，只要把下面的code貼到網頁的script內，再新增一個id="images"的容器，就可以看到載入幾張flicker的圖片。

(function() {
  var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
  $.getJSON( flickerAPI, {
    tags: "mount rainier",
    tagmode: "any",
    format: "json"
  })
    .done(function( data ) {
      $.each( data.items, function( i, item ) {
        $( "<img>" ).attr( "src", item.media.m ).appendTo( "#images" );
        if ( i === 3 ) {
          return false;
        }
      });
    });
})();

<div id="images"></div>

Console.log

利用console.log()可以將javascript的值輸出到browser的開發者工具，藉此來偵錯或是了解值的結構。

如以下範例，在剛剛的script中插入console.log(item)，就可以看到範例所抓取的json有什麼樣的資料，藉此能夠了解如何運用這些資料。

$.each( data.items, function( i, item ) {
  console.log(item)
  $( "<img>" ).attr( "src", item.media.m ).appendTo( "#images" );
  if ( i === 3 ) {
    return false;
}

從他所產生的結果，其實可以了解這範例僅有取用media的圖檔位置而已，其實還有許多值還沒有用到，有興趣的人可以把它其他的值抓出來玩玩看，或許可以讓內容豐富更多~。

撰寫一篇文章需要花上非常多的時間，如果你關閉 Adblock (廣告阻擋器)，我會非常的開心 🤗。 (╭(°A°`)╮))

上一篇：Transform3D 翻牌效果

下一篇： 利用json取得公開資料