如何使用 JQuQuery 解析 JSON 对象并在 HTML 页面中以表格格式打印输出

how to parse json object using jquery and print the output in tabular format in html page?

本文关键字：表格 格格 输出 式打印 HTML 解析 JQuQuery 何使用 JSON 对象      更新时间：2023-09-26

我编写了一个程序来从数据库获得的值列表中创建一个 json 对象，这是我的 json 的外观

{
 1: {
 age: "21",
 name: "arjun",
 gender: "male"
},
 2: {
 age: "30",
 name: "ravi",
 gender: "male"
},
 3: {
 age: "57",
 name: "pushpa",
 gender: "female"
 }
}

现在我想使用 jquery 解析它并以表格形式在 html 中打印结果。我已经尝试了某种程度，但不明白该怎么做，所以需要一些指导

我的json_parse.js ：

$(document).ready(function() {
var url = "http://182.168.1.115:8082/JqueryForm/userdetails_json.jsp"
$.parseJSON(url, function(json) {
    var tr;
    for (var i = 0; i < json.length; i++) {
        tr = $('<tr/>');
        tr.append("<td>" + json[i].name + "</td>");
        tr.append("<td>" + json[i].age + "</td>");
        tr.append("<td>" + json[i].gender + "</td>");
        $("#table").append(tr);
    }
});

}）;

我list_user.html：

<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">  
</script>
<script src="json_parse.js"></script>
</head>
<body>
    <table name="Table" id="table">
    </table>
</div>
</body>
</html>

好吧，你有几个问题：

  1. 您应该使用jQuery.getJSON()而不是jQuery.parseJSON()
  2. 你的 JSON 不是一个数组，所以长度没有定义，你不能像现在这样循环它。

简单的解决方法是使用 jQuery.each() 重写循环来枚举对象：

$.each(json, function(i) {
  var tr = $('<tr/>');
  tr.append("<td>" + json[i].name + "</td>");
  tr.append("<td>" + json[i].age + "</td>");
  tr.append("<td>" + json[i].gender + "</td>");
  $("#table").append(tr);
});

下面有一个工作片段可以看到它的实际效果。

$(document).ready(function() {
  var json = { 1: {age: "21", name: "arjun",gender: "male"}, 2: {age: "30",name: "ravi",gender: "male"}, 3: {age: "57", name: "pushpa", gender: "female"}};
  
  $.each(json, function(i) {
    var tr = $('<tr/>');
    tr.append("<td>" + json[i].name + "</td>");
    tr.append("<td>" + json[i].age + "</td>");
    tr.append("<td>" + json[i].gender + "</td>");
    $("#table").append(tr);
  });
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="table"></table>

相关文章：