Angular binding ajax data through array

Question

I am trying to load the ajax data into array then bind the array using Angular, here is my code (I am beginner with KO experience so I try to keep it simple to work)

Update I got it working I think the problem was loading the page before loading the Ajax data, (Although I think it is normal to load the page first!!) but here is what happened , I am using Onsen UI , which loads page templates on mobile, so the solution was moving the "SetMainPage" (the function which loads the page/navigation) I moved this function to be called after the data is loaded (ajax >success). And binding now works .

I am not sure it is best practice if you have tips for me would be appreciated

1- In my controller I set the following feed as empty array then I try to fill:

var self= this;
self.feed = [];.....

when loading ajax i set the value for this array

angular.extend(self.feed, data.obj);
            alert(JSON.stringify(self.feed));

so the second line give me alert of the data correctly loaded in the object self.feed But this does not reflect on the angular view when calling, there seems to be no items in bd.feed

    <div ng-repeat="act in bd.feed">
        {{act.activity_id}}
    </div>

where bd is defined as controller in the body Tag as follow

<html lang="en" ng-app="app" ng-csp>
<body id="body" ng-controller="MyController as bd">

and here is how i initialize the controller

angular.module('app', ['onsen']).controller('MyController', function ($scope,$rootScope) {
var self = this;

and I call the ajax function from the view like:

{{bd.getfeed()}}

Code for getfeed in controller

self.getfeed = function () {
    $.ajax({
        type: 'POST',
        url: "http://www.server.com/api",
        crossDomain: true,
        data: { panel: 'ok' },
        success: function (data) {
            console.log(data);
                var json_obj = JSON.parse(data);
                console.log(json_obj);
                var obj = json_obj.obj;
                console.log(obj);

                angular.extend(self.feed, json_obj.obj);
                        },
        error: function (data) {  }
    });
}

may be I am missing a lot of things but I just want a way to load the json to object and display correctly..then may be some advices come later about best practices

Thanks for your help

where's the rest of controller? Did you initialize ng-app in view? Don't call getFeed() in view...do it in controller — charlietfl
– charlietfl, Commented Feb 20, 2016 at 15:28
@charlietfl I have added more details, how do you suggest calling get feed() from controller, currently it is called when loading a specific template ? — Mostafa
– Mostafa, Commented Feb 20, 2016 at 15:52
How is template being determined? Whenever angular encounters your ng-controller it will invoke that controller and that's where you would call getFeed() and in callback assign data to controller model. Models drive what happens in view — charlietfl
– charlietfl, Commented Feb 20, 2016 at 15:56
I tried to follow the example on angular.org home page under "Add Some Control" the Todo Example they have everything in the controller: .controller('TodoListController', function() { var todoList = this; todoList.todos = [ {text:'learn angular', done:true}, {text:'build an angular app', done:false}]; — Mostafa
– Mostafa, Commented Feb 20, 2016 at 16:02
So what does getFeed() do? if it makes a $http request you would assign todoList.someVar in the callback of request — charlietfl
– charlietfl, Commented Feb 20, 2016 at 16:06

Mostafa · Accepted Answer · 2016-02-26 11:27:22Z

1

I got the data loading to array using the following 2 lines

  $scope.myArray = json_obj.search_result;
 angular.extend($scope.myArray , json_obj.search_result);

Thanks

answered Feb 26, 2016 at 11:27

Mostafa

88410 silver badges25 bronze badges

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

Collectives™ on Stack Overflow

Angular binding ajax data through array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related