浅谈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 相关文章推荐
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
Jun 21 Javascript
js登录弹出层特效
Mar 07 Javascript
jquery 取子节点及当前节点属性值的方法
Aug 24 Javascript
js解决select下拉选不中问题
Oct 14 Javascript
浅析node连接数据库(express+mysql)
Nov 30 Javascript
jQuery中trigger()与bind()用法分析
Dec 18 Javascript
jQuery实现ajax无刷新分页页码控件
Feb 28 Javascript
Require.JS中的几种define定义方式示例
Jun 01 Javascript
JS解决position:sticky的兼容性问题的方法
Oct 17 Javascript
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
vue移动端UI框架实现QQ侧边菜单组件
Mar 09 Javascript
微信小程序云开发如何实现数据库自动备份实现
Aug 16 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
正义联盟的终局之战《天启星战争》将成为DC动画宇宙的最后一部
2020/04/09 欧美动漫
详解php的魔术方法__get()和__set()使用介绍
2012/09/19 PHP
用php制作简单分页(从数据库读取记录)的方法详解
2013/05/04 PHP
php实现留言板功能(会话控制)
2017/05/23 PHP
利用Laravel生成Gravatar头像地址的优雅方法
2017/12/30 PHP
javascript 网页跳转的方法
2008/12/24 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
2014/01/10 Javascript
jQuery满意度星级评价插件特效代码分享
2015/08/19 Javascript
快速学习AngularJs HTTP响应拦截器
2015/12/31 Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
2016/01/26 Javascript
javascript正则表达式之分组概念与用法实例
2016/06/16 Javascript
百度多文件异步上传控件webuploader基本用法解析
2016/11/07 Javascript
常用的js方法合集
2017/03/10 Javascript
nodejs中解决异步嵌套循环和循环嵌套异步的问题
2017/07/12 NodeJs
基于React+Redux的SSR实现方法
2018/07/03 Javascript
微信小程序云开发 生成带参小程序码流程
2019/05/18 Javascript
javascript实现留言板功能
2020/02/08 Javascript
[03:43]2014DOTA2西雅图国际邀请赛 newbee战队巡礼
2014/07/07 DOTA
python连接字符串的方法小结
2015/07/13 Python
python字典的常用操作方法小结
2016/05/16 Python
浅谈python函数之作用域(python3.5)
2017/10/27 Python
python 内置模块详解
2019/01/01 Python
python2爬取百度贴吧指定关键字和图片代码实例
2019/08/14 Python
简单了解python中的f.b.u.r函数
2019/11/02 Python
python3实现raspberry pi(树莓派)4驱小车控制程序
2020/02/12 Python
浅谈在django中使用filter()(即对QuerySet操作)时踩的坑
2020/03/31 Python
浅析Python面向对象编程
2020/07/10 Python
Pandas中两个dataframe的交集和差集的示例代码
2020/12/13 Python
python实现杨辉三角的几种方法代码实例
2021/03/02 Python
七一党建活动方案
2014/01/28 职场文书
政府采购方案
2014/06/12 职场文书
感恩教师节演讲稿
2014/09/03 职场文书
教师岗位职责范本
2015/04/02 职场文书
管理失职检讨书范文
2015/05/05 职场文书
阿凡达观后感
2015/06/10 职场文书
JS代码编译器Monaco使用方法
2021/06/11 Javascript