angular.js > How can i get inner JSON data in view ( using ng-repeat directive )

Question

i am having trouble with angular.js rendering json data with ng-repeat directives. I am currently working with Django REST Framework. Please see the source code below. Thanks.

REST API works very well. ( result via curl command )

user$ curl localhost:8000/posts/ -i

HTTP/1.0 200 OK
Date: Sat, 02 Aug 2014 15:37:27 GMT
Server: WSGIServer/0.1 Python/2.7.8
Vary: Accept, Cookie
X-Frame-Options: SAMEORIGIN
Content-Type: application/json
Allow: GET, POST, HEAD, OPTIONS

[{"id": 1, "title": "First Post", "content": "hello world, my first post"}, {"id": 2, "title": "this is my second post via POST request", "content": "should return 201 Created"}, {"id": 3, "title": "third post", "content": "why not working"}]%

app.js : very simple controller using $http service.

(function(){
    var app = angular.module("PostApp", []);
    app.controller("PostCtrl", ["$scope", "$http", function($scope, $http){
        var store = this;
        $http.get('/posts/')
            .success(function(data){
                $scope.datas = data;
                console.log(data[0]);
            });
    }]);
})();

result of console.log(data[0]) is ... ( from Chrome Developer Tools > Console )

Object {id: 1, title: "First Post", content: "hello world, my first post"}

i am actually not sure about why this is an "Object".

view ( index.html )

<html ng-app="PostApp">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    {% load staticfiles %}

    <title>Angular.js with Django</title>
  </head>
  <body ng-controller="PostCtrl as pc">
    <h1>Welcome to Angular.JS</h1>
    <div ng-repeat="data in datas">
      <h3>{{ data.title }}</h3>
    </div>
    <script src="{% static 'posts/angular.js' %}"></script>
    <script src="{% static 'posts/app.js' %}"></script>
  </body>
</html>

Rendered HTML, which not i intended.

it did NOT rendered {{ data.title }}, ( h3 element is empty )

<html ng-app="PostApp" class="ng-scope"><head><style type="text/css">@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide{display:none !important;}ng\:form{display:block;}.ng-animate-block-transitions{transition:0s all!important;-webkit-transition:0s all!important;}.ng-hide-add-active,.ng-hide-remove{display:block!important;}</style>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">


    <title>Angular.js with Django</title>
  </head>
  <body ng-controller="PostCtrl as pc" class="ng-scope">
    <h1>Welcome to Angular.JS</h1>
    <!-- ngRepeat: data in datas --><div ng-repeat="data in datas" class="ng-scope">
      <h3></h3>
    </div><!-- end ngRepeat: data in datas --><div ng-repeat="data in datas" class="ng-scope">
      <h3></h3>
    </div><!-- end ngRepeat: data in datas --><div ng-repeat="data in datas" class="ng-scope">
      <h3></h3>
    </div><!-- end ngRepeat: data in datas -->
    <script src="/static/posts/angular.js"></script>
    <script src="/static/posts/app.js"></script>  
</body></html>

what should i have to change to render appropriate json data in view. in this case {{ data.title }} ?

this link is very helpful. http://stackoverflow.com/questions/13671701/angularjs-twig-conflict-with-double-curly-braces — ansuchan.eth, Aug 03 '14 at 10:37

Mark · Answer 1 · 2014-08-02T16:10:38.990

Your angular code looks fine to me. The problem I think you are having is this is a Django template, which also uses curly braces. When Django processes the template it is looking for its own variable in those braces and, not finding one, replaces them with nothing.

There are a few solutions. An easy one is a nice template tag called Verbatim that will allow you to do this in your template:

{%load verbatim%}

{%verbatim%}
<h3>{{ data.title }}</h3>
{%endverbatim%}

Note: As of django 1.5 verbatim is included.

score 0 · Answer 2 · edited May 23 '17 at 12:31

Tested the returned data and it works fine in my test, but I didn't use $http. But according to this post you may need to initialize the $scope variable first before calling the $http.get() method since it returns a $promise which can't be iterated over.

Try this

(function(){
    var app = angular.module("PostApp", []);
    app.controller("PostCtrl", ["$scope", "$http", function($scope, $http){
        var store = this;
        $scope.datas = [];
        $http.get('/posts/')
            .success(function(data){
                $scope.datas = data;
                console.log(data[0]);
            });
    }]);
})();

sunil · Answer 3 · 2016-04-22T07:38:19.210

app.js

  (function(){
              var app = angular.module("PostApp[]).config(function($interpolateProvider{
              $interpolateProvider.startSymbol('p--');
              $interpolateProvider.endSymbol('--p');
              });
              app.controller("PostCtrl", ["$scope", "$http", function($scope, $http{
              var store = this;
                  $http.get('/authors/')
                      .success(function(data){
                          $scope.datas = data;
                          console.log(data[0]);
                      });
              }]); })();

Html -

  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    {% load staticfiles %}

    <title>Angular.js with Django</title>
  </head>
  <body ng-controller="PostCtrl as pc">
    <h1>Welcome to Angular.JS</h1>
    <div ng-repeat="data in datas">


        <h3>p-- data.first_name --p </h3>


    </div>
    <script src="{% static 'lib/angular.min.js' %}"></script>
    <script src="{% static 'JS/app.js' %}"></script>
  </body>
</html>