浅谈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 相关文章推荐
JavaScript QueryString解析类代码
Jan 17 Javascript
ExtJs grid行 右键菜单的两种方法
Jun 19 Javascript
js中将字符串转换成json的三种方式
Jan 12 Javascript
Jquery attr()方法 属性赋值和属性获取详解
Apr 15 Javascript
使用jQuery实现Web页面换肤功能的要点解析
May 12 Javascript
JavaScript中的跨浏览器事件操作的基本方法整理
May 20 Javascript
js输入框使用正则表达式校验输入内容的实例
Feb 12 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
Mar 17 Javascript
Bootstrap警告(Alerts)的实现方法
Mar 22 Javascript
vue组件生命周期详解
Nov 07 Javascript
解决在vue项目中webpack打包后字体不生效的问题
Sep 01 Javascript
js实现鼠标拖拽div左右滑动
Jan 15 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配置文件中最常用四个ini函数
2007/03/19 PHP
php中批量删除Mysql中相同前缀的数据表的代码
2011/07/01 PHP
PHP中extract()函数的妙用分析
2012/07/11 PHP
ThinkPHP多语言支持与多模板支持概述
2014/08/22 PHP
PHP中绘制图像的一些函数总结
2014/11/19 PHP
Gambit vs ForZe BO3 第三场 2.13
2021/03/10 DOTA
JS创建类和对象的两种不同方式
2014/08/08 Javascript
js实现数组转换成json
2015/06/26 Javascript
详解angular ui-grid之过滤器设置
2017/06/07 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
2017/09/11 Javascript
vue使用keep-alive实现数据缓存不刷新
2017/10/21 Javascript
vue 的keep-alive缓存功能的实现
2018/03/22 Javascript
微信小程序实现省市区三级地址选择
2020/06/21 Javascript
Angular封装搜索框组件操作示例
2019/04/25 Javascript
[01:06:07]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS CIS
2014/05/22 DOTA
Python使用正则表达式实现文本替换的方法
2017/04/18 Python
python正则中最短匹配实现代码
2018/01/16 Python
Python查看微信撤回消息代码
2018/06/07 Python
selenium+python自动化测试之页面元素定位
2019/01/23 Python
Python实现合并两个有序链表的方法示例
2019/01/31 Python
Python3实现定时任务的四种方式
2019/06/03 Python
python增加图像对比度的方法
2019/07/12 Python
浅析Python+OpenCV使用摄像头追踪人脸面部血液变化实现脉搏评估
2019/10/17 Python
Python搭建代理IP池实现获取IP的方法
2019/10/27 Python
Python 自由定制表格的实现示例
2020/03/20 Python
java关于string最常出现的面试题整理
2021/01/18 Python
捷克建筑材料网上商店:DEK.cz
2021/03/06 全球购物
软件工程专业推荐信
2013/10/28 职场文书
节约电力资源的建议书
2014/03/12 职场文书
学雷锋月活动总结
2014/04/25 职场文书
护理医院见习报告
2014/11/03 职场文书
天堂的孩子观后感
2015/06/11 职场文书
解决mysql模糊查询索引失效问题的几种方法
2021/06/18 MySQL
mybatis 解决从列名到属性名的自动映射失败问题
2021/06/30 Java/Android
Nginx 路由转发和反向代理location配置实现
2021/11/11 Servers
Win11安全功能升级:内置防网络钓鱼功能
2022/04/08 数码科技