js 遍历 JSON数据

最新推荐文章于 2024-02-06 14:13:24 发布

Marvin-Fox

最新推荐文章于 2024-02-06 14:13:24 发布

阅读量2.1k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/fox_bert/article/details/100594710

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、遍历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);

Marvin-Fox

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
js 遍历 JSON数据

一、遍历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(...
复制链接

扫一扫