浅谈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 文章截取部分无损html显示实现代码
May 04 Javascript
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
Apr 20 Javascript
js自执行函数的几种不同写法的比较
Aug 16 Javascript
jQuery实现的五子棋游戏实例
Jun 13 Javascript
让JavaScript中setTimeout支持链式操作的方法
Jun 19 Javascript
JS判断页面是否出现滚动条的方法
Jul 17 Javascript
小白谈谈对JS原型链的理解
May 03 Javascript
深入解析JavaScript中的arguments对象
Jun 12 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
Dec 26 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
layer.open 获取不到表单信息的解决方法
Sep 26 Javascript
vue自定义正在加载动画的例子
Nov 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
php实现mysql数据库操作类分享
2014/02/14 PHP
wordpress安装过程中遇到中文乱码的处理方法
2015/04/21 PHP
一个完整的php文件上传类实例讲解
2015/10/27 PHP
深入理解 PHP7 中全新的 zval 容器和引用计数机制
2018/10/15 PHP
Prototype使用指南之enumerable.js
2007/01/10 Javascript
用jQuery技术实现Tab页界面之二
2009/09/21 Javascript
改善用户体验的五款jQuery插件分享
2011/05/22 Javascript
JQuery实现图片轮播效果
2015/09/15 Javascript
javascript每日必学之封装
2016/02/23 Javascript
Angular设置title信息解决SEO方面存在问题
2016/08/19 Javascript
pc加载更多功能和移动端下拉刷新加载数据
2016/11/07 Javascript
jQuery实现6位数字密码输入框
2016/12/29 Javascript
JS中使用正则表达式g模式和非g模式的区别
2017/04/01 Javascript
es6学习笔记之Async函数基本教程
2017/05/11 Javascript
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
2017/05/12 Javascript
详解vue项目的构建,打包,发布全过程
2017/11/23 Javascript
详解vue-admin和后端(flask)分离结合的例子
2018/02/12 Javascript
实例分析vue循环列表动态数据的处理方法
2018/09/28 Javascript
Vue 动态添加路由及生成菜单的方法示例
2019/06/20 Javascript
微信小程序自定义底部弹出框功能
2020/11/18 Javascript
Python HTMLParser模块解析html获取url实例
2015/04/08 Python
Python中的fileinput模块的简单实用示例
2015/07/09 Python
Python实现的网页截图功能【PyQt4与selenium组件】
2018/07/12 Python
Python中的CSV文件使用&quot;with&quot;语句的方式详解
2018/10/16 Python
Pytorch之view及view_as使用详解
2019/12/31 Python
python判断变量是否为int、字符串、列表、元组、字典的方法详解
2020/02/13 Python
请解释virtual关键字的含义
2015/06/17 面试题
中班中秋节活动反思
2014/02/18 职场文书
联欢晚会主持词
2014/03/25 职场文书
大学生赌博检讨书
2014/09/22 职场文书
试用期工作表现自我评价
2015/03/06 职场文书
汽车质检员岗位职责
2015/04/08 职场文书
入党转正介绍人意见
2015/06/03 职场文书
和领导吃饭祝酒词
2015/08/11 职场文书
志愿者服务宣传标语口号
2015/12/26 职场文书
2019年健身俱乐部的创业计划书
2019/08/26 职场文书