2

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

Mosta
  • 868
  • 10
  • 23
  • where's the rest of controller? Did you initialize `ng-app` in view? Don't call `getFeed()` in view...do it in controller – charlietfl Feb 20 '16 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 ? – Mosta Feb 20 '16 at 15:52
  • 2
    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 Feb 20 '16 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}]; – Mosta Feb 20 '16 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 Feb 20 '16 at 16:06
  • @charlietfl I added the code for getfeed() it get the data using jquery and it seems to get the data correctly as JSON, but the problem seems that I cannot update the self.feed object in the view although it seems to be updated on Javascript side. Thanks – Mosta Feb 20 '16 at 17:02
  • @charlietfl I got the data loading now, I updated the question,thanks – Mosta Feb 20 '16 at 19:51

1 Answers1

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

Mosta
  • 868
  • 10
  • 23