浅谈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 相关文章推荐
多广告投放代码 推荐
Nov 13 Javascript
js实现点击注册按钮开始读秒倒计时的小例子
May 11 Javascript
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
Jun 17 Javascript
bootstrap模态框垂直居中效果
Dec 03 Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
May 19 Javascript
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
JavaScript实现简单的文本逐字打印效果示例
Apr 12 Javascript
Mint UI组件库CheckList使用及踩坑总结
Dec 20 Javascript
VUE中使用MUI方法
Feb 12 Javascript
100行代码实现vue表单校验功能(小白自编)
Nov 19 Javascript
Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
Jan 16 Javascript
Vue 事件的$event参数=事件的值案例
Jan 29 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
仿AS3实现PHP 事件机制实现代码
2011/01/27 PHP
php常用的工具开发整理
2019/09/26 PHP
dwr spring的集成实现代码
2009/03/22 Javascript
JQuery 学习笔记 element属性控制
2009/07/23 Javascript
JQuery Tips(2) 关于$()包装集你不知道的
2009/12/14 Javascript
最佳JS代码编写的14条技巧
2011/01/09 Javascript
JavaScript中判断对象类型的几种方法总结
2013/11/11 Javascript
javascript 弹出的窗口返回值给父窗口具体实现
2013/11/23 Javascript
jQuery前端分页示例分享
2015/02/10 Javascript
JS在onclientclick里如何控制onclick的执行
2016/05/30 Javascript
EasyUI学习之DataGird分页显示数据
2016/12/29 Javascript
从零学习node.js之利用express搭建简易论坛(七)
2017/02/25 Javascript
详解vue的数据binding绑定原理
2017/04/12 Javascript
Angular 4.x 路由快速入门学习
2017/05/03 Javascript
JS验证全角与半角及相互转化的介绍
2017/05/18 Javascript
基于vue2框架的机器人自动回复mini-project实例代码
2017/06/13 Javascript
vue Tab切换以及缓存页面处理的几种方式
2019/11/05 Javascript
vuex入门最详细整理
2020/03/04 Javascript
JS异步宏队列与微队列原理区别详解
2020/07/02 Javascript
[28:57]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/16 DOTA
Python中用Ctrl+C终止多线程程序的问题解决
2013/03/30 Python
使用Python实现下载网易云音乐的高清MV
2015/03/16 Python
Python解析excel文件存入sqlite数据库的方法
2016/11/15 Python
对python 中class与变量的使用方法详解
2019/06/26 Python
如何基于Python制作有道翻译小工具
2019/12/16 Python
pandas将list数据拆分成行或列的实现
2020/12/13 Python
意大利奢侈品网站:Italist
2016/08/23 全球购物
埃弗顿足球俱乐部官方网上商店:Everton Direct
2018/01/13 全球购物
英国二手iPhone、音乐、电影和游戏商店:musicMagpie
2018/10/26 全球购物
旅游文化节策划方案
2014/06/06 职场文书
党员学习新党章思想汇报
2014/10/25 职场文书
实习单位指导教师评语
2014/12/30 职场文书
酒店收银员岗位职责
2015/04/07 职场文书
反腐倡廉影片观后感
2015/06/08 职场文书
Spring中bean的生命周期之getSingleton方法
2021/06/30 Java/Android
Spring Cloud Gateway去掉url前缀
2021/07/15 Java/Android