浅谈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 相关文章推荐
extjs grid取到数据而不显示的解决
Dec 29 Javascript
jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
Jun 28 Javascript
jquery datatable后台封装数据示例代码
Aug 07 Javascript
javascript实现跨域的方法汇总
Jun 25 Javascript
jQuery实用技巧必备(上)
Nov 02 Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
Dec 17 Javascript
利用Angular+Angular-Ui实现分页(代码加简单)
Mar 10 Javascript
Vue上传组件vue Simple Uploader的用法示例
Aug 25 Javascript
Angular4学习之Angular CLI的安装与使用教程
Jan 04 Javascript
浅谈layui 表单元素的选中问题
Oct 25 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
使用react+redux实现计数器功能及遇到问题
Jun 02 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
php实现的DateDiff和DateAdd时间函数代码分享
2014/08/16 PHP
PHP附件下载中文名称乱码的解决方法
2015/12/17 PHP
PHP实现将标点符号正则替换为空格的方法
2017/08/09 PHP
PHP使用PDO、mysqli扩展实现与数据库交互操作详解
2019/07/20 PHP
web基于浏览器的本地存储方法应用
2012/11/27 Javascript
jQuery之日期选择器的深入解析
2013/06/19 Javascript
JS+CSS设置img在DIV中只显示Img垂直居中的部分
2013/10/24 Javascript
jQuery中live()方法用法实例
2015/01/19 Javascript
JS基于面向对象实现的放烟花效果
2015/05/07 Javascript
jQuery实现的简单百分比进度条效果示例
2016/08/01 Javascript
解决layui页面按钮点击无反应,也不报错的问题
2019/09/29 Javascript
基于javascript原生判断DOM是否加载完毕
2020/10/14 Javascript
vue+element实现动态加载表单
2020/12/13 Vue.js
Python中使用urllib2防止302跳转的代码例子
2014/07/07 Python
python 地图经纬度转换、纠偏的实例代码
2018/08/06 Python
pyqt5利用pyqtDesigner实现登录界面
2019/03/28 Python
Python简单处理坐标排序问题示例
2019/07/11 Python
浅谈PyQt5中异步刷新UI和Python多线程总结
2019/12/13 Python
高考考python编程是真的吗
2020/07/20 Python
纯CSS3实现自定义Tooltip边框涂鸦风格的教程
2014/11/05 HTML / CSS
德国大型的家具商店:Pharao24.de
2016/10/02 全球购物
施华洛世奇西班牙官网:SWAROVSKI西班牙
2019/06/06 全球购物
端口镜像是怎么实现的
2014/03/25 面试题
几个Linux面试题笔试题
2012/12/01 面试题
县优秀教师事迹材料
2014/01/31 职场文书
汽车维修求职信
2014/06/15 职场文书
管理工程专业求职信
2014/08/10 职场文书
校园安全广播稿范文
2014/09/25 职场文书
岳庙导游词
2015/02/04 职场文书
学生会辞职信
2015/03/02 职场文书
保研推荐信范文
2015/03/25 职场文书
TensorFlow的自动求导原理分析
2021/05/26 Python
python中if和elif的区别介绍
2021/11/07 Python
python工具dtreeviz决策树可视化和模型可解释性
2022/03/03 Python
AndroidStudio图片压缩工具ImgCompressPlugin使用实例
2022/08/05 Java/Android
python 镜像环境搭建总结
2022/09/23 Python