Django template not rendering JSON response when used with AngularJS

Question

EDIT: Solved

views.py

def post_list(request):
queryset = Post.objects.all()
json_data = serializers.serialize('json', queryset)

context = {
    "jsondata" : json_data,
}

return render(request,"index.html", context)

index.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body ng-app="myapp" ng-controller="myctrl">

    {{ jsondata }}

    <div class="ui icon input">
        <input type="text" ng-model="search" placeholder="Search skills...">
        <i class="search link icon"></i>
    </div>


    <div class="ui link cards" style="padding:40px">

        <div class="card">

            <div class="image">
                <img class="ui avatar centered image" src="http://1.semantic-ui.com/images/avatar/large/elliot.jpg">
            </div>

            <div class="content">

                <div class="ui small header" ng-repeat="skill in skills | filter:search">
                    {{ skill.fields.post_title}}
                </div>

                <div class="description">
                    {{ skill.fields.post_content }}
                </div>

            </div>
        </div>
    </div>

    <script type="text/javascript">
        var skills_list = "{{ jsondata }}";

        var nice_data = JSON.parse(skills_list.replace(/&quot;/g, '"'))

        var very_nice_data = JSON.stringify(nice_data);

        console.log(very_nice_data)
    </script>
    <script>
        angular.module('skillboard', []).controller('searchskills', function ($scope) {
            $scope.skills = very_nice_data;
        });
    </script>
</body>

Output of **very_nice_data** in console is:

[
  {
    "model": "posts.post",
    "pk": 1,
    "fields": {
      "post_title": "Algorithms",
      "post_content": "Calling it.",
      "updated_on": "2016-06-12T09:09:45.198Z",
      "timestamp": "2016-04-20T09:44:21.887Z",
      "test_type": "Coding",
      "number_of_questions": 0,
      "test_url": "http://example.com"
    }
  },
  {
    "model": "posts.post",
    "pk": 4,
    "fields": {
      "post_title": "Data Structures",
      "post_content": "new content here",
      "updated_on": "2016-06-12T09:09:26.359Z",
      "timestamp": "2016-04-26T06:28:32.569Z",
      "test_type": "Coding",
      "number_of_questions": 0,
      "test_url": "http://example.com"
    }
  },
  {
    "model": "posts.post",
    "pk": 11,
    "fields": {
      "post_title": "Dynamic Programming",
      "post_content": "This level of DP is well suited for 2+ yr experience programmers/researchers.",
      "updated_on": "2016-06-12T09:09:16.542Z",
      "timestamp": "2016-06-12T08:44:25.705Z",
      "test_type": "Coding",
      "number_of_questions": 0,
      "test_url": "#"
    }
  }
]

I am trying to render JSON response from my django view into my template using angular. I am using semantic cards for each item. JSON response is perfectly fine. ng-repeat is also looping for number of items in the JSON but post_title and post_content is not displaying.

<div class="ui small header" ng-repeat="skill in skills | filter:search">
    {{ skill.fields.post_title }}
</div>

<div class="description">
    {{ skill.fields.post_content }}
</div>

Where is the bug? Please help.

charlietfl · Accepted Answer · 2016-06-14 04:03:17Z

0

Don't stringify very-nice_data.

It needs to be a javscript array not a json string when you do $scope.skills = very_nice_data;

answered Jun 14, 2016 at 4:03

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3105927 Over a year ago

the output of nice_data is an array of objects: Array[3]0: Object1: Object2: Objectlength: 3__proto__: Array[0] How do i use ng-repeat with this array. Keeping $scope.skills = nice_data is also not working.

Shashank Agrawal · Accepted Answer · 2016-06-14 05:11:25Z

0

What Charlieftl answered is perfect. Instead of var very_nice_data = JSON.stringify(nice_data); just do var very_nice_data = nice_data;

var app = angular.module("skillboard", []);

app.controller("searchskills", function($scope) {
  $scope.skills = very_nice_data;
});

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


<div ng-app="skillboard" ng-controller="searchskills">
  <div class="ui small header" ng-repeat="skill in skills | filter:search">
    {{ skill.fields.post_title }}
  </div>
</div>

<script type="text/javascript">
  var skills_list = '[{"model":"posts.post","pk":1,"fields":{"post_title":"Algorithms","post_content":"Calling it.","updated_on":"2016-06-12T09:09:45.198Z","timestamp":"2016-04-20T09:44:21.887Z","test_type":"Coding","number_of_questions":0,"test_url":"http://example.com"}},{"model":"posts.post","pk":4,"fields":{"post_title":"Data Structures","post_content":"new content here","updated_on":"2016-06-12T09:09:26.359Z","timestamp":"2016-04-26T06:28:32.569Z","test_type":"Coding","number_of_questions":0,"test_url":"http://example.com"}},{"model":"posts.post","pk":11,"fields":{"post_title":"Dynamic Programming","post_content":"This level of DP is well suited for 2+ yr experience programmers/researchers.","updated_on":"2016-06-12T09:09:16.542Z","timestamp":"2016-06-12T08:44:25.705Z","test_type":"Coding","number_of_questions":0,"test_url":"#"}}]'

  var nice_data = JSON.parse(skills_list.replace(/&quot;/g, '"'))

  var very_nice_data = nice_data;
</script>

answered Jun 14, 2016 at 5:11

Shashank Agrawal

25.9k11 gold badges98 silver badges126 bronze badges

1 Comment

user3105927 Over a year ago

I tried. The output was blank. I don't think it would resolve the issue completely. Seems that django processed the curly braces {{ }}. IMO there is a conflict between angularjs braces and django braces. Any suggestions on that?

user3105927 · Accepted Answer · 2016-06-17 03:03:19Z

0

Finally resolve the issue. I encountered to issue below:

There was conflict in the curly braces of django and angular view bindings. So i created custom bindings below.

    var app=angular.module('appName', []);
    app.config(function($interpolateProvider) {
    $interpolateProvider.startSymbol('[[');
    $interpolateProvider.endSymbol(']]');
    });

answered Jun 17, 2016 at 3:03

user3105927

133 bronze badges

Collectives™ on Stack Overflow

Django template not rendering JSON response when used with AngularJS

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related