Coding Coding - 2 months ago 7
AngularJS Question

Angular JS convert 2 dim JSON in django

I have a 2 dimensional JSON which I want to translate to a html table. Something like this: http://www.bogotobogo.com/AngularJS/AngularJS_Tables.php

I heard about serializing (ng-compile) but is that not a bit to much work for this? And how will it work?

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


view:

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

You can assign your data to a scope variable and repeat the items in table rows.

Heres an example of using the ngRepeat directive:

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

Comments