ng-init gives parse error when it finds u' in data received from Django

Question

I am sending some data from the Django backend to the template, where I use Angular with ng-repeat and ng-init to loop through the data and print it on screen.

This is how I get the data in the backend with Python2 and Django:

country = "Global"
songs = []

for pl in pls:
    song_dict  = {}
    song_dict['title'] = pl.songs.title
    # other fields...
    songs.append(song_dict)

context = {}
context['country'] = country
context['songs'] = songs

return render(request, 'spotify_list/index.html', context)

In the template, I try to ng-init like this in order to access the data received from Django:

<div ng-app="instantSearch" ng-init="items={{songs}}">

But it looks like ng-init doesn't like the u' preceeding each key and value ({u'title':u'Test1'}, {u'title':u'Test2'}). This is the error I get:

Error: [$parse:syntax] http://errors.angularjs.org/1.4.9/$parse/syntax?p0='title'&p1=is%20unexpected%2C%20expecting%20%5B%3A%5D&p2=10&p3=items%3D%5B%7Bu'title'%3Au'Prueba1'%7D%2C%20%7Bu'title'%3Au'Prueba2'%7D%2C%20%7Bu'title'%3Au'Prueba3'%7D%5D&p4='title'%3Au'Prueba1'%7D%2C%20%7Bu'title'%3Au'Prueba2'%7D%2C%20%7Bu'title'%3Au'Prueba3'%7D%5D
    at Error (native)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js:6:416
    at Object.s.throwError (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js:213:32)
    at Object.s.consume (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js:213:207)
    at Object.s.object (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js:212:370)
    at Object.s.primary (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js:209:335)
    at Object.s.unary (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js:209:174)
    at Object.s.multiplicative (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js:208:434)
    at Object.s.additive (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js:208:261)
    at Object.s.relational (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js:208:96) <div ng-app="instantSearch" ng-init="items=[{u'title':u'Prueba1'}, {u'title':u'Prueba2'}, {u'title':u'Prueba3'}]" class="ng-scope">

I know that if I could eliminate the u' from the data, it would work well. Like this:

<div ng-app="instantSearch" ng-init="items=[{'title':'Prueba1'}, {'title':'Prueba2'}, {'title':'Prueba3'}]">

So my question is what is the best way to come around this issue?

Should I handle the data differently in the Django side? How?

Should I handle the data differently in the front side? How?

Any help would be greatly appreciated.

Answer 1

The u is python's way of designating that the data is of type unicode. The solution is to probably dump your data as json.

e.g.

<div ng-app="instantSearch" ng-init="items={{songs | json}}">

Then you just need to define and register a filter on the django side that uses json.dumps to dump the data to json. If I read the docs correctly, it looks like:

from django import template
import json
register = template.Library()
register.filter('json', json.dumps)