Question

我有一个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

提前致谢。

Answer 1

使用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>

Answer 2

我已经和你一起创造了一个小提琴，请仔细阅读它。你可以把它最小化。

＆＃13;

 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;

AngularJs中的JSON分组

2 个答案: