Store Json file in AngularJS variable to use with 'ng-repeat'

Question

The goal of this project is to display Oracle PL/SQL records in a web site. I have used the following tutorial (http://draptik.github.io/blog/2013/07/13/angularjs-example-using-a-java-restful-web-service/) to set up a connection with the database. I was able to store and display values for a single record, but not when more records were added in.

Sample JSON Information
[  
 {  "firstName":"FN1",  
    "lastName":"LN1",  
    "email":null,  
    "createdBy":-1,  
    "createdDate":"2013-09-24"  
 },  
 {  "firstName":"FN2",  
    "lastName":"LN2",  
    "email":null,  
    "createdBy":-1,  
    "createdDate":"2013-09-24"  
 },  
 {  "firstName":"FN3",  
    "lastName":"LN3",  
    "email":null,  
    "createdBy":-1,  
    "createdDate":"2013-09-24"  
 },  
 {  "firstName":"FN4",  
    "lastName":"LN4",  
    "email":null,  
    "createdBy":-1,  
    "createdDate":"2013-09-24"  
 },  
 {  "firstName":"FN5",  
    "lastName":"LN5",  
    "email":null,  
    "createdBy":-1,  
    "createdDate":"2013-09-24"  
 }  
]

The example uses a factory, which I am convinced is holding the data from the json, but I can't get it to store more than the single record. Ideally, I would be able to cycle through the records the way they do in this example: http://jsfiddle.net/pJ5BR/124/.

I would appreciate any suggestions with this. These are how the factory is defined currently.

services.js:  
services.factory('QueryFactory', function ($resource) {
    return $resource('/Query/rest/json/queries/get', {}, {
        query: {
            method: 'GET',
            params: {},
            isArray: false
        }
    });
});

controllers.js:  
app.controller('MyCtrl1', ['$scope', 'QueryFactory', function ($scope, QueryFactory) {

    QueryFactory.get({}, function (QueryFactory) {
        $scope.firstName = QueryFactory.firstName;
    });
}]);

I'm still lost in what you are trying to do... Here is how I use to use ng repeat using json vars for angular: jsfiddle.net/uvzKn — porfiriopartida
– porfiriopartida, Commented Sep 27, 2013 at 21:34

Matthias · Accepted Answer · 2013-09-27 21:37:03Z

2

The result of QueryFactory.get() is not stored in QueryFactory, but rather stored in a returned promise object. Also, you need to use query() instead of get(), because the response is an array and not a single object.

So your controller should look like this:

app.controller('MyCtrl1', ['$scope', 'QueryFactory', function ($scope, QueryFactory) {
    $scope.results = QueryFactory.query();
    // $scope.results is set to a promise object, and is later updated with the AJAX response
}]);

You can use the data in your HTML like this:

<ul ng-controller="MyCtrl1">
  <li ng-repeat="result in results">{{result.firstName}}</li>
</ul>

answered Sep 27, 2013 at 21:37

Matthias

15.8k9 gold badges51 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

C1pher Over a year ago

This did the trick. The results are populating the way I had wanted.

Collectives™ on Stack Overflow

Store Json file in AngularJS variable to use with 'ng-repeat'

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related