一、遍历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中的key
for (var key in obj) {
//通过key拿到value
var 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 和 value
console.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);