遍历json获得数据的几种方法小结

Json在Web开发的用处非常广泛,作为数据传递的载体,如何解析Json返回的数据是非常常用的。下面介绍下四种解析Json的方式:

Part 1

var list1 = [1,3,4]; 
alert(list1[1]); 
var list2 = [{"name":"leamiko","xing":"lin"}]; 
alert(list2[0]["xing"]) 
alert(list2[0].xing) 

Part 2

var value = { 
  "china":{ 
    "hangzhou":{"item":"1"}, 
    "shanghai":{"item":"2"}, 
    "chengdu":{"item":"3"} 
  }, 
  "America":{ 
    "aa":{"item":"1"}, 
    "bb":{"item":"2"}  
  }, 
  "Spain":{ 
    "dd":{"item":"1"}, 
    "ee":{"item":"2"}, 
    "ff":{"item":"3"}  
  } 
}; 

for(var countryObj in value) 
{ 
  document.write(countryObj + ":<br />") 
  //没用的for(var cityObj in value.countryObj) 
  for(var cityObj in value[countryObj]) 
  { 
    document.write('  ' + cityObj + "<br />"); 
    for(var itemObj in value[countryObj][cityObj]) 
    { 
      document.write("   "+ itemObj + value[countryObj][cityObj][itemObj] +"<br />")  
    } 
  }  
}

解释:

countryObj 为value对象的一个属性明,value[countryObj] 为value对象的属性值 这里为一个json对象比如b,value[countryObj][cityObj]为josn对象b的属性值 它也是一个json对象,于是 value[countryObj][cityObj]["item"]便可以取到json对象暂时成为c的值,或者 value[countryObj][cityObj].item。

总之分清是json还是array这是很关键的。

Part 3

var value2 = { 
  "china":[ 
    {"name":"hangzhou", "item":"1"}, 
    {"name":"shanghai", "item":"2"}, 
    {"name":"sichuan", "item":"3"} 
  ], 
  "America":[ 
    {"name":"aa", "item":"12"}, 
    {"name":"bb", "item":"2"} 
  ], 
  "Spain":[ 
    {"name":"cc", "item":"1"}, 
    {"name":"dd", "item":"23"}, 
    {"name":"ee", "item":"3"} 
  ] 
};<BR>  
for (var countryObj in value2) 
{ 
  document.write(countryObj + ":<br />")  
  for (var cityObj in value2[countryObj]) 
  { 
    //可以用document.write(" " + value2[countryObj][cityObj].item + "<br />"); 
    document.write(cityObj + " " + value2[countryObj][cityObj]["name"] + "<br />" );  
  } 
}

解释:

countryObj 为value2对象的属性名,value2[countryObj] 为value2对象属性值 在本例中它是一个数组,cityObj 是数组的一个元素,它又是另外一个json对象,于是,value2[countryObj][cityObj]["name"]就访问到该对象的 name的属性值,也可以通过 value2[countryObj][cityObj].name 来访问该属性值。

Part 4

var value2 = { 
  "china":[ 
    {"name":"hangzhou", "item":"1"}, 
    {"name":"shanghai", "item":"2"}, 
    {"name":"sichuan", "item":"3"} 
  ], 

  "America":[ 
    {"name":"aa", "item":"12"}, 
    {"name":"bb", "item":"2"} 
  ], 
  "Spain":[ 
    {"name":"cc", "item":"1"}, 
    {"name":"dd", "item":"23"}, 
    {"name":"ee", "item":"3"} 
  ] 
}; 

  for (var countryObj in value2) 
  { 
    document.write(countryObj + ":<br />")  
    //document.write(" " + value2[countryObj].length); 
    for (var i = 0;i < value2[countryObj].length; i++) 
    { 
      document.write(" " + value2[countryObj][i]["name"] + "<br />");  
    } 
  }

解释:

countryObj value2对象的属性名,value2[countryObj] 属性值 本例中是一个数组,value2[countryObj].length 数组的长度,value2[countryObj][i]数组的项 == json对象。

value2[countryObj][i]["name"] 取得name的值,也可以用value2[countryObj][i].name 来取得name的值。

当一个人找不到出路的时候,最好的办法就是将当前能做好的事情做到极致,做到无人能及。

以上这篇遍历json获得数据的几种方法小结就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持JavaScript中文网。


上一篇:新闻上下滚动jquery 超简洁(必看篇)
下一篇:原生js实现可拖动的登录框效果

相关推荐

  • 🙋Hanjst汉吉斯特优化+JsonDataFromScript等

    近日继续对 🙋Hanjst汉吉斯特优化改进。这次的改进思考是从服务器端返回的 HanjstJsonData的容器设计问题。目前的做法是服务器端的HanjstJsonData放入终端页面的一个Div元...

    23 天前
  • (for in)遍历键名和 (for of)遍历键值,这种说法严谨吗?

    for in for in在ES5中便出现了。一般用来遍历对象属性。但也可用于数组遍历,返回的值是数组的索引,因为,严格来说,数组也是一个对象,所对应的属性是每个值的索引。

    2 年前
  • 高效遍历匹配Json数据,避免嵌套循环

    工作中经常会遇到这样的需求: 1.购物车列表中勾选某些,点击任意一项,前往详情页,再返回购物车依旧需要呈现勾选状态 2.勾选人员后,前往别的页面,再次返回,人员依旧程勾选状态 3.等等.......

    2 年前
  • 面试题|手写JSON解析器

    这周的 Cassidoo 的每周简讯有这么一个面试题:: 写一个函数,这个函数接收一个正确的 JSON 字符串并将其转化为一个对象(或字典,映射等,这取决于你选择的语言)。

    4 个月前
  • 面试小结--前端面试的几个雷点

    技术在不断的创新,随着框架,库,构建工具,打包工具,版本控制工具等操作越来越方便,使用越来越简单。面对这样的情况,除了兴奋,也要警惕。这些工具使得开发越来方便,越简单,那么开发者自己的价值,竞争力就...

    2 年前
  • 隐藏某些价值观输出stringify() JSON。

    Evan CarrollNilesh(https://stackoverflow.com/users/124486/evancarroll)提出了一个问题:Hide certain values in...

    2 年前
  • 随着Nodejs JSON对象响应(转换对象数组JSON字符串)

    Rudolf Olahclimboid(https://stackoverflow.com/users/9903/rudolfolah)提出了一个问题:Responding with a JSON o...

    2 年前
  • 铬sendrequest错误:列表的循环结构转换到JSON

    SomeKittensSkizit(https://stackoverflow.com/users/1216976/somekittens)提出了一个问题:Chrome sendrequest err...

    2 年前
  • 重新认识 package.json

    前言 🤔 在每个项目的根目录下面,一般都会有一个 package.json 文件,其定义了运行项目所需要的各种依赖和项目的配置信息(如名称、版本、许可证等元数据)。

    1 个月前
  • 重新认识 package.json

    前言 🤔 在每个项目的根目录下面,一般都会有一个 package.json 文件,其定义了运行项目所需要的各种依赖和项目的配置信息(如名称、版本、许可证等元数据)。

    25 天前

官方社区

扫码加入 JavaScript 社区