pass data from Django view to react

Question

I have a django view that returns a variable in order to be rendered in template

return render_to_response('index.html', {
    'courses': courses})

I'm using ReactJS to render the index.html file, but I'm not sure whether i have to point to index.html in my view or the ReactJS file.
If I have to point to index.html how can I use the courses variable with React ?

Update the variable courses that i'm passing is of type dictionnary

sorry for not mentioning that, courses is a dictionnary – ChemseddineZ May 12 '17 at 01:34 — ChemseddineZ, May 12 '17 at 01:34

score 1 · Answer 1 · edited May 23 '17 at 12:10

Templates processing is anterior to any sort of JavaScript interpretation. This means that you will have to, in some sense, emulate its hardcoding beetween the js tags.

First, know that the python dictionary is likely to be corrupted when received on the client side. To prevent this, you may want to send it as a json object. Which means that, in you script views.py, you will have to json.dumps your dictionary. As follows

from django.shortcuts import render
import json
#...
    #...
    return render(request,
                 'your_app/index.html',\
                  {'courses': json.dumps(courses)}\
                  )

Note that I use render instead of render_to_response, because render is a brand spanking new shortcut for render_to_response in 1.3 that will automatically use RequestContext

Also, note that you do have to point to your index.html, but the exact path depends on the strucutre of your project. Above, I assume you followed the recommended django project layout, i.e.

myproject/
    manage.py
    your_project/
        __init__.py
        urls.py
        wsgi.py
        settings/
            __init__.py
            base.py
            dev.py
            prod.py
    your_app/
        __init__.py
        models.py
        managers.py
        views.py
        urls.py
        templates/
            your_app/
                index.html
    [...]

Then, on the html side,

...
<script>
 var courses = {{courses|safe}}
// working with the variable courses
</script>
...

Now, you can do what you want with it, be it with ReactJS library.

I followed your answer and i tried to iterate over the courses variable but It gave an error that it's not iterable. However I have another doubt because i think i have to fetch the variable inside the react file wich is a seperate one from the index.html file — ChemseddineZ, May 13 '17 at 14:09
@ChemseddineZ. Not iterable ? In JavaScript ? How did you do that ? Like this : `for (var prop in courses) { alert("Key:" + prop); alert("Value:" + courses[prop]); }` ? — keepAlive, May 14 '17 at 02:18

pass data from Django view to react

1 Answers1