Angular how to JSON array values into existing scope?

Question

Angular how to JSON array values into existing scope?

I'm trying to push some JSON data into scope for list whiteout (after tap on load next items btw) to append on the and of the list (Using Ionic framework and infiniteScroll)

Could somebody tell me please, what i'm doing wrong and how to append new list items to the end?

Thanks for any advice.

JSON array example:

  var fakeListData = [
        { "DATE" : testDateTimeFormated,
            "NUMBER_OF_ALL_CALLS" : 25,
            "RESULT_DONE" : 0,
            "RESULT_NOT_INTERESTED" : 0,
            "RESULT_NO_APP" : 0
        },
        { "DATE" : testDateTimeFormated,
            "NUMBER_OF_ALL_CALLS" : 0,
            "RESULT_DONE" : 0,
            "RESULT_NOT_INTERESTED" : 0,
            "RESULT_NO_APP" : 0
        }];

Item filling:

// Option one (throwing Chrome sendrequest error: TypeError: Converting circular structure to JSON)
    $scope.listData.push(fakeListData);

// Option two (crash browser)    
angular.forEach(fakeListData,function(item) {
  $scope.listData.push(item);
});

javascript
json
angularjs
list
ionic-framework

Answer 1

Try this

$scope.listData=[];

fakeListData.forEach(function(item){
   $scope.listData.push(item);
})

Answer 2

We can push more items into existing array, but the syntax should be like this:

// instead of this
// $scope.listData.push(fakeListData);

// we should use this
[].push.apply($scope.listData, fakeListData);

NOTE: Also, important thing to mention with Angular JS.

If we want to clear the array, while keeping the reference to it, we should do it like this

// instead of this, which creates new array/new reference
// $scope.listData = [];

// we should use this, which will keep the reference, but clear its content
$scope.listData.length = 0

This way we can re-fill array during the $scope lifetime and all angular watches will refelect it properly

Check this as well: Short way to replace content of an array