can't 'ng-repeat' through javascript array in AngularJS, (by getting a JSON object from Django)

Question

This question is not Django related in any way because my Django view which returns a dummy JSON object works perfectly, just thought I would share the Django view which converts a Model.objects.all() into pure JSON data then returns this pure data for an Angular controller to read and process through an ng-repeat:

from django.core import serializers
from django.utils import simplejson

def json(request):

    all_objects = list(Message.objects.all())
    to_json = serializers.serialize('json', all_objects)

    return HttpResponse(to_json, mimetype='application/json')

Now on to my question, I'm not sure if I'm having an Angular issue or pure JavaScript issue. I have an Angular controller called testjson which calls that Django view above which then successfully returns a JSON object like this:

[
   {
      "pk":1,
      "model":"chatfeed.message",
      "fields":{
         "body":"hey everyone",
         "chat_feed":"Dating",
         "likes":0,
         "author_obj":1,
         "parent_channel":1,
         "pub_date":"2014-03-18T23:29:27Z"
      }
   },
   {
      "pk":2,
      "model":"chatfeed.message",
      "fields":{
         "body":"How's it going?",
         "chat_feed":"Dating",
         "likes":0,
         "author_obj":1,
         "parent_channel":1,
         "pub_date":"2014-03-18T23:32:05Z"
      }
   },
   {
      "pk":3,
      "model":"chatfeed.message",
      "fields":{
         "body":"So what's going on right now",
         "chat_feed":"Events",
         "likes":0,
         "author_obj":1,
         "parent_channel":2,
         "pub_date":"2014-03-18T23:32:33Z"
      }
   },
   {
      "pk":4,
      "model":"chatfeed.message",
      "fields":{
         "body":"Going pretty well actually",
         "chat_feed":"Dating",
         "likes":0,
         "author_obj":1,
         "parent_channel":1,
         "pub_date":"2014-03-18T23:32:55Z"
      }
   }
]

And so I would just like to grab the body of a particular chat_feed to be printed in Angular JS using Angular's ng-repeat to get something like this if I wanted all chat messages from chat_feed "Dating":

<div ng-controller="testjson" ng-click="getJSON()">
    <ul ng-model="chatfeed">
        <li ng-repeat="post in chatfeed">{$ post $}</li>
    </ul>
</div>

So in order to get the ng-repeat to work, I believe. I would have to loop through the raw JSON object, grab the 'body' string from each index and store them into an array so that's what I did:

app.controller("testjson", function($scope, $http)
{
        $scope.getJSON = function()
            {

                var JSONObject = $http.get('http://domfa.de/testjson/').success(function(data)
                {
                    $scope.totalfeed = data.length;

                    chatarray = new Array();
                    for (var i=0; i < data.length; i++)
                    {
                        if (data[i].fields.chat_feed == $scope.currentFeed)
                        {
                            chatarray[i] = data[i].fields.chat_feed;        
                        }
                    }

                    console.log(chatarray);
                    $scope.chatfeed = chatarray;

                }); 

            }
});

So after all that, my console.log seems to be returning the proper array just fine with the "body" s from the correct chat_feed . Console.log() is doing what I want it to do and the array it prints is properly formatted with perfect syntax, but as for the HTML which calls the ng-repeat="post in chatfeed" angular function it doesn't seem to print anything at all unless I physically copy and past the array console.log() prints out and replace ng-model="chatfeed" with a hardcoded array the console.log() generates for me with no problems using ng-init="['hows it going?', 'hey everyone']" .

Answer 1

You are calling getJSON to populate chatfeed when the div is clicked. I wasn't able to trigger getJSON because I couldn't see where to click. So, I added some text to the div:

<div ng-controller="MainCtrl" ng-click="getJSON()">click me!
  <ul>
    <li ng-repeat="post in chatfeed">{{ post }}</li>
  </ul>
</div>

When I clicked the div, I got an error message regarding duplicates in ng-repeat . If currentFeed = 'Dating', then there are 3 matching chat posts with the 'Dating' chat_feed . To allow for the duplicates, I added a tracking expression:

<li ng-repeat="post in chatfeed track by $index">{{ post }}</li>

But then, the list only displayed 'Dating' 3 times. You want the messages to be displayed - not the category. So, I changed the getJSON to add body instead of chat_feed to chatarray :

$scope.chatarray.push($scope.data[i].fields.body)

After making this change, the tracking expression is no long necessary because the body of each chat is unique.

Here is the plunker demo with the final adjustments: http://plnkr.co/edit/J4PtDpeRHO8TVItUnHJw?p=preview