title: Django rest serialization - Passing JSON to Javascript
body: <p>Disclaimer - Django noob, especially REST Framework. I'm trying to create an app that for this purposes passes JSON to the template. I figured Django Rest would be ideal.</p>
  
  <p>I have set up a user profile so the user can select various attributes (works fine), and now want to pass a JSON of all the user's selections to template. Think of it as a "my profile" page.</p>
  
  <p><strong>View:</strong></p>
  
  <pre><code>        profile = Profile.objects.filter(user=request.user)
          serializer = ProfileSerializer(profile, many=True)
          myteam = JsonResponse(serializer.data, safe=False)
  
          print(myteam.content) ## to see what's being passed
  
          context = {'myteam': myteam.content}
  
          return render(request, 'main/myteam.html', context)
  </code></pre>
  
  <p><strong>Template:</strong></p>
  
  <pre><code>&lt;script&gt;
  console.log({{myteam}});
  &lt;\script&gt;
  </code></pre>
  
  <p><strong>Django server output:</strong></p>
  
  <pre><code>b'[{"user": "DAVE", "GK1": {"id": 1001, "ShortName": "J. Strummer", "Club": "CLUB", "Shirt": "SHIRT.png", "ShortClub": "ETC", "ShortPos": "FW", "CurrentVal": "10", "TotalPoints": 1}, "GK2": {"id": 320, "ShortName": "D. Jones", "Club": "CLUB2", "Shirt": "ETABE.png", "ShortClub": "ETABE", "ShortPos": "GK", "CurrentVal": "4.5", 
  </code></pre>
  
  <p><strong>Template - Google Chrome JS console:</strong></p>
  
  <pre><code>Uncaught SyntaxError: Invalid or unexpected token
  </code></pre>
  
  <p><strong>Template - Chrome details:</strong></p>
  
  <pre><code>console.log(b&amp;#39;[{&amp;quot;user&amp;quot;: &amp;quot;mikey&amp;quot;, &amp;quot;GK1&amp;quot;: {&amp;quot;id&amp;quot;: 1001, &amp;quot;ShortName&amp;quot;: &amp;quot;J. Strummer&amp;quot;, &amp;quot;Club&amp;quot;: &amp;quot;ETC&amp;quot;, &amp;quot;Shirt&amp;quot;: &amp;quot;SHIRT.png&amp;quot;, &amp;quot;ShortClub&amp;quot;: &amp;quot;ETC&amp;quot;, &amp;quot;ShortPos&amp;quot;: &amp;quot;FW&amp;quot;, &amp;quot;CurrentVal&amp;quot;: &amp;quot;10.0&amp;quot;, &amp;quot;TotalPoints&amp;quot;: 1},  // lot's more of this
  </code></pre>
  
  <p><strong>Noob Conclusion:</strong></p>
  
  <p>I don't seem to be getting a "clean" JSON object passed to the template from the server. Possibly due to the b'[ .... is this bytes literal?</p>
  
  <p>Perhaps I should be using another method to pass the JSON to the template?</p>
  
  <p>TWIST - in my testing I followed the REST tutorial and was able to setup a simple view which <strong>returned</strong> JsonResponse:</p>
  
  <pre><code>player = Player.objects.all()
  serializer = PlayerSerializer(player, many=True)
  return JsonResponse(serializer.data, safe=False)
  </code></pre>
  
  <p>Now if you go to this url mapping it displays in browser a perfect JSON example. I don't see why there should be a difference between </p>
  
  <pre><code>myteam = JsonResponse(serializer.data, safe=False)
  </code></pre>
  
  <p>and</p>
  
  <pre><code>return JsonResponse(serializer.data, safe=False)
  </code></pre>
  
  <p>I've been stuck on this on and off for literally days now so any help would be hugely appreciated.</p>