The json is doesn't work for me in angular

Question

I am trying to get dynamic data from the json according to $http results, but it doesn't work for me. I think that the problem is with the callback. I mean that is the code run to json results when my $http continue to run. This is my javascript code:

var operation_types = operation_types = [
    {nav_id: 1, nav_name: "Validation", nav_src: "validation", nav_href: "validation_list"},
    {nav_id: 2, nav_name: "Guests", nav_src: "guests", nav_href: "guests_list"}
];

angular.module("mainApp", ["kendo.directives"])
    .controller("HomepageCtrl", function ($scope,$http) {//Homepage
        /*receive user properties*/
        $http({
            url: 'API/v1/User/GetUserInfo',
            method: "GET",
            headers: { 'Content-Type': 'application/json' }
        }).success(function (data, status, headers, config) {
            if (data.Code != 1) {
                $scope.error = "Please enter valid username and password!";
            } else {
                console.log(data);
                if(data.viewGuest==true&&data.viewValidation==true){
                    $scope.source =operation_types;
                }else if(data.viewGuest==false){
                    source = operation_types[0];
                }else if(data.viewValidation==false){
                    source = operation_types[1];
                }

                //window.location.href = "homepage.html";
            }
        }).error(function (data, status, headers, config) {
            $scope.error = "There are problems with connection to server. Status:" + status + " Please, try to connect later.";
            $scope.validationClass = "invalid";
        });
         $scope.source =operation_types;

    })

This is the relevant snippet of my html code (with kendo ui):

<kendo-mobile-list-view k-data-source="source">
            <div class="product" k-template>
                <a href="\#{{dataItem.nav_href}}">
                    <img src="images/{{dataItem.nav_src}}.jpg" alt="{{dataItem.nav_name}} image" class="pullImage"/>
                    <h3>{{dataItem.nav_name}}</h3>
                </a>
            </div>
        </kendo-mobile-list-view>

Does somebody know how to do it in angular?

I thing you should keep `var operation_types;` inside the controller as `$scope.source = [];` — Saqueib, Mar 03 '15 at 11:22
Architecture note : getting data should not be done directly in the controller but in a service / or a factory . you then access the service though the controller. see http://stackoverflow.com/questions/17646034/what-is-the-best-practice-for-making-an-ajax-call-in-angular-js — Alex, Mar 03 '15 at 11:25

Alex · Answer 1 · 2015-03-03T11:44:54.293

Some general things to consider :

Your code is not using only vanilla angular , but also a 3rd party library of client side controls (Telerik Kando)
Does the binding work if data is set to the sources json directly ?
Please see for example of kendo-mobile-list-view usage at http://demos.telerik.com/kendo-ui/mobile-listview/angular
Are you sure you the ajax request gets to the server ?
Are you sure the JSON returned is what you expect (use network monitor in the dev tools in your browser of choice to find out , F12 usualy )?

Edit

Also

At

 if(data.viewGuest==true&&data.viewValidation==true){
                    $scope.source =operation_types;
                }else if(data.viewGuest==false){
                    source = operation_types[0];
                }else if(data.viewValidation==false){
                    source = operation_types[1];
                }

Sometimes you set the source on the $scope

 $scope.source =operation_types;

and other you set a local variable named source.

source = operation_types[1];

Did you mean to set the

$scope.source

At the 2 last 'if' branches?

Another thing:

$http call is asynchrounus . So if you ment to assign initial value to

$scope.source

then it is better done before the ajax call , otherwise you risk a race condition.

The json is doesn't work for me in angular

1 Answers1