浅谈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 相关文章推荐
Prototype 学习 Prototype对象
Jul 12 Javascript
js判断屏幕分辨率的代码
Jul 16 Javascript
基于jquery的文字向上跑动类似跑马灯的效果
Sep 22 Javascript
详解JavaScript中的客户端消息框架设计原理
Jun 24 Javascript
11种ASP连接数据库的方法
Sep 18 Javascript
JavaScript 数组的深度复制解析
Nov 02 Javascript
ES6中module模块化开发实例浅析
Apr 06 Javascript
webpack热模块替换(HMR)/热更新的方法
Apr 05 Javascript
手把手教你写一个微信小程序(推荐)
Oct 17 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
vue router总结 $router和$route及router与 router与route区别
Jul 05 Javascript
angular *Ngif else用法详解
Dec 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
IIS下PHP的三种配置方式对比
2014/11/20 PHP
PHP简单实现断点续传下载的方法
2015/09/25 PHP
php cli配置文件问题分析
2015/10/15 PHP
Yii2 批量插入、更新数据实例
2017/03/15 PHP
php session的应用详细介绍
2017/03/22 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
新鲜出炉的js tips提示效果
2011/04/03 Javascript
JavaScript lastIndexOf方法入门实例(计算指定字符在字符串中最后一次出现的位置)
2014/10/17 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
2016/06/01 Javascript
JQuery DIV 动态隐藏和显示的方法
2016/06/23 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
2016/09/18 Javascript
jQuery加密密码到cookie的实现代码
2017/04/18 jQuery
JS验证码实现代码
2017/09/14 Javascript
JavaScript实现精美个性导航栏筋斗云效果
2017/10/29 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
2017/11/01 Javascript
详解vue2.0 资源文件assets和static的区别
2018/11/27 Javascript
LayUi数据表格自定义赋值方式
2019/10/26 Javascript
vue页面更新patch的实现示例
2020/03/25 Javascript
[03:09]2014DOTA2国际邀请赛 赛场上的美丽风景线 中国Coser也爱DOTA2
2014/07/20 DOTA
在Python程序中实现分布式进程的教程
2015/04/28 Python
python中nan与inf转为特定数字方法示例
2017/05/11 Python
Python3实现的简单三级菜单功能示例
2019/03/12 Python
Python any()函数的使用方法
2019/10/28 Python
解决python3中os.popen()出错的问题
2020/11/19 Python
JAVA软件工程师测试题
2014/07/25 面试题
办公室人员先进事迹
2014/01/27 职场文书
社区工作者感言
2014/03/02 职场文书
俞敏洪北大演讲稿
2014/05/22 职场文书
纪律教育月活动总结
2014/08/26 职场文书
庆元旦演讲稿
2014/09/15 职场文书
学校2016年圣诞节活动总结
2016/03/31 职场文书
mysql字符串截取函数小结
2021/04/05 MySQL
关于CSS浮动与取消浮动的问题
2021/06/28 HTML / CSS
vue项目多环境配置(.env)的实现
2021/07/21 Vue.js
Python3使用Qt5来实现简易的五子棋小游戏
2022/05/02 Python
MySQL中的全表扫描和索引树扫描
2022/05/15 MySQL