浅谈json取值(对象和数组)

前端技术 2023/09/05 JavaScript

按对象取值：

jQuery代码如下

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

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

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

        //第二个标签
        $(\'<ul/>\', {
          \'class\':\'alt\',
          html:items.join(\'\')
        }).appendTo(\'.tags\');
      });
    })(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(\'ajax/test_array.json\', function (data) {
        var items = [];

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

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

        //第二个标签
        $(\'<ul/>\', {
          \'class\':\'alt\',
          html:items.join(\'\')
        }).appendTo(\'.tags\');
      });
    })(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代码如下

 <div class=\"tags\"></div>

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

以上就是小编为大家带来的浅谈json取值(对象和数组)全部内容了，希望大家多多支持phpstudy~

本文地址：https://www.stayed.cn/item/13765

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案