AngularJsでのJSONグループ化

-5

私はJSONを持っていて、これをAngularJsを使ってテーブルに表示したいと思います。AngularJsでのJSONグループ化

[{"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

ありがとうございます。

出典

2017-02-16 Ajith

こんにちはとのStackOverflowへようこそ！ *何か*試しましたか？どんな例？それとも、誰かにあなたのためにそれを作ってもらいたいのですか？ :-) –

あなたが試してみて成功していないコードをいくつか用意してください。だから、誰かがあなたを導く/助けるのは簡単でしょう。それとも、あなたのための準備が整ったコードを期待していますか？ :) –

ng-repeatを使用してください。私はJSONあなたとフィドルを作成しているあなたはhtml

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
</head> 
 
<body> 
 
\t <div ng-app="myApp" ng-controller="customersCtrl"> 
 
\t \t \t <div ng-repeat="data in myJson"> 
 
\t \t \t \t {{data.doc.name}} 
 
\t \t \t \t {{data.doc.day}} 
 
\t \t \t \t {{data.doc.title}} 
 
\t \t \t \t {{data.doc.count}} 
 
\t \t \t </div> 
 
\t </div> 
 
\t <script> 
 
\t \t var app = angular.module('myApp', []); 
 
\t \t app.controller('customersCtrl', function($scope) { 
 

 
\t \t \t $scope.myJson = [ 
 
\t \t \t { 
 
\t \t \t \t "id": "e2500e80a9d3a2e57092ac1e76fac377", 
 
\t \t \t \t "doc": { 
 
\t \t \t \t \t "title": "star", 
 
\t \t \t \t \t "name": "Sam", 
 
\t \t \t \t \t "day": "01", 
 
\t \t \t \t \t "count": 3 
 
\t \t \t \t } 
 
\t \t \t }, 
 
\t \t \t { 
 
\t \t \t \t "id": "85016ca713119cee46a59191de5d0d89", 
 
\t \t \t \t "doc": { 
 
\t \t \t \t \t "title": "star", 
 
\t \t \t \t \t "name": "David", 
 
\t \t \t \t \t "day": "01", 
 
\t \t \t \t \t "count": 5 
 
\t \t \t \t } 
 
\t \t \t }, 
 
\t \t \t { 
 
\t \t \t \t "id": "033f3022576b97d3147a1c016d9aa473", 
 
\t \t \t \t "doc": { 
 
\t \t \t \t \t "title": "Fav", 
 
\t \t \t \t \t "name": "Jan", 
 
\t \t \t \t \t "day": "01", 
 
\t \t \t \t \t "count": 3 
 
\t \t \t \t } 
 
\t \t \t }, 
 
\t \t \t { 
 
\t \t \t \t "id": "b31a89b2852e3096bb1c8a139c0a799e", 
 
\t \t \t \t "doc": { 
 
\t \t \t \t \t "title": "Fav", 
 
\t \t \t \t \t "name": "Haze", 
 
\t \t \t \t \t "day": "01", 
 
\t \t \t \t \t "count": 3 
 
\t \t \t \t } 
 
\t \t \t }, 
 
\t \t \t { 
 
\t \t \t \t "id": "67222f12e79d3164a2e235712859bc91", 
 
\t \t \t \t "doc": { 
 
\t \t \t \t \t "title": "Soup", 
 
\t \t \t \t \t "name": "Santi", 
 
\t \t \t \t \t "day": "02", 
 
\t \t \t \t \t "count": 1 
 
\t \t \t \t } 
 
\t \t \t }, 
 
\t \t \t { 
 
\t \t \t \t "id": "1870139670d500e4b3a546dc98df5d41", 
 
\t \t \t \t "doc": { 
 
\t \t \t \t \t "title": "Soup", 
 
\t \t \t \t \t "name": "Cool", 
 
\t \t \t \t \t "day": "02", 
 
\t \t \t \t \t "count": 2 
 
\t \t \t \t } 
 
\t \t \t }, 
 
\t \t \t { 
 
\t \t \t \t "id": "6866bc4fd079f67d110400fe64f497bd", 
 
\t \t \t \t "doc": { 
 
\t \t \t \t \t "title": "Fav", 
 
\t \t \t \t \t "name": "Lettuce", 
 
\t \t \t \t \t "day": "02", 
 
\t \t \t \t \t "count": 2 
 
\t \t \t \t } 
 
\t \t \t }, 
 
\t \t \t { 
 
\t \t \t \t "id": "31f3066f80d45ff939d07b13fa1ea063", 
 
\t \t \t \t "doc": { 
 
\t \t \t \t \t "title": "Fav", 
 
\t \t \t \t \t "name": "Campagnola", 
 
\t \t \t \t \t "day": "02", 
 
\t \t \t \t \t "count": 3 
 
\t \t \t \t } 
 
\t \t \t }, 
 
\t \t \t { 
 
\t \t \t \t "id": "2c41f42808252fec6a8572f635cda808", 
 
\t \t \t \t "doc": { 
 
\t \t \t \t \t "title": "star", 
 
\t \t \t \t \t "name": "Fettuccine", 
 
\t \t \t \t \t "day": "02", 
 
\t \t \t \t \t "count": 4 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t \t ]; 
 
\t \t }); 
 
\t </script> 
 
</body> 
 
</html>

出典

2017-02-16 13:10:36

を行うことができ、このくらいの残りを行っている、it.Youははるかにそれを最小限に抑えることができて行ってください。

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

th { 
 
    font-weight : bold 
 
}

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

出典

2017-02-16 13:42:22

AngularJsでのJSONグループ化

答えて

関連する問題