浅谈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中方便增删改cookie的一个类
Oct 11 Javascript
JavaScript控制Session操作方法
Jan 17 Javascript
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
Jun 24 Javascript
关于js遍历表格的实例
Jul 10 Javascript
JS比较2个日期间隔的示例代码
Apr 15 Javascript
原生JavaScript生成GUID的实现示例
Sep 05 Javascript
jQuery中unbind()方法用法实例
Jan 19 Javascript
JavaScript中实现Map的示例代码
Sep 09 Javascript
酷炫jQuery全屏3D焦点图动画效果
Mar 22 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
Sep 17 Javascript
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 jQuery
layui实现给某一列加点击事件
Oct 26 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 获取文件权限函数介绍
2013/07/11 PHP
分享php多功能图片处理类
2016/05/15 PHP
Laravel+jQuery实现AJAX分页效果
2016/09/14 PHP
php版微信公众平台接口开发之智能回复开发教程
2016/09/22 PHP
php实时倒计时功能实现方法详解
2017/02/27 PHP
原生JS实现表单checkbook获取已选择的值
2013/07/21 Javascript
js Date概念详细介绍
2013/11/22 Javascript
基于promise.js实现nodejs的promises库
2014/07/06 NodeJs
JavaScript实现N皇后问题算法谜题解答
2014/12/29 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
2015/12/24 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
2016/06/13 Javascript
React根据宽度自适应高度的示例代码
2017/10/11 Javascript
Vue 之孙组件向爷组件通信的实现
2019/04/23 Javascript
微信小程序如何实现五星评价功能
2019/10/15 Javascript
vue axios请求成功却进入catch的原因分析
2020/09/08 Javascript
js canvas实现俄罗斯方块
2020/10/11 Javascript
Nodejs + sequelize 实现增删改查操作
2020/11/07 NodeJs
50行代码实现贪吃蛇(具体思路及代码)
2013/04/27 Python
scrapy自定义pipeline类实现将采集数据保存到mongodb的方法
2015/04/16 Python
利用python爬取散文网的文章实例教程
2017/06/18 Python
Python Matplotlib实现三维数据的散点图绘制
2019/03/19 Python
Windows系统Python直接调用C++ DLL的方法
2019/08/01 Python
python实现密码验证合格程序的思路详解
2020/06/01 Python
Python数据模型与Python对象模型的相关总结
2021/01/26 Python
pip install命令安装扩展库整理
2021/03/02 Python
HTML5中的Scoped属性使用实例
2014/04/23 HTML / CSS
html5 Canvas实现图片旋转的示例
2018/01/15 HTML / CSS
通信工程专业个人找工作求职信范文
2013/09/21 职场文书
物流仓管员岗位职责
2013/12/04 职场文书
《会变的花树叶》教学反思
2014/02/10 职场文书
英语教学随笔感言
2014/02/20 职场文书
电子银行营销方案
2014/02/22 职场文书
商超业务员岗位职责
2014/03/12 职场文书
说好普通话圆梦你我他演讲稿
2014/09/21 职场文书
2016春季幼儿园小班开学寄语
2015/12/03 职场文书
sql字段解析器的实现示例
2021/06/23 SQL Server