Rumah > hujung hadapan web > tutorial js > 浅谈json的对象和数组取值

浅谈json的对象和数组取值

怪我咯
Lepaskan: 2017-03-31 09:24:23
asal
2122 orang telah melayarinya

对象取值:

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);
Salin selepas log masuk



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"
  }
]}
Salin selepas log masuk

数组取值:

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);
Salin selepas log masuk

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"]
]}
Salin selepas log masuk

共用的HTML代码如下

<p class="tags"></p>
Salin selepas log masuk

明显可以看出按数组取值的数据量会小很多


Atas ialah kandungan terperinci 浅谈json的对象和数组取值. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan