首頁 > web前端 > js教程 > 淺談json的物件和陣列取值

淺談json的物件和陣列取值

怪我咯
發布: 2017-03-31 09:24:23
原創
2123 人瀏覽過

物件取值:

#jQuery程式碼如下

(function ($) {
      $.getJSON('ajax/test.json', function (data) {
        var items = [];

        $.each(data.comments, function (key, val) {
          items.push(&#39;<li class="&#39; + &#39;tag&#39; + val.class + &#39;">&#39; + &#39;<a href="#">&#39; + val.content + &#39;</a>&#39; + &#39;</li>&#39;);
        });

        //第一个标签
        $(&#39;<ul/>&#39;, {
          &#39;class&#39;:&#39;&#39;,
          html:items.join(&#39;&#39;)
        }).appendTo(&#39;.tags&#39;);

        //第二个标签
        $(&#39;<ul/>&#39;, {
          &#39;class&#39;:&#39;alt&#39;,
          html:items.join(&#39;&#39;)
        }).appendTo(&#39;.tags&#39;);
      });
    })(jQuery);
登入後複製



json程式碼如下

{"comments":[
  {
    "class":"1",
    "content":"Lorem ipsum"
  },
  {
    "class":"2",
    "content":"Dolor sit amet"
  },
  {
    "class":"3",
    "content":"Consectetur adipiscing elit"
  },
  {
    "class":"2",
    "content":"Proin"
  },
  {
    "class":"4",
    "content":"Sagittis libero"
  },
  {
    "class":"1",
    "content":"Aliquet augue"
  },
  {
    "class":"1",
    "content":"Quisque dui lacus"
  },
  {
    "class":"5",
    "content":"Consequat"
  },
  {
    "class":"2",
    "content":"Dictum non"
  },
  {
    "class":"1",
    "content":"Venenatis et tortor"
  },
  {
    "class":"3",
    "content":"Suspendisse mauris"
  },
  {
    "class":"4",
    "content":"In accumsan"
  },
  {
    "class":"1",
    "content":"Egestas neque"
  },
  {
    "class":"5",
    "content":"Mauris eget felis"
  },
  {
    "class":"1",
    "content":"Suspendisse"
  },
  {
    "class":"2",
    "content":"condimentum eleifend nulla"
  }
]}
登入後複製

陣列取值:

jQuery程式碼如下

(function ($) {
      $.getJSON(&#39;ajax/test_array.json&#39;, function (data) {
        var items = [];

        $.each(data.comments, function (key, val) {
          items.push(&#39;<li class="&#39; + &#39;tag&#39; + val[0] + &#39;">&#39; + &#39;<a href="#">&#39; + val[1] + &#39;</a>&#39; + &#39;</li>&#39;);
        });

        //第一个标签
        $(&#39;<ul/>&#39;, {
          &#39;class&#39;:&#39;&#39;,
          html:items.join(&#39;&#39;)
        }).appendTo(&#39;.tags&#39;);

        //第二个标签
        $(&#39;<ul/>&#39;, {
          &#39;class&#39;:&#39;alt&#39;,
          html:items.join(&#39;&#39;)
        }).appendTo(&#39;.tags&#39;);
      });
    })(jQuery);
登入後複製

json程式碼如下

{"comments":[
  ["1", "Lorem ipsum"],
  ["2", "Dolor sit amet"],
  ["3", "Consectetur adipiscing elit"],
  ["2", "Proin"],
  ["4", "Sagittis libero"],
  ["1", "Aliquet augue"],
  ["1", "Quisque dui lacus"],
  ["5", "Consequat"],
  ["2", "Dictum non"],
  ["1", "Venenatis et tortor"],
  ["3", "Suspendisse mauris"],
  ["4", "In accumsan"],
  ["1", "Egestas neque"],
  ["5", "Mauris eget felis"],
  ["1", "Suspendisse"],
  ["2", "condimentum eleifend nulla"]
]}
登入後複製

共用的HTML程式碼如下

<p class="tags"></p>
登入後複製

明顯可以看出按數組取值的資料量會小很多


以上是淺談json的物件和陣列取值的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板