一、遍历JSON步骤

将获取的数据转为 JSON 对象【JSON.parse(data);】
通过for in循环遍历拿到 key 和 value【for (var key in obj)】遍历JSON对象中的数据，可通过for-in循环实现
判断 value 是否是对象【if (typeof value == "object")】

js解析\遍历json数据中所有的键和值

for(var key in json){

console.log(key) //键

consolelog(json[key]) //值

}

注：数组同样适合

例如：

        function aa() {var jsona = {"1": {"id": "1", "name": "宾馆服务项目", "count": 1, "rows": [{"9": "免费停车场"}]},"6": {"id": "6", "name": "宾馆附加设施", "count": 1, "rows": [{"242": "免费wifi"}]}}console.log(jsona)for (var name in jsona) {var project = jsona[name].rows;for (var proj in project) {for (var pKey in project[proj]) {console.log(project[proj][pKey]);}}}}

1、HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>无标题文档</title><script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script><script>function submitData() {//获取输入框数据var data = $("#data").val();//将数据转换为json对象var obj = JSON.parse(data);var trHTML = "";trHTML += getJsonValue(obj, trHTML);$("#tab").html(trHTML);}//递归方式遍历JSON数据function getJsonValue(obj, trHTML) {//遍历获得json中的keyfor (var key in obj) {//通过key拿到valuevar value = obj[key];//判断value是否是对象if (typeof value == "object") {//是对象将进入递归，继续遍历trHTML += "<tr><td>" + key + "</td><td><table border='1'>"trHTML += getJsonValue(value, '');trHTML += "</table></td></tr>";} else {//不是对象则输出 key 和 valueconsole.log(key + ":" + value);//json对象中属性的名字：对象中属性trHTML += "<tr><td>" + key + "</td><td>" + value + "</td></tr>"}}return trHTML;}function clearData() {$("#data").val('');}</script>
</head><body>
<center><h1 style="text-align:center;">输入数据</h1><textarea id="data" cols="100" rows="10" onclick="this.value=''"></textarea><button onClick="submitData()">提交</button><button onclick="clearData()">清空</button><table border="1"><thead><tr><td colspan="2">数据展示</td></tr></thead><tbody id="tab"></tbody></table>
</center></body>
</html>

2、测试数据

{
   "uid": 1,
   "uname": "张三",
   "udescriptor": "===",
   "number": [1, 2, 3, 44],
   "map": {
       "aa": {
           "tid": 11,
           "tname": "张三1",
           "tdescriptor": "==="
       },
       "bb": {
           "tid": 22,
           "tname": "张三2",
           "tdescriptor": "==="
       }
   },
   "tlist": [{
       "tid": 11,
       "tname": "张三1",
       "tdescriptor": "==="
   }, {
       "tid": 22,
       "tname": "张三2",
       "tdescriptor": "==="
   }]
}

3、测试结果

二、js中从json格式数据中获取特定对象

写个方法获取：

function getJsonValue(obj,name){var result = null;var value  = null;for(var key in obj){        value = obj[key];if(key == name){return value;} else {if( typeof value == "object" ){result = getJsonValue(value,name);}}}return result;
}

var jsonobj = { "semantic":{"taskId":"8.4.3"},"history":"cn.xxxx.fund"};
var taskId = getJsonValue(jsonobj,"history");
console.log(taskId);

js 遍历 JSON数据相关推荐

js遍历json数据
部分参考伪代码信息安全,真实数据不能copy let _this=this; searchForm= {"osType":"1", "scriptN ...
《js遍历json、js创建table、隐藏id列、点击获取id值》
前述:终于抽出时间,整理了一些编程所需基础知识. js遍历json数据再添加到table中.选择所需行后点击提交拿到id传给后台,(也可以放入集合一起给). 先看效果: 选择点击后: code: &l ...
【JavaScript】js遍历json
下面介绍js遍历json数据的几种方法方法一:jQuery 例一: json数据如下,需要获得每对key和value {"a":4.3,"classify": ...
js解析\遍历json数据中所有的键和值
js解析\遍历json数据中所有的键和值 for(var key in json){ console.log(key) //键 consolelog(json[key]) //值 } 注:数组 ...
html js 循环取json数据,JS循环遍历JSON数据的方法
JS循环遍历JSON数据本文提供了 JS 循环 JSON 数据列,以及 JS 循环遍历 JSON 数据的例子,供大家学习参考. 1. json数据的列循环 var len = json.length ...
JS解析json数据并将json字符串转化为数组的实现方法
json数据在ajax实现异步交互时起到了很重要的作用,他可以返回请求的数据,然后利用客户端的js进行解析,这一点体现出js的强大,本文介绍JS解析json数据并将json字符串转化为数组的实现方法, ...
JS解析json数据（json字符串和数组之间相互转换）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD ...
js遍历json对象
原生js遍历json对象遍历json对象: 无规律: <script> var json = [ {dd:'SB',AA:'东东',re1:123}, {cccc:'dd',lk:'1q ...
js html 处理json数据,JS中Json数据的处理和解析JSON数据的方法详解
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族 ...

js 遍历 JSON数据

一、遍历JSON步骤

1、HTML代码

2、测试数据

3、测试结果

二、js中从json格式数据中获取特定对象

js 遍历 JSON数据相关推荐

最新文章

热门文章