首页 > web前端 > js教程 > 正文

JavaScript遍历Json串浏览器输出的结果不统一问题

高洛峰
发布: 2016-12-07 17:19:50
原创
1359人浏览过

没有介绍正文之前先给大家说下json是什么。

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,我们称之为JavaScript对象表示法。使用JSON进行数据传输的优势之一是JSON实际上就是JavaScript。它基于ECMAScript第3版中JavaScript对象字面量语法子集的一种文本格式。这表示可以使用responseText从服务器中检索JSON数据,然后再使用JavaScript的eval()方法将JSON字符串转换成JavaScript对象,那么,使用附加JavaScript就可以很地从该对象中提取数据,而不需要处理DOM。

我们在做项目的时候经常会用到javascript的json。

首先说一下javascript的json串是什么,json串属于javascript的一个对象,有键和值对应的对象。

一般的格式是:

立即学习Java免费学习笔记(深入)”;

a = {
a1 : 1,
a2 : 'abc',
a3 : 'abc',
a4 : [1,2,3],
a5 : function(){console.log(12)}
};
登录后复制

   

Find JSON Path Online
Find JSON Path Online

Easily find JSON paths within JSON objects using our intuitive Json Path Finder

Find JSON Path Online 30
查看详情 Find JSON Path Online

我们读取这个json 的方法是通过for in 循环来遍历;

使用json串的好处是可以事先把数据库中的数据一次性的读取出来存成json的形式,然后通过javascript来读取里边的属于,这样可以大大减少对服务器的请求次数,增加了前台页面的加载效率 。

我们在遍历json的时候会遇到许多问题,我今天遇到的问题是在我们把json串的键值写成数字的情况下,在主流浏览器遍历的时候不会按照我们输出的json的结构先后输出,而是按照数字的从小到大顺序输出。但是ie8以下浏览器会按照我们输出的顺序输出。

例如:

a = {
'1' : 1,
'5' : function(){console.log(12)},
'2' : 'abc',
'4' : [1,2,3],
'3' : {'5' : 'abc', '6' : 'bcd'},
};
登录后复制

   

通过for in循环

for(var i in a){
console.log(a[i]);
}
登录后复制

   

chrome,firefox等浏览器输出:1,abc,Object { 5="abc", 6="bcd"},[1, 2, 3],function();

ie8以及以下浏览器:1,function(),abc,[1, 2, 3],Object { 5="abc", 6="bcd"};

解决这样的问题有两种:

第一:就是把数字的键值改成字符串形式的包括字母或者下划线;

第二 :就是解决ie的兼容性,通过先遍历json然后把键值存入一个数组中,然后再通过数组排序来循环数组取json中的数据。

具体代码:

var arr = [],sortNumber = function (a,b){
return a - b;
};
for(var i in a){
arr[arr.length] = a[i];
arr.sort(sortNumber);
for(var x = 0; x < arr.length; x++) {
console.log(a[arr[x]]);
}
登录后复制

   

浏览器读取的数据就会保持一致了,有个缺点就是这个也不会按照我们输出的json格式输出,只是解决了浏览器的兼容问题。

相关标签:
java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号