角型JS変換2 dim JSON in django

Question

私はhtmlテーブルに変換したい2次元JSONを持っています。このようなもの：http://www.bogotobogo.com/AngularJS/AngularJS_Tables.php

シリアライズについては聞いたことがありますが、これはあまり効果がありません。そしてそれはどのように働くでしょうか？

[{"model": "pricing.cashflow", "pk": 1, "fields": {"value": 4.0, "date": "2016-09-09"}}, {"model": "pricing.cashflow", "pk": 2, "fields": {"value": 3.0, "date": "2016-09-01"}}, {"model": "pricing.cashflow", "pk": 3, "fields": {"value": 3.0, "date": "2016-09-01"}}, {"model": "pricing.cashflow", "pk": 4, "fields": {"value": 3.0, "date": "2016-09-01"}}, {"model": "pricing.cashflow", "pk": 5, "fields": {"value": 3.0, "date": "2016-09-01"}}, {"model": "pricing.cashflow", "pk": 6, "fields": {"value": 5.0, "date": "2016-09-07"}}, {"model": "pricing.cashflow", "pk": 7, "fields": {"value": 3.0, "date": "2016-09-28"}}, {"model": "pricing.cashflow", "pk": 8, "fields": {"value": 3.0, "date": "2016-09-22"}}, {"model": "pricing.cashflow", "pk": 9, "fields": {"value": 5.0, "date": "2016-09-16"}}, {"model": "pricing.cashflow", "pk": 10, "fields": {"value": 5.0, "date": "2016-09-16"}}, {"model": "pricing.cashflow", "pk": 11, "fields": {"value": 4.0, "date": "2016-09-08"}}, {"model": "pricing.cashflow", "pk": 12, "fields": {"value": 8.0, "date": "2016-09-22"}}, {"model": "pricing.cashflow", "pk": 13, "fields": {"value": 3.0, "date": "2016-09-22"}}, {"model": "pricing.cashflow", "pk": 14, "fields": {"value": 5.0, "date": "2016-09-01"}}, {"model": "pricing.cashflow", "pk": 15, "fields": {"value": 8.0, "date": "2016-09-01"}}, {"model": "pricing.cashflow", "pk": 16, "fields": {"value": 4.0, "date": "2016-09-08"}}, {"model": "pricing.cashflow", "pk": 17, "fields": {"value": 5.0, "date": "2016-09-09"}}, {"model": "pricing.cashflow", "pk": 18, "fields": {"value": 5.0, "date": "2016-09-09"}}, {"model": "pricing.cashflow", "pk": 19, "fields": {"value": 5.0, "date": "2016-09-09"}}, {"model": "pricing.cashflow", "pk": 20, "fields": {"value": 3.0, "date": "2016-09-16"}}, {"model": "pricing.cashflow", "pk": 21, "fields": {"value": 3.0, "date": "2016-09-16"}}, {"model": "pricing.cashflow", "pk": 22, "fields": {"value": 3.0, "date": "2016-09-16"}}, {"model": "pricing.cashflow", "pk": 23, "fields": {"value": 3.0, "date": "2016-09-16"}}, {"model": "pricing.cashflow", "pk": 24, "fields": {"value": 3.0, "date": "2016-09-16"}}, {"model": "pricing.cashflow", "pk": 25, "fields": {"value": 8.0, "date": "2016-09-29"}}, {"model": "pricing.cashflow", "pk": 26, "fields": {"value": 3.0, "date": "2016-09-18"}}, {"model": "pricing.cashflow", "pk": 27, "fields": {"value": 4.0, "date": "2016-09-25"}}, {"model": "pricing.cashflow", "pk": 28, "fields": {"value": 4.0, "date": "2016-09-25"}}, {"model": "pricing.cashflow", "pk": 29, "fields": {"value": 4.0, "date": "2016-09-25"}}] 

ビュー：

def get_cashflows(request): 
    return HttpResponse(
     serializers.serialize("json", Cashflow.objects.all()), 
     content_type="application/json" 
    ) 

JS

app.controller('cocogetCtrl',['$scope','$http', function($scope,$http) { 

    $scope.getData = function(){ 
    $http.get("/getcashflow/") 
     .success(function(data) { 

     }); 
     }); 
    }; 

    setInterval($scope.getData, 1000); 
}]); 

Answer 1

あなたは、スコープ変数にデータを割り当て、テーブルの行の項目を繰り返すことができます。

相続人ngRepeatディレクティブを使用する例：（私のコードで）

(function() { 
 

 
    angular.module('MyApp', []); 
 

 
})(); 
 

 
(function() { 
 

 
    angular.module('MyApp').controller('MyController', MyController); 
 

 
    MyController.$inject = ['$scope', '$http']; 
 

 
    function MyController($scope, $http) { 
 

 
    //$scope.getData = function() { 
 
     //$http.get("/getcashflow/") 
 
     //.success(function(data) { 
 
      //$scope.response = data.data; 
 
     //}); 
 
    //}; 
 

 
    //setInterval($scope.getData, 1000); 
 

 
    // simulating data for illustrative purposes 
 
    $scope.response = [{ 
 
     "model": "pricing.cashflow", 
 
     "pk": 1, 
 
     "fields": { 
 
     "value": 4.0, 
 
     "date": "2016-09-09" 
 
     } 
 
    }, { 
 
     "model": "pricing.cashflow", 
 
     "pk": 2, 
 
     "fields": { 
 
     "value": 3.0, 
 
     "date": "2016-09-01" 
 
     } 
 
    }, { 
 
     "model": "pricing.cashflow", 
 
     "pk": 3, 
 
     "fields": { 
 
     "value": 3.0, 
 
     "date": "2016-09-01" 
 
     } 
 
    }, { 
 
     "model": "pricing.cashflow", 
 
     "pk": 4, 
 
     "fields": { 
 
     "value": 3.0, 
 
     "date": "2016-09-01" 
 
     } 
 
    }, { 
 
     "model": "pricing.cashflow", 
 
     "pk": 5, 
 
     "fields": { 
 
     "value": 3.0, 
 
     "date": "2016-09-01" 
 
     } 
 
    }, { 
 
     "model": "pricing.cashflow", 
 
     "pk": 6, 
 
     "fields": { 
 
     "value": 5.0, 
 
     "date": "2016-09-07" 
 
     } 
 
    }, { 
 
     "model": "pricing.cashflow", 
 
     "pk": 7, 
 
     "fields": { 
 
     "value": 3.0, 
 
     "date": "2016-09-28" 
 
     } 
 
    }, { 
 
     "model": "pricing.cashflow", 
 
     "pk": 8, 
 
     "fields": { 
 
     "value": 3.0, 
 
     "date": "2016-09-22" 
 
     } 
 
    }, { 
 
     "model": "pricing.cashflow", 
 
     "pk": 9, 
 
     "fields": { 
 
     "value": 5.0, 
 
     "date": "2016-09-16" 
 
     } 
 
    }, { 
 
     "model": "pricing.cashflow", 
 
     "pk": 10, 
 
     "fields": { 
 
     "value": 5.0, 
 
     "date": "2016-09-16" 
 
     } 
 
    }]; 
 
    } 
 

 
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div data-ng-app="MyApp"> 
 

 
    <div data-ng-controller="MyController"> 
 

 
    <table> 
 

 
     <thead> 
 
     <th>PK 
 
      <th> 
 
      <th>Value</th> 
 
      <th>Date</th> 
 
     </thead> 
 

 
     <tbody> 
 
     <tr data-ng-repeat="data in response"> 
 
      <td>{{data.pk}}</td> 
 
      <td>{{data.fields.value}}</td> 
 
      <td>{{data.fields.date}}</td> 
 
     </tr> 
 
     </tbody> 
 

 
    </table> 
 

 
    </div> 
 

 
</div>