JQuery遍历json数组--ajax处理返回的data数据--3种方式

杰儿__er

于 2023-02-23 14:24:52 发布

阅读量2.9k

点赞数 1

分类专栏： WEB 文章标签： jquery Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_42167759/article/details/129177429

版权

WEB 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

JQuery遍历json数组的3种方法,本文分别给出了使用each、for遍历json的方法,其中for又分成两种形式。

一、使用each遍历

1.1代码展示

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $("button").click(function(){
         var tbody = "";
           //------------遍历对象 .each的使用-------------
           //对象语法JSON数据格式(当服务器端回调回来的对象数据格式是json数据格式，必须保证JSON的格式要求，回调的对象必须使用eval函数进行转化（否则将得不到Object）。本文不作详细介绍服务器端回调的数据问题，我们将直接自定义对象)
           var obj = [{ "name": "项海军", "password": "123456"}];
           $("#result").html("------------遍历对象 .each的使用-------------");
           alert(obj); //是个object元素
           //下面使用each进行遍历
           $.each(obj, function (n, value) {
               alert(n + ' ' + value);
               var trs = "";
               trs += "<tr><td>" + value.name + "</td> <td>" + value.password + "</td></tr>";
               tbody += trs;
           });

           $("#project").append(tbody);
    });
});
</script>
</head>
<body>

<button>获取 JSON 数据</button>    
<div id="result"></div>
<div id="project"></div>

</body>
</html>

1.2 运行结果

运行前

运行后

1.3 解释说明

注意：其中的obj是个object元素；

若：
var obj = [{ "name": "项海军", "password": "123456"}];
则
$("button").click(function(){
            alert(obj);    //[object Object]
            $.each(obj, function(n, value){
                 alert(n + ' ' + value);     //0 [object Object]
                 alert(n + ' ' + value.name + value.password); //0 项海军123456
            });
    });
则

若：
var obj = { "name": "项海军", "password": "123456"};
则
$("button").click(function(){
            alert(obj);    //[object Object]
            $.each(obj, function(n, value){
                 alert(n + ' ' + value);     //先显示name 项海军, 后显示password 123456
            });
    });

若: 是二维数组
var obj = {"eth-0":{ "name": "项海军", "password": "123456"},"eth-1":{ "name": "项", "password": "1122"}};
则    
$("button").click(function(){
        alert(obj);    //[object Object]
        $.each(obj, function(n, value){
             alert(n + ' ' + value); //先显示eth-0 [object Object]。后显示eth-1 [object Object]
        });
});

若: 回调的对象必须使用eval函数进行转化
<script>
$(document).ready(function(){
    $("button").click(function(){
        $.ajax({
            url:"demo_test.txt",
            success:function(result){
                alert(result);    //{"eth-0":{ "name": "项海军", "password": "123456"},"eth-1":{ "name": "项", "password": "1122"}}
                var data = eval('('+result+')'); 
                alert(data);//[object Object]
                alert(n + ' ' + value); //先显示eth-0 [object Object]。后显示eth-1 [object Object]
        }});
    });
});
</script>

二、使用for遍历--方法1

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $("button").click(function(){
         var json = [{dd:'SB',AA:'东东',re1:123},{cccc:'dd',lk:'1qw'}];
         for(var i=0,l=json.length;i<l;i++){
            for(var key in json[i]){
                alert(key+':'+json[i][key]); //先显示dd:SB，然后AA:东东 …………
            }
         }
    });
});
</script>
</head>
<body>

<div id="div1"><h2>使用 jQuery AJAX 修改文本内容</h2></div>
<button>获取其他内容</button>

</body>
</html>

三、使用for遍历--方法2

参考连接：https://www.jb51.net/article/57246.htm

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script><script>
$(document).ready(function(){
    $("button").click(function(){
             var obj = { "name": "项海军", "password": "123456"};
             for(var p in obj){
                alert(obj[p]);    //先显示项海军 ， 后显示123456
             }
        });
});
</script>
</head>
<body>

<div id="div1"><h2>使用 jQuery AJAX 修改文本内容</h2></div>
<button>获取其他内容</button>

</body>
</html>