浅谈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 相关文章推荐
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
Jun 28 Javascript
JavaScript通过RegExp实现客户端验证处理程序
May 07 Javascript
js中生成map对象的方法
Jan 09 Javascript
js输出阴历、阳历、年份、月份、周示例代码
Jan 29 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
Feb 13 Javascript
JavaScript中SetInterval与setTimeout的用法详解
Nov 10 Javascript
10行原生JS实现文字无缝滚动(超简单)
Jan 02 Javascript
js正则取值的结果数组调试方法
Oct 10 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
Oct 12 Javascript
深入理解JS异步编程-Promise
Jun 03 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
Feb 27 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 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
PHP页面输出时js设置input框的选中值
2016/09/30 PHP
php生成图片缩略图功能示例
2017/02/22 PHP
php常用字符串长度函数strlen()与mb_strlen()用法实例分析
2019/06/25 PHP
PHP实现单条sql执行多个数据的insert语句方法
2019/10/11 PHP
javascript基础的动画教程,直观易懂
2007/01/10 Javascript
jQuery随机切换图片的小例子
2013/04/18 Javascript
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
2014/06/24 Javascript
基于jQuery实现最基本的淡入淡出效果实例
2015/02/02 Javascript
通用javascript代码判断版本号是否在版本范围之间
2015/11/29 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
2016/03/01 Javascript
ASP.NET jquery ajax传递参数的实例
2016/11/02 Javascript
详解Angualr 组件间通信
2017/01/21 Javascript
BootstrapTable请求数据时设置超时(timeout)的方法
2017/01/22 Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
2018/02/05 Javascript
layDate插件设置开始和结束时间
2018/11/15 Javascript
layer弹出层自适应高度,垂直水平居中的实现
2019/09/16 Javascript
基于js实现抽红包并分配代码实例
2019/09/19 Javascript
[51:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/30 DOTA
Python中的map()函数和reduce()函数的用法
2015/04/27 Python
python读取文本绘制动态速度曲线
2018/06/21 Python
浅谈Python traceback的优雅处理
2018/08/31 Python
Python设计模式之建造者模式实例详解
2019/01/17 Python
Django ORM 常用字段与不常用字段汇总
2019/08/09 Python
Python 实现训练集、测试集随机划分
2020/01/08 Python
python中plt.imshow与cv2.imshow显示颜色问题
2020/07/16 Python
DKNY品牌官网:纽约大都会时尚风格
2016/10/20 全球购物
美国最大的网上冲印店:Shutterfly
2017/01/01 全球购物
董事长秘书岗位职责
2013/11/29 职场文书
房屋继承公证书
2014/04/10 职场文书
公司授权委托书格式范文
2014/10/02 职场文书
诉讼代理人授权委托书
2014/10/11 职场文书
2015年导购员工作总结
2015/04/25 职场文书
2015年领导班子工作总结
2015/05/23 职场文书
地雷战观后感
2015/06/09 职场文书
校园安全教育心得体会
2016/01/15 职场文书
golang实现浏览器导出excel文件功能
2022/03/25 Golang