How to use Django list of objects variable in AngularJS?

Question

So I have a variable like this from Django:

[<Topic object>, <Topic object>]

I pass it to Angular using ng-init like this:

<div class="profile-navigation" ng-init="ProfileTopics={{ProfileTopics|safe}} ">

I got syntax parsing error instead of a success.

angular.js:12520 Error: [$parse:syntax] http://errors.angularjs.org/1.4.8/$parse/syntax?p0=%3C&p1=not%20a%20primary%20expression&p2=16&p3=ProfileTopics%3D%5B%3CTopic%3A%20Topic""bject%3E%2C%20%3CTopic%3A%20Topic%object%3E%5D&p4=%3CTopic%3A%20Topic%object%3E%2C%20%3CTopic%3A%20Topic%object%3E%5D at Error (native) at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js:6:416 at Object.s.throwError (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js:210:32) at Object.s.primary (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js:207:6) at Object.s.unary (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js:206:174) at Object.s.multiplicative (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js:205:434) at Object.s.additive (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js:205:261) at Object.s.relational (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js:205:96) at Object.s.equality (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js:204:425) at Object.s.logicalAND (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js:204:278)

Answer 1

You can't just send an object from Django to Angular. You need to serialize it to JSON first.

You can do that in a basic way with Django's built-in serializers, but the third-party project Django Rest Framework is more customizable and easier to use.

Answer 2

In order to get on Angular, I found this as an amazing guide. In order to send it from Django, you might need to:

1. Convert those objects to dicts
2. Use JSONResponse to return data