浅谈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 相关文章推荐
关于实现代码语法标亮 dp.SyntaxHighlighter
Feb 02 Javascript
JS中把字符转成ASCII值的函数示例代码
Nov 21 Javascript
Jquery焦点图实例代码
Nov 25 Javascript
jQuery读取XML文件内容的方法
Mar 09 Javascript
jQuery实现html元素拖拽
Jul 21 Javascript
JavaScript仿商城实现图片广告轮播实例代码
Feb 06 Javascript
简单封装js的dom查询实例代码
Jul 08 Javascript
JavaScript计时器用法分析【setTimeout和clearTimeout】
Jan 18 Javascript
AngularJS 仿微信图片手势缩放的实例
Sep 28 Javascript
Vue可自定义tab组件用法实例
Oct 24 Javascript
Vue为什么要谨慎使用$attrs与$listeners
Aug 27 Javascript
微信小程序实现锚点跳转
Nov 23 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输出控制功能在简繁体转换中的应用
2006/10/09 PHP
微信支付开发维权通知实例
2016/07/12 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
js中cookie的使用详细分析
2008/05/28 Javascript
jQuery帮助之筛选查找 children([expr])
2011/01/31 Javascript
jQuery实现复选框成对选择及对应取消的方法
2015/03/03 Javascript
JavaScript简单修改窗口大小的方法
2015/08/03 Javascript
Javascript如何判断数据类型和数组类型
2016/06/22 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
2016/07/25 Javascript
vue制作加载更多功能的正确打开方式
2016/10/12 Javascript
JavaScript、C# URL编码、解码总结
2017/01/21 Javascript
js获取当前周、上一周、下一周日期
2017/03/19 Javascript
浅析 NodeJs 的几种文件路径
2017/06/07 NodeJs
webpack file-loader和url-loader的区别
2019/01/15 Javascript
Node.js Event Loop各阶段讲解
2019/03/08 Javascript
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
2020/10/09 Javascript
使用webpack和rollup打包组件库的方法
2021/02/25 Javascript
[48:00]完美世界DOTA2联赛循环赛 Forest vs Inki BO2第二场 11.04
2020/11/04 DOTA
python利用拉链法实现字典方法示例
2017/03/25 Python
python数据结构之链表的实例讲解
2017/07/25 Python
Python编程实现粒子群算法(PSO)详解
2017/11/13 Python
django manage.py扩展自定义命令方法
2018/05/27 Python
PyQt5 对图片进行缩放的实例
2019/06/18 Python
python集合是否可变总结
2019/06/20 Python
Python-接口开发入门解析
2019/08/01 Python
Python 中的 global 标识对变量作用域的影响
2019/08/12 Python
英国HYPE双肩包官网:英国本土时尚潮牌
2018/09/26 全球购物
工艺员岗位职责
2014/02/11 职场文书
进口业务员岗位职责
2014/04/06 职场文书
高中综合实践活动总结
2014/07/07 职场文书
法人授权委托书样本
2014/09/19 职场文书
班子查摆四风个人对照检查材料思想汇报
2014/10/04 职场文书
自主招生自荐信格式
2015/03/04 职场文书
一文帮你理解PReact10.5.13源码
2021/04/03 Javascript
Docker官方工具docker-registry案例演示
2022/04/13 Servers
图神经网络GNN算法
2022/05/11 Python