Populating dynamic table with json data
Question
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<title>MongoDB Display</title>
<script>
$(document).ready(function(){
var Obj = $.getJSON("http://localhost:3000", function(){
alert("Success");
$(Obj.rows).each(function(index, element){
$(#tableID).append('<tr><td>' + element[1] + '</td><td><table><tr><td>'+ Obj.rows.scripts.element[0]
+ '</td>' + "/" + '<td>' + Obj.rows.scripts.element[1] + '</td></tr></table></td></tr>');
})
});
});
</script>
</head>
<body>
<div id="wrapper">
<h1>H 1</h1>
<table id="tableID" border = "1">
<th>
<td>PAGE</td>
<td>SCRIPTS</td>
</th>
</table>
</div>
</body>
</html>
In short;
I have a MongoDB ready to be displayed at localhost:3000. Server is running and I can display the data on the browser with localhost:3000 But when i try to run the above code on the browser, all i can get the js Alert("Success") and the hard coded part of the table. PAGE and SCRIPTS...
the data is:
{
"offset": 0,
"rows": [
{
"_id": {},
"url": "http://www.qweq.com\r",
"totalLines": 3084,
"scripts": [
{
"line": 111,
"tag": "\"asdas/etc/designs/qwe/assets/head-5.30.31.min.js\""
},{
"line": 3065,
"tag": "\"asdas/etc/designs/qwe/assets/common-5.30.31.min.js\""
},{
"line": 3067,
"tag": "\"asda/etc/designs/qwe/assets/category-5.30.31.min.js\""
}
]
},{
"_id": {},
"url": "http://www.qweqsd.com/qwdq23/qweq/qweqw/\r",
"totalLines": 3042,
"scripts": [
{
"line": 113,
"tag": "\"asda/etc/designs/asd/assets/head-5.30.31.min.js\""
},{
"line": 3023,
"tag": "\"asdasd/etc/designs/asd/assets/common-5.30.31.min.js\""
},{
"line": 3025,
"tag": "\"asdad/etc/designs/qwe/assets/category-5.30.31.min.js\""
}
]
},
How can I make this Json data to be display in a dynamic table?
Thank you.
2 answers
solution1
1 ACCPTED 2015-03-11 19:59:40
This version is kind of working :) Maybe you'll find inspiration.
$(rows).each(function(index,element){
console.log(index); console.log(element);
$('#tableID').append('<tr><td>' + index + '</td><td>'+ element['url']
+ '</td>' + "/" + '<td>' + JSON.stringify(element['scripts']) + '</td></tr></table>');
});
solution2
0 2015-03-11 19:46:36
It looks like you're missing quotes around the table name. Instead, you should have something like $('#tableID') .
Additionally, you'll want your function call to include the data that it's returning to you. For example:
$.getJSON("http://localhost:3000", function(data){
alert("Success");
console.log(data);
});
Then, data will include the JSON object, and you can manipulate it however you please.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.