Using angular-ui with angular. Markup includes an ng-scroll element, which I have working with retrieved data from a service. I'd like to create rows of items so an ng-repeat inside an ng-scroll. This works in principle (plunker) but AngularJS says I have something wrong in the JSON encoding and need help to figure out what I'm doing wrong.
So to be clear, the markup and JSON below work in plunker but not in the app. The JSON in the plunker and below is taken from the debugger response body.
Markup:
<div class="row" >
<div class="col-md-12" >
<div class="video_thumb" ng-scroll='video_list in VideoIndexScrollerSource' buffer-size='10' padding="2" >
<div class="row" ng-repeat="video in video_list">
<p>
<a ng-href="/guides/{{video._id}}" target="_self">
<img ng-src="{{video.thumb}}">
</a>
</p>
</div>
</div>
</div>
</div>
JSON:
In Rails, I create an array of arrays. Each element is a hash of properties to use in the above display code. The JSON returned looks like this:
[
[
{
"thumb": "/uploads/thumb_11167113_det.jpg",
"_id": "52264092a0eef2d029673f72"
},
{
"thumb": "/uploads/thumb_11169448_det.jpg",
"_id": "522649b7a0eea05c61388f4a"
},
{
"thumb": "/uploads/thumb_278817_det.jpg",
"_id": "522649b4a0eea05c61388be2"
},
{
"thumb": "/uploads/thumb__old_",
"_id": "522e5290e4b0889f651f13ae"
},
{
"thumb": "/uploads/thumb_269411_det.jpg",
"_id": "522649baa0eea05c613891b3"
},
{
"thumb": "/uploads/thumb__old_",
"_id": "5227d1f3a0ee91bdc636efb9"
},
{
"thumb": "/uploads/thumb_11169964_det.jpg",
"_id": "52264091a0eef2d029673e49"
}
],
[
...
],
[
...
]
]
Not sure why this doesn't work, the ng-scroll should iterate rows putting an array into video_list, ng-repeat should grab each object from the row and get values.
Error:
This is the AngularJS error I get when the above JSON is returned:
TypeError: Object #<Resource> has no method 'push'
at copy (http://localhost:3000/assets/angular-1.2.0/angular.js?body=1:827:33)
at new Resource (http://localhost:3000/assets/angular-1.2.0/angular-resource.js?body=1:402:21)
at http://localhost:3000/assets/angular-1.2.0/angular-resource.js?body=1:483:52
at Array.forEach (native)
at forEach (http://localhost:3000/assets/angular-1.2.0/angular.js?body=1:301:21)
at angular.module.factory.Resource.(anonymous function).$http.then.value.$resolved (http://localhost:3000/assets/angular-1.2.0/angular-resource.js?body=1:482:37)
at deferred.promise.then.wrappedCallback (http://localhost:3000/assets/angular-1.2.0/angular.js?body=1:10598:99)
at deferred.promise.then.wrappedCallback (http://localhost:3000/assets/angular-1.2.0/angular.js?body=1:10598:99)
at http://localhost:3000/assets/angular-1.2.0/angular.js?body=1:10684:40
at Scope.$get.Scope.$eval (http://localhost:3000/assets/angular-1.2.0/angular.js?body=1:11577:44) angular.js?body=1:9102
(anonymous function) angular.js?body=1:9102
$get angular.js?body=1:6707
deferred.promise.then.wrappedCallback angular.js?body=1:10601
deferred.promise.then.wrappedCallback angular.js?body=1:10598
(anonymous function) angular.js?body=1:10684
$get.Scope.$eval angular.js?body=1:11577
$get.Scope.$digest angular.js?body=1:11422
$get.Scope.$apply angular.js?body=1:11683
done angular.js?body=1:7700
pleteRequest angular.js?body=1:7866
xhr.onreadystatechange angular.js?body=1:7822
Using angular-ui with angular. Markup includes an ng-scroll element, which I have working with retrieved data from a service. I'd like to create rows of items so an ng-repeat inside an ng-scroll. This works in principle (plunker) but AngularJS says I have something wrong in the JSON encoding and need help to figure out what I'm doing wrong.
So to be clear, the markup and JSON below work in plunker but not in the app. The JSON in the plunker and below is taken from the debugger response body.
Markup:
<div class="row" >
<div class="col-md-12" >
<div class="video_thumb" ng-scroll='video_list in VideoIndexScrollerSource' buffer-size='10' padding="2" >
<div class="row" ng-repeat="video in video_list">
<p>
<a ng-href="/guides/{{video._id}}" target="_self">
<img ng-src="{{video.thumb}}">
</a>
</p>
</div>
</div>
</div>
</div>
JSON:
In Rails, I create an array of arrays. Each element is a hash of properties to use in the above display code. The JSON returned looks like this:
[
[
{
"thumb": "/uploads/thumb_11167113_det.jpg",
"_id": "52264092a0eef2d029673f72"
},
{
"thumb": "/uploads/thumb_11169448_det.jpg",
"_id": "522649b7a0eea05c61388f4a"
},
{
"thumb": "/uploads/thumb_278817_det.jpg",
"_id": "522649b4a0eea05c61388be2"
},
{
"thumb": "/uploads/thumb__old_",
"_id": "522e5290e4b0889f651f13ae"
},
{
"thumb": "/uploads/thumb_269411_det.jpg",
"_id": "522649baa0eea05c613891b3"
},
{
"thumb": "/uploads/thumb__old_",
"_id": "5227d1f3a0ee91bdc636efb9"
},
{
"thumb": "/uploads/thumb_11169964_det.jpg",
"_id": "52264091a0eef2d029673e49"
}
],
[
...
],
[
...
]
]
Not sure why this doesn't work, the ng-scroll should iterate rows putting an array into video_list, ng-repeat should grab each object from the row and get values.
Error:
This is the AngularJS error I get when the above JSON is returned:
TypeError: Object #<Resource> has no method 'push'
at copy (http://localhost:3000/assets/angular-1.2.0/angular.js?body=1:827:33)
at new Resource (http://localhost:3000/assets/angular-1.2.0/angular-resource.js?body=1:402:21)
at http://localhost:3000/assets/angular-1.2.0/angular-resource.js?body=1:483:52
at Array.forEach (native)
at forEach (http://localhost:3000/assets/angular-1.2.0/angular.js?body=1:301:21)
at angular.module.factory.Resource.(anonymous function).$http.then.value.$resolved (http://localhost:3000/assets/angular-1.2.0/angular-resource.js?body=1:482:37)
at deferred.promise.then.wrappedCallback (http://localhost:3000/assets/angular-1.2.0/angular.js?body=1:10598:99)
at deferred.promise.then.wrappedCallback (http://localhost:3000/assets/angular-1.2.0/angular.js?body=1:10598:99)
at http://localhost:3000/assets/angular-1.2.0/angular.js?body=1:10684:40
at Scope.$get.Scope.$eval (http://localhost:3000/assets/angular-1.2.0/angular.js?body=1:11577:44) angular.js?body=1:9102
(anonymous function) angular.js?body=1:9102
$get angular.js?body=1:6707
deferred.promise.then.wrappedCallback angular.js?body=1:10601
deferred.promise.then.wrappedCallback angular.js?body=1:10598
(anonymous function) angular.js?body=1:10684
$get.Scope.$eval angular.js?body=1:11577
$get.Scope.$digest angular.js?body=1:11422
$get.Scope.$apply angular.js?body=1:11683
done angular.js?body=1:7700
pleteRequest angular.js?body=1:7866
xhr.onreadystatechange angular.js?body=1:7822
- I suspect that there is some parsing code in angular, some convention that I'm running afoul of since the raw data works in the plunk but there it is already parsed. The app relies on Angular to parse the response. – pferrel Commented Dec 7, 2013 at 23:54
- I'm using a resource "query" method where isArray is true--another similar question has this as a solution. – pferrel Commented Dec 7, 2013 at 23:59
-
Can you include your $resource call? (since we see from the stack trace the issue is within:
$get– KayakDave Commented Dec 8, 2013 at 0:00 - No issue with get, it was returning an array of arrays, which AngularJS apparently does not allow. I had to wrap each inner array with an object and everything worked. Slightly different way to address the data is show below. – pferrel Commented Dec 22, 2013 at 17:21
2 Answers
Reset to default 1I had to wrap each inner array in a dummy "row" hash. Angular doesn't like arrays of arrays, it expects arrays of objects. This markup works with the new json:
<div class="row" >
<div class="col-md-12" >
<div class="video_thumb" ng-scroll='video_list in VideoIndexScrollerSource' buffer-size='10' padding="2" >
<div class="row" ng-repeat="video in video_list.row">
<p>
<a ng-href="/guides/{{video._id}}" target="_self">
<img ng-src="{{video.thumb}}">
</a>
</p>
</div>
</div>
</div>
</div>
I've seen this when setting the Angular $resource method to get when you're receiving an array (or otherwise not setting isArray:true when receiving an array).
The method query expects an array (docs):
'query': {method:'GET', isArray:true},
get expects an object:
'get': {method:'GET'},