1

I'm having difficult time displaying my JSON data from an API call I make, but I can see the response if I console log it.

My app is build up like this

angular.module('myApp', ['angularSoundManager', 'infinite-scroll'])
.controller('MovieController', function($scope, $http){

$scope.songs = [];
$scope.data = $scope.songs.slice(0, 20);
$scope.getMoreData = function () {
$scope.data = $scope.songs.slice(0, $scope.data.length + 10);
};

Function to fetch data

function fetch(){
$http.get("http://www.someAPI.com" + $scope.search + "&perpage=150")
.success(function(response){
 $scope.details = response;
 console.log(response);

 // for loop happens here to loop through the data and push it to the empty array

  for(var i=0; i < response.tracks.length; i++){

    var allTracks = {
    title: response.tracks[i].primary_title,
    };

 };
 $scope.songs.push(allTracks);
}

My HTML is 

<div infinite-scroll='getMoreData()' infinite-scroll-distance='1'>
          <div ng-repeat="song in data">
           {{song.title}}
          </div>
        </div>

I can see if I console.log(response) I get Object {ID: 0, tracks: Array[150], total: 257}

On the other hand I can display my data if I use ng-repeat="song in songs" instead. It has something to do with me assigning $scope.data to $scope.songs

Reason why I want this to work with the slice is to be able to use infinite-scroll because I can expect from 100 to 15.000 results on my page

SmalliSax
  • 342
  • 3
  • 6
  • 24
  • Your `getMoreData` function returns always the ten first songs. – Michel Sep 16 '15 at 12:55
  • Yes, when I search for tracks, it should display the ten first songs and then when I call the function it should add 10 more to it. Strangely when I limit the results per page down to maybe 30 then it works. It's like it can't handle over 100 results. – SmalliSax Sep 16 '15 at 12:59
  • So what are you actually seeing displayed on the page? – Matt Ball Sep 17 '15 at 16:10
  • If I limit the results below 100 then I see what I want .. if I try to go over that then it wont show anything inside the ng-repeat div but I can still see it being fetched in the console log and being pushed to the array – SmalliSax Sep 17 '15 at 19:48

2 Answers2

0

try using 

angular.copy(source,destination);
freshbm
  • 5,540
  • 5
  • 46
  • 75
Sumodh S
  • 709
  • 1
  • 14
  • 36
0

you can limit your ng-repeat by putting limitTo:100 

<div ng-repeat="s in song" | limitTo:100">
    {{s.title}}
</div>
macrog
  • 2,085
  • 1
  • 22
  • 30
  • That doesn't seem to do any good, besides I don't want to limit the results. I want all the results to display whether they are only 10 or 15.000 – SmalliSax Sep 16 '15 at 12:59
  • well, thats right, didn't read this properly :) check this answer [then](http://stackoverflow.com/a/18206656/3033318) – macrog Sep 16 '15 at 13:05