我有一个JSON,我想在使用AngularJs的表中显示它。
[{"id":"e2500e80a9d3a2e57092ac1e76fac377","doc":{"title":"star","name":"Sam","day":"01","count":3}},{"id":"85016ca713119cee46a59191de5d0d89","doc":{"title":"star","name":"David","day":"01","count":5}},{"id":"033f3022576b97d3147a1c016d9aa473","doc":{"title":"Fav","name":"Jan","day":"01","count":3}},{"id":"b31a89b2852e3096bb1c8a139c0a799e","doc":{"title":"Fav","name":"Haze","day":"01","count":3}},{"id":"67222f12e79d3164a2e235712859bc91","doc":{"title":"Soup","name":"Santi","day":"02","count":1}},{"id":"1870139670d500e4b3a546dc98df5d41","doc":{"title":"Soup","name":"Cool","day":"02","count":2}},{"id":"6866bc4fd079f67d110400fe64f497bd","doc":{"title":"Fav","name":"Lettuce","day":"02","count":2}},{"id":"31f3066f80d45ff939d07b13fa1ea063","doc":{"title":"Fav","name":"Campagnola","day":"02","count":3}},{"id":"2c41f42808252fec6a8572f635cda808","doc":{"title":"star","name":"Fettuccine","day":"02","count":4}}]
请有人帮我列出上面的JSON,就像表格一样。 Table
提前致谢。
答案 0 :(得分:0)
使用ng-repeat
。我已经用html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<div ng-repeat="data in myJson">
{{data.doc.name}}
{{data.doc.day}}
{{data.doc.title}}
{{data.doc.count}}
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope) {
$scope.myJson = [
{
"id": "e2500e80a9d3a2e57092ac1e76fac377",
"doc": {
"title": "star",
"name": "Sam",
"day": "01",
"count": 3
}
},
{
"id": "85016ca713119cee46a59191de5d0d89",
"doc": {
"title": "star",
"name": "David",
"day": "01",
"count": 5
}
},
{
"id": "033f3022576b97d3147a1c016d9aa473",
"doc": {
"title": "Fav",
"name": "Jan",
"day": "01",
"count": 3
}
},
{
"id": "b31a89b2852e3096bb1c8a139c0a799e",
"doc": {
"title": "Fav",
"name": "Haze",
"day": "01",
"count": 3
}
},
{
"id": "67222f12e79d3164a2e235712859bc91",
"doc": {
"title": "Soup",
"name": "Santi",
"day": "02",
"count": 1
}
},
{
"id": "1870139670d500e4b3a546dc98df5d41",
"doc": {
"title": "Soup",
"name": "Cool",
"day": "02",
"count": 2
}
},
{
"id": "6866bc4fd079f67d110400fe64f497bd",
"doc": {
"title": "Fav",
"name": "Lettuce",
"day": "02",
"count": 2
}
},
{
"id": "31f3066f80d45ff939d07b13fa1ea063",
"doc": {
"title": "Fav",
"name": "Campagnola",
"day": "02",
"count": 3
}
},
{
"id": "2c41f42808252fec6a8572f635cda808",
"doc": {
"title": "star",
"name": "Fettuccine",
"day": "02",
"count": 4
}
}
];
});
</script>
</body>
</html>
答案 1 :(得分:0)
我已经和你一起创造了一个小提琴,请仔细阅读它。你可以把它最小化。
var myList=
[{"id":"e2500e80a9d3a2e57092ac1e76fac377","doc":{"title":"star","name":"Sam","day":"01","count":3}},{"id":"85016ca713119cee46a59191de5d0d89","doc":{"title":"star","name":"David","day":"01","count":5}},{"id":"033f3022576b97d3147a1c016d9aa473","doc":{"title":"Fav","name":"Jan","day":"01","count":3}},{"id":"b31a89b2852e3096bb1c8a139c0a799e","doc":{"title":"Fav","name":"Haze","day":"01","count":3}},{"id":"67222f12e79d3164a2e235712859bc91","doc":{"title":"Soup","name":"Santi","day":"02","count":1}},{"id":"1870139670d500e4b3a546dc98df5d41","doc":{"title":"Soup","name":"Cool","day":"02","count":2}},{"id":"6866bc4fd079f67d110400fe64f497bd","doc":{"title":"Fav","name":"Lettuce","day":"02","count":2}},{"id":"31f3066f80d45ff939d07b13fa1ea063","doc":{"title":"Fav","name":"Campagnola","day":"02","count":3}},{"id":"2c41f42808252fec6a8572f635cda808","doc":{"title":"star","name":"Fettuccine","day":"02","count":4}}];
var myList1=myList;
for(var i=0;i<myList1.length;i++){
myList1[i].title = myList1[i].doc.title;
myList1[i].name = myList1[i].doc.name;
myList1[i].day = myList1[i].doc.day;
myList1[i].count = myList1[i].doc.count;
delete myList1[i].doc;
}
// Builds the HTML Table out of myList json data from Ivy restful service.
function buildHtmlTable() {
var columns = addAllColumnHeaders(myList);
for (var i = 0 ; i < myList.length ; i++) {
var row$ = $('<tr/>');
for (var colIndex = 0 ; colIndex < columns.length ; colIndex++) {
var cellValue = myList[i][columns[colIndex]];
if (cellValue == null) { cellValue = ""; }
row$.append($('<td/>').html(cellValue));
}
$("#excelDataTable").append(row$);
}
}
// Adds a header row to the table and returns the set of columns.
// Need to do union of keys from all records as some records may not contain
// all records
function addAllColumnHeaders(myList)
{
var columnSet = [];
var headerTr$ = $('<tr/>');
for (var i = 0 ; i < myList.length ; i++) {
var rowHash = myList[i];
for (var key in rowHash) {
if ($.inArray(key, columnSet) == -1){
columnSet.push(key);
headerTr$.append($('<th/>').html(key));
}
}
}
$("#excelDataTable").append(headerTr$);
return columnSet;
}
&#13;
th {
font-weight : bold
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body onLoad="buildHtmlTable()">
<table id="excelDataTable" border="1">
</table>
</body>
&#13;