HTML view cannot see AngularJS

Question

I am making a backend call using AngularJS using AJAX. My call returns the JSON successfully. This code is written in a JavaScript file.

I have a html file in the same code base which is unable to iterate through this JSON. My JavaScript snippet is as below:

        angular.module('kmapp').controller("FieldCodesCtrl", ['$scope', function($scope){

                var model =  {};

                console.log("FieldCodesCtrl");
                $http.get("/my/rest/URL").success(function (data) {
                    model.items = data;
                    console.log("data set on items");
                    $scope.fieldCodes = model;
                    console.log($scope.fieldCodes.items.length);
                });


               // $scope.fieldCodes = model;

            }]);

My html is as below:

            <tr ng-repeat="item in fieldCodes.items">
                <td>{{item.id}}</td>
                <td>{{item.comment}}</td>
            </tr>

My issue is that the "fieldCodes.items" has nothing in the html. So it does not display the ID and Comment that I get from my JSON.

Can someone please help. I am new to AngularJS. So please excuse me if it is something obvious.

What about when you do just item in fieldCodes? Kindly post your json — Mike Cheel
– Mike Cheel, Commented Aug 7, 2014 at 18:11
initialize your property $scope.fieldCodes before you $http. Then when you alter its value the html will respond. — beauXjames
– beauXjames, Commented Aug 7, 2014 at 18:13
Here is my JSON: { fieldCodes: { items: [{ id: XXX name: CCC value: DD comment: AA }, { id: aaaa name: aaaaadd value: ddf comment: ee }] } } — SSM
– SSM, Commented Aug 7, 2014 at 19:16

Riyadh Ul Islam · Accepted Answer · 2014-08-07 18:37:35Z

1

Instead of using model.items = data; , Use model = data; Otherwise it will not defined properly. As you are using in your view (model bind) item.id looks ok. so try with this (model = data) Hope this will work. I can Answer you more specify, If you can sent the sample JSON.

Thanks \Riyadh

answered Aug 7, 2014 at 18:37

Riyadh Ul Islam

1721 silver badge7 bronze badges

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

3 Comments

SSM Over a year ago

{ fieldCodes: { items: [{ id: XXX name: CCC value: DD comment: AA }, { id: aaaa name: aaaaadd value: ddf comment: ee }] } }

SSM Over a year ago

model = data does not help :(

Owen Over a year ago

@SSM Did you try model = data.fieldCodes?

Justin Workman · Accepted Answer · 2014-08-07 18:42:03Z

1

$http needs to be injected into your controller.

.controller("FieldCodesCtrl", ['$scope', '$http', function($scope, $http){

Make sure you have your module registered to the HTML tag in the document. I think it is something like "ng-app."

answered Aug 7, 2014 at 18:42

Justin Workman

3883 silver badges6 bronze badges

1 Comment

SSM Over a year ago

Does not help :( Any suggestions?

Owen · Accepted Answer · 2014-08-07 20:03:06Z

0

Maybe I'm looking at this wrong, but it seems that you are assigning this object to model.items

{ fieldCodes: { 
    items: [
        { id: XXX name: CCC value: DD comment: AA }, 
        { id: aaaa name: aaaaadd value: ddf comment: ee }] 
    }
}

Wouldn't you instead want model = data.fieldCodes; to be able to use fieldCodes.items?

edited Aug 7, 2014 at 20:03

answered Aug 7, 2014 at 19:48

Owen

7187 silver badges17 bronze badges

2 Comments

SSM Over a year ago

$scope.$apply(function(){$scope.fieldCodes.items = data;console.log("data set on items");}) inside the AJAX call did the magic!

Owen Over a year ago

If you have to run $apply, you should rethink your methods. Look into encompassing your $http (or $resource) call in a service. Then , return the results. That way $apply is automatically applied.

Collectives™ on Stack Overflow

HTML view cannot see AngularJS

3 Answers 3

3 Comments

1 Comment

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

2 Comments

Related