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: 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](https://docs.djangoproject.com/en/1.9/howto/custom-template-
tags/#registering-custom-filters) 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)
    

