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

没有介绍正文之前先给大家说下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的一个对象,有键和值对应的对象。

一般的格式是:

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

我们读取这个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格式输出,只是解决了浏览器的兼容问题。

以上所述是小编给大家介绍的JavaScript遍历Json串浏览器输出的结果不统一问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索javascript
, 遍历
json
javascript 遍历json、javascript 遍历数组、javascript 遍历对象、javascript map 遍历、javascript 遍历,以便于您获取更多的相关知识。

时间: 2024-08-29 11:41:04

JavaScript遍历Json串浏览器输出的结果不统一问题_javascript技巧的相关文章

JavaScript组成、引入、输出、运算符基础知识讲解_javascript技巧

javascript简介: JavaScript 是属于网络的脚本语言! JavaScript 被数百万计的网页用来改进设计.验证表单.检测浏览器.创建cookies,以及更多的应用. JavaScript 是因特网上最流行的脚本语言. 下文重点给大家介绍js组成,引入,输出,运算符基础知识,具体详解如下所示: JavaScript组成: ECMAscript 浏览器对象模型 BOM 文档对象模型 DOM // ecmascript bom dom dom (文档对象模型) 用来访问和操纵htm

在Javascript操作JSON对象,增加 删除 修改的简单实现_javascript技巧

在Javascript操作JSON对象,增加删除修改全有的,详情见代码 <script type="text/javascript"> var jsonObj2 = { teacher: [ { name: "jordan", sex: "m", age: "40" }, { name: "bryant", sex: "m", age: "28" }, {

javascript Range对象跨浏览器常用操作第1/2页_javascript技巧

开发的功能主要涉及即时代码着色(CodeColoring)和语法提示(CodeHints)功能,稍后会总结功能开发中问题或提供源码. 以下是个人对Range对象的了解和常用操作的实例和总结: Range对象 Range对象表示文档的连续范围区域,如用户在浏览器窗口中用鼠标拖动选中的区域. dom标准Range对象 http://www.w3school.com.cn/xmldom/dom_range.asp 在ie中使用TextRange对象 http://www.hbcms.com/main/

JavaScript 全面解析各种浏览器网页中的JS 执行顺序_javascript技巧

我们知道javaScript是一种解释型语言,他的执行是自上而下,但是各个浏览器对于至上而下的理解是有细微差别的,而代码的上下游也就是程序流又对于程序正确至关重要,所以我觉得有必要深入理解多个js块儿的执行顺序. 首先得知道有多少方法能把javaScript加入到页面中呢?常见下述的前2种,其实还有更多. 1.页面中直接引入外部js文件:<script src="my.js"></script> 2.页面中直接写如js片段<script>alert(

JavaScript获取网页、浏览器、屏幕高度和宽度汇总_javascript技巧

经常发现在写JavaScript的时候,都需要用到网页.浏览器或屏幕的高度和宽度来解决布局定位的问题,时常前用后忘,要不就是在网上search,干脆自己总结一下,这样也方便再次使用,省时省力. 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的

javascript实现的LI列表输出,隔行同色的代码_javascript技巧

这个是第1行的文字,大家看清楚了 这个是第2行的文字,大家看清楚了 这个是第3行的文字,大家看清楚了 这个是第4行的文字,大家看清楚了 这个是第5行的文字,大家看清楚了 这个是第6行的文字,大家看清楚了 这个是第7行的文字,大家看清楚了 这个是第8行的文字,大家看清楚了 这个是第9行的文字,大家看清楚了

C# 遍历json串

问题描述 C#如何解析Json格式:{"key":"value","key":"value"}的字符串,并将key,value对应存入HashTable? 解决方案 解决方案二:使用split(',')这样就能分出一对一对的KEY与VALUE,然后再将对这一对一对的保存到HASHTABLE就可以了.解决方案三:如果你的字符串比较简单可以使用1楼的解法或使用正则表达式解析,怎么写问谷歌.如果比较复杂可以使用JSON序列化进行处理

JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解_javascript技巧

本文实例讲述了JavaScript浏览器对象模型BOM.分享给大家供大家参考,具体如下: window对象位于BOM层次结构的最顶层.它包含了一些非常重要的子对象,包括location,navigator,document,screen,history.location对象包含当前页面的URL信息.有些信息是只读的,有些信息是可以读写的比如href属性.我们不仅可以通过href属性来获取当前页面的URL信息,还可以通过修改href属性,来跳转到新的页面. <html> <body>

JavaScript在多浏览器下for循环的使用方法_javascript技巧

一.前言 JavaScript语言在不同的浏览器的下有存在细微的差异,但不像DOM操作差异那么大,现在为大家列举出其中一个"for循环"的差异,并介绍如何有效的解决这种差异. 二.问题描述 在下面的 测试代码 例1 中IE6和Chrome输出的结果是不一致,IE6不执行for语句里的代码 复制代码 代码如下: //例1: alert("准备测试toString是否被for循环枚举出来") var forTest = { toString: 1 } for (i in