Javascript 如何使用jquery解析json对象并在html页面中以表格格式打印输出？_Javascript_Jquery_Html_Json

Javascript 如何使用jquery解析json对象并在html页面中以表格格式打印输出？

javascript jquery html json

Javascript 如何使用jquery解析json对象并在html页面中以表格格式打印输出？,javascript,jquery,html,json,Javascript,Jquery,Html,Json,我编写了一个程序，从数据库中获取的值列表中创建一个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对象，下面是我的json的外观

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

现在我想使用jquery解析它，并以html的表格形式打印结果。在某种程度上，我已经尝试过了，但不了解进一步要做什么，所以请您提供一些指导

My 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);
    }
});

$（文档）.ready（函数（）{
变量url=”http://182.168.1.115:8082/JqueryForm/userdetails_json.jsp"
$.parseJSON（url，函数（json）{
var-tr；
for（var i=0；i


}))
My 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>

您有几个问题：
你不应该使用
你知道JSON不是数组，所以长度没有定义，你不能像现在这样循环
简单的解决方法是使用重新写入循环来枚举对象：
$.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);
});

$。每个（json，函数（i）{
var tr=$（''）；
tr.append（“+json[i].name+”）；
tr.append（“+json[i].age+”）；
tr.append（“+json[i].gender+”）；
$（“#表”）。追加（tr）；
});

下面有一个工作片段，可以看到它的实际作用

$（文档）.ready（函数（）{
var json={1:{年龄：“21”，姓名：“arjun”，性别：“男”}，2:{年龄：“30”，姓名：“拉维”，性别：“男”}，3:{年龄：“57”，姓名：“普什帕”，性别：“女”}；
$.each（json，函数（i）{
var tr=$（''）；
tr.append（“+json[i].name+”）；
tr.append（“+json[i].age+”）；
tr.append（“+json[i].gender+”）；
$（“#表”）。追加（tr）；
});
});
您有几个问题：
你不应该使用
你知道JSON不是数组，所以长度没有定义，你不能像现在这样循环
简单的解决方法是使用重新写入循环来枚举对象：
$.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);
});

$。每个（json，函数（i）{
var tr=$（''）；
tr.append（“+json[i].name+”）；
tr.append（“+json[i].age+”）；
tr.append（“+json[i].gender+”）；
$（“#表”）。追加（tr）；
});

下面有一个工作片段，可以看到它的实际作用

$（文档）.ready（函数（）{
var json={1:{年龄：“21”，姓名：“arjun”，性别：“男”}，2:{年龄：“30”，姓名：“拉维”，性别：“男”}，3:{年龄：“57”，姓名：“普什帕”，性别：“女”}；
$.each（json，函数（i）{
var tr=$（''）；
tr.append（“+json[i].name+”）；
tr.append（“+json[i].age+”）；
tr.append（“+json[i].gender+”）；
$（“#表”）。追加（tr）；
});
});
您有几个问题：
你不应该使用
你知道JSON不是数组，所以长度没有定义，你不能像现在这样循环
简单的解决方法是使用重新写入循环来枚举对象：
$.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);
});

$。每个（json，函数（i）{
var tr=$（''）；
tr.append（“+json[i].name+”）；
tr.append（“+json[i].age+”）；
tr.append（“+json[i].gender+”）；
$（“#表”）。追加（tr）；
});

下面有一个工作片段，可以看到它的实际作用

$（文档）.ready（函数（）{
var json={1:{年龄：“21”，姓名：“arjun”，性别：“男”}，2:{年龄：“30”，姓名：“拉维”，性别：“男”}，3:{年龄：“57”，姓名：“普什帕”，性别：“女”}；
$.each（json，函数（i）{
var tr=$（''）；
tr.append（“+json[i].name+”）；
tr.append（“+json[i].age+”）；
tr.append（“+json[i].gender+”）；
$（“#表”）。追加（tr）；
});
});
您有几个问题：
你不应该使用
你知道JSON不是数组，所以长度没有定义，你不能像现在这样循环
简单的解决方法是使用重新写入循环来枚举对象：
$.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);
});

$。每个（json，函数（i）{
var tr=$（''）；
tr.append（“+json[i].name+”）；
tr.append（“+json[i].age+”）；
tr.append（“+json[i].gender+”）；
$（“#表”）。追加（tr）；
});

下面有一个工作片段，可以看到它的实际作用

$（文档）.ready（函数（）{
var json={1:{年龄：“21”，姓名：“arjun”，性别：“男”}，2:{年龄：“30”，姓名：“拉维”，性别：“男”}，3:{年龄：“57”，姓名：“普什帕”，性别：“女”}；
$.each（json，函数（i）{
var tr=$（''）；
tr.append（“+json[i].name+”）；
tr.append（“+json[i].age+”）；
tr.append（“+json[i].gender+”）；
$（“#表”）。追加（tr）；
});
});

当前您的输出是什么样子的？表中有行吗？json数据格式是否正确？尝试直接从浏览器地址栏调用它。@Daryl只是空白htmlpage@collapsar是的，先生，我可以在浏览器中很好地看到我的json数据。您是否收到任何控制台错误？我会在你的循环中设置一个断点，并确保json的格式与你想象的一样。你的输出目前是什么样子的？表中有行吗？json数据格式是否正确？尝试直接从浏览器地址栏调用它。@Daryl只是空白htmlpage@collapsar是的，先生，我可以在浏览器中很好地看到我的json数据。您是否收到任何控制台错误？我会在你的循环中设置一个断点，并确保json的格式与你想象的一样。你的输出目前是什么样子的？表中有行吗？json数据格式是否正确？尝试直接从浏览器地址栏调用它。@Daryl只是空白htmlpage@collapsar是的，先生，我可以在浏览器中很好地看到我的json数据。您是否收到任何控制台错误？我会在你的循环中设置一个断点，并确保json的格式与你想象的一样。你的输出目前是什么样子的？你是吗