浅谈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获取/更改文本框的值的实例代码
Aug 02 Javascript
javascript数字时钟示例分享
Apr 23 Javascript
JavaScript中的eval()函数使用介绍
Dec 31 Javascript
jQuery性能优化技巧分析
Feb 20 Javascript
JS基于Ajax实现的网页Loading效果代码
Oct 27 Javascript
以JavaScript来实现WordPress中的二级导航菜单的方法
Dec 14 Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
Jun 24 Javascript
jquery动态创建div与input的实例代码
Oct 12 Javascript
基于Marquee.js插件实现的跑马灯效果示例
Jan 25 Javascript
Javascript实现页面滚动时导航智能定位
May 06 Javascript
解决npm安装Electron缓慢网络超时导致失败的问题
Feb 06 Javascript
vue实现简单加法计算器
Oct 22 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
站长助手-网站web在线管理程序 v1.0 下载
2007/05/12 PHP
php5.3 废弃函数小结
2010/05/16 PHP
Symfony2框架学习笔记之HTTP Cache用法详解
2016/03/18 PHP
PHP vsprintf()函数格式化字符串操作原理解析
2020/07/14 PHP
Centos7.7 64位利用本地完整安装包安装lnmp/lamp套件教程
2021/03/09 Servers
javascript iframe编程相关代码
2009/12/28 Javascript
为什么要在引入的css或者js文件后面加参数的详细讲解
2013/05/03 Javascript
js 判断控件获得焦点的示例代码
2014/03/04 Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
2014/04/04 Javascript
网站基于flash实现的Banner图切换效果代码
2014/10/14 Javascript
Javascript基础教程之break和continue语句
2015/01/18 Javascript
Javascript核心读书有感之词法结构
2015/02/01 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
2016/06/20 Javascript
EasyUI在表单提交之前进行验证的实例代码
2016/06/24 Javascript
js中判断变量类型函数typeof的用法总结
2016/08/09 Javascript
bootstrap中使用google prettify让代码高亮的方法
2016/10/21 Javascript
Bootstrap表格使用方法详解
2017/02/17 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
2017/03/03 Javascript
JavaScript函数表达式详解及实例
2017/05/05 Javascript
浅谈Vue.js路由管理器 Vue Router
2018/08/16 Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
2018/09/02 Javascript
vue之a-table中实现清空选中的数据
2019/11/07 Javascript
vue prop属性传值与传引用示例
2019/11/13 Javascript
Python 查看文件的编码格式方法
2017/12/21 Python
python 爬虫一键爬取 淘宝天猫宝贝页面主图颜色图和详情图的教程
2018/05/22 Python
Python3中lambda表达式与函数式编程讲解
2019/01/14 Python
django 框架实现的用户注册、登录、退出功能示例
2019/11/28 Python
迪斯尼商品官方网站:ShopDisney
2016/08/01 全球购物
eBay法国购物网站:eBay.fr
2017/10/21 全球购物
Skyscanner波兰:廉价航班
2017/11/07 全球购物
物流创业计划书
2014/02/01 职场文书
投资协议书范本
2014/04/21 职场文书
篮球比赛口号
2014/06/10 职场文书
商务代表岗位职责
2015/02/15 职场文书
MySQL 1130异常,无法远程登录解决方案详解
2021/08/23 MySQL
JavaScript执行机制详细介绍
2021/12/06 Javascript