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


Posted in Javascript onJune 24, 2016

按对象取值:

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取值(对象和数组)全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
window.open()弹出居中的窗口
Feb 01 Javascript
优化 JavaScript 代码的方法小结
Jul 16 Javascript
关于jquery input textare 事件绑定及用法学习
Apr 03 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
May 07 Javascript
详解AngularJS中的表格使用
Jun 16 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
Oct 26 Javascript
js实现卡片式项目管理界面UI设计效果
Dec 08 Javascript
React-Native左右联动List的示例代码
Sep 21 Javascript
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能
Aug 12 Javascript
Elasticsearch实现复合查询高亮结果功能
Sep 10 Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
Feb 14 Javascript
json对象与数组以及转换成js对象的简单实现方法
Jun 24 #Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
Jun 24 #Javascript
JS控制文本域只读或可写属性的方法
Jun 24 #Javascript
jQuery插件扩展extend的简单实现原理
Jun 24 #Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
Jun 24 #Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
Jun 24 #Javascript
jQuery模仿单选按钮选中效果
Jun 24 #Javascript
You might like
PHP5.0对象模型探索之抽象方法和抽象类
2006/09/05 PHP
php文件打包 下载之使用PHP自带的ZipArchive压缩文件并下载打包好的文件
2012/06/13 PHP
PHP速成大法
2015/01/30 PHP
php实现短信发送代码
2015/07/05 PHP
深入理解Javascript作用域与变量提升
2013/12/09 Javascript
javascript获取URL参数与参数值的示例代码
2013/12/20 Javascript
IE的事件传递-event.cancelBubble示例介绍
2014/01/12 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
2015/01/13 Javascript
jQuery检查事件是否触发的方法
2015/06/26 Javascript
JQuery的attr 与 val区别
2016/06/12 Javascript
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
2017/08/23 jQuery
JS实现浏览上传文件的代码
2017/08/23 Javascript
Vue实现导出excel表格功能
2018/03/30 Javascript
AngularJS 前台分页实现的示例代码
2018/06/07 Javascript
微信小程序url传参写变量的方法
2018/08/09 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
2018/11/19 Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
2019/12/04 Javascript
[03:20]2015国际邀请赛全明星表演赛
2015/08/08 DOTA
python计算最小优先级队列代码分享
2013/12/18 Python
Python struct模块解析
2014/06/12 Python
用PyQt进行Python图形界面的程序的开发的入门指引
2015/04/14 Python
对于Python装饰器使用的一些建议
2015/06/03 Python
基于Python的ModbusTCP客户端实现详解
2019/07/13 Python
python实现统计代码行数的小工具
2019/09/19 Python
wxPython多个窗口的基本结构
2019/11/19 Python
pycharm中使用request和Pytest进行接口测试的方法
2020/07/31 Python
python实现邮件循环自动发件功能
2020/09/11 Python
Ubuntu配置Pytorch on Graph (PoG)环境过程图解
2020/11/19 Python
英国领先的男士美容护发用品公司:Mankind
2016/08/31 全球购物
澳大利亚优惠网站:Deals.com.au
2019/07/02 全球购物
高中毕业生自我鉴定例文
2013/12/29 职场文书
有兼职工作经历的简历自我评价
2014/03/07 职场文书
项目投资建议书
2014/05/16 职场文书
优秀教师先进材料
2014/12/16 职场文书
在Python 中将类对象序列化为JSON
2022/04/06 Python
利用Python实现模拟登录知乎
2022/05/25 Python