浅谈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 相关文章推荐
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
Dec 05 Javascript
每天一篇javascript学习小结(String对象)
Nov 18 Javascript
js实现卡片式项目管理界面UI设计效果
Dec 08 Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
Mar 14 Javascript
AngularJS  $on、$emit和$broadcast的使用
Sep 05 Javascript
通过jquery实现页面的动画效果(实例代码)
Sep 18 Javascript
react-router实现跳转传值的方法示例
May 27 Javascript
js实现控制文件拖拽并获取拖拽内容功能
Feb 17 Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
Sep 11 Javascript
vue项目强制清除页面缓存的例子
Nov 06 Javascript
jQuery实现滑动开关效果
Aug 02 jQuery
Vue全局事件总线你了解吗
Feb 24 Vue.js
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
单一index.php实现PHP任意层级文件夹遍历(Zjmainstay原创)
2012/07/31 PHP
PHP异常处理浅析
2015/05/12 PHP
php使用Jpgraph绘制饼状图的方法
2015/06/10 PHP
PHP使用token防止表单重复提交的方法
2016/04/07 PHP
PHP微信开发之有道翻译
2016/06/23 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
基于jquery的合并table相同单元格的插件(精简版)
2011/04/05 Javascript
javascript 弹出层组件(升级版)
2011/05/12 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
2015/03/24 Javascript
深入浅析javascript立即执行函数
2015/10/23 Javascript
jQuery+ajax实现文章点赞功能的方法
2015/12/31 Javascript
javascript瀑布流布局实现方法详解
2016/02/17 Javascript
Bootstrap Fileinput文件上传组件用法详解
2016/05/10 Javascript
全面理解JavaScript中的闭包
2016/05/12 Javascript
原生js和jquery分别实现横向导航菜单效果
2016/05/13 Javascript
非常实用的js验证框架实现源码 附原理方法
2016/06/08 Javascript
使用JavaScript获取Request中参数的值方法
2016/09/27 Javascript
JS闭包用法实例分析
2017/03/27 Javascript
jquery简单实现纵向的无缝滚动代码实例
2019/04/01 jQuery
如何使用原生Js实现随机点名详解
2021/01/06 Javascript
Python实现判断一个整数是否为回文数算法示例
2019/03/02 Python
Python django框架应用中实现获取访问者ip地址示例
2019/05/17 Python
numpy concatenate数组拼接方法示例介绍
2019/05/27 Python
用Python写一个自动木马程序
2019/09/17 Python
利用Python绘制Jazz网络图的例子
2019/11/21 Python
CSS3教程(10):CSS3 HSL声明设置颜色
2009/04/02 HTML / CSS
韩国流行时尚女装网站:Dintchina(中文)
2018/07/19 全球购物
Vans澳大利亚官网:购买鞋子、服装及配件
2019/09/05 全球购物
学生打架检讨书1000字
2014/01/16 职场文书
学校节能减排倡议书
2014/05/16 职场文书
依法行政工作汇报
2014/10/28 职场文书
2014年卫生监督工作总结
2014/12/09 职场文书
布达拉宫的导游词
2015/02/02 职场文书
升学宴学生致辞
2015/09/29 职场文书
《鲁滨逊漂流记》之六读后感(4篇)
2019/09/29 职场文书
使用Python开发贪吃蛇游戏 SnakeGame
2022/04/30 Python