浅谈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 相关文章推荐
Aptana调试javascript图解教程
Nov 30 Javascript
javascript 系统文件夹文件操作及参数介绍
Jan 08 Javascript
js之onload事件的一点使用心得
Aug 14 Javascript
浅谈javascript 函数表达式和函数声明的区别
Jan 05 Javascript
JS中的eval 为什么加括号
Apr 13 Javascript
JS如何生成一个不重复的ID的函数
Dec 25 Javascript
JavaScript实现简单的双色球(实例讲解)
Jul 31 Javascript
简单实现jQuery轮播效果
Aug 18 jQuery
React Native开发封装Toast与加载Loading组件示例
Sep 08 Javascript
100行代码实现一个vue分页组功能
Nov 06 Javascript
jQuery实现轮播图效果
Nov 26 jQuery
js实现表格数据搜索
Aug 09 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 Array交叉表实现代码
2010/08/05 PHP
PHP mkdir()无写权限的问题解决方法
2014/06/19 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
如果文字过长,则将过长的部分变成省略号显示
2006/06/26 Javascript
JS Pro-深入面向对象的程序设计之继承的详解
2013/05/07 Javascript
jquery插件validate验证的小例子
2013/05/08 Javascript
js复制到剪切板的实例方法
2013/06/28 Javascript
js 文本滚动效果的实例代码
2013/08/17 Javascript
JavaScript合并两个数组并去除重复项的方法
2015/06/13 Javascript
jquery中val()方法是从最后一个选项往前读取的
2015/09/06 Javascript
JS实现的另类手风琴效果网页内容切换代码
2015/09/08 Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
2015/11/06 Javascript
JavaScript函数内部属性和函数方法实例详解
2016/03/17 Javascript
Bootstrap每天必学之响应式导航、轮播图
2016/04/25 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
2016/06/03 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
2016/12/21 Javascript
vue2.0实战之基础入门(1)
2017/03/27 Javascript
微信小程序--特定区域滚动到顶部时固定的方法
2019/04/28 Javascript
微信小程序网络请求实现过程解析
2019/11/06 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
2020/11/20 Javascript
vue祖孙组件之间的数据传递案例
2020/12/07 Vue.js
Python群发邮件实例代码
2014/01/03 Python
python基于queue和threading实现多线程下载实例
2014/10/08 Python
Python正则表达式匹配中文用法示例
2017/01/17 Python
python实现随机森林random forest的原理及方法
2017/12/21 Python
python+opencv像素的加减和加权操作的实现
2019/07/14 Python
详解Django将秒转换为xx天xx时xx分
2019/09/27 Python
Eclipse配置python默认头过程图解
2020/04/26 Python
Watch Station官方网站:世界一流的手表和智能手表
2020/01/05 全球购物
社区矫正工作方案
2014/06/04 职场文书
2014年服装销售工作总结
2014/11/27 职场文书
西安大雁塔导游词
2015/02/10 职场文书
团委工作总结2015
2015/04/02 职场文书
《1942》观后感
2015/06/08 职场文书
CSS3实现指纹特效代码
2022/03/17 HTML / CSS
VUE递归树形实现多级列表
2022/07/15 Vue.js