title: Send a queryset of models from Django to React using Ajax
body: <p>I've been looking for info about this for hours without any result. I am rendering a page using React, and I would like it to display a list of Django models. I am trying to use ajax to fetch the list of models but without any success.</p>
  
  <p>I am not sure I understand the concept behind JSon, because when I use the following code in my view:</p>
  
  <pre><code>data = list(my_query_set.values_list('categories', 'content'))
  return JsonResponse(json.dumps(data, cls=DjangoJSONEncoder), safe=False)
  </code></pre>
  
  <p>It seems to only return a string that I cannot map (React says that map is not a function when I call it on the returned object). I thought map was meant to go through a JSon object and that json.dumps was suppose to create one...</p>
  
  <p>Returned JSon "object" (which I believe to just be a string):
  <em>For the time being I have only one test model with no category and the content "At least one note "</em></p>
  
  <pre><code>[[null, "At least one note "]]
  </code></pre>
  
  <p>React code:</p>
  
  <pre><code>$.ajax({
          type:"POST",
          url: "",
          data: data,
          success: function (xhr, ajaxOptions, thrownError) {
  
              var mapped = xhr.map(function(note){
                  return(
                      &lt;p&gt;
                          {note.categories}
                          {note.content}
                      &lt;/p&gt;
                  )
              })
  
              _this.setState({notes: mapped})
          },
          error: function (xhr, ajaxOptions, thrownError) {
              alert("failed");
          }
      });
  </code></pre>
  
  <p>Can someone please point me to the best way to send Models from Django to React, so I can use the data from this model in my front end?</p>