AngularJs is empty list

Question

I make simple program with .net Core and AngularJs + webApi My Api code as below There is no Js error after running the problem is factory return nothing. when I set break point on $location.qwets = index.query(); my "qwets" is empty the length of "qwets" is 0. The get method is working each time page refresh but result is nothing.

I changed the code now I have results in 'qwets' but index is still empty

Thank you

// GET: api/values
    [HttpGet]
    public IEnumerable<ApplicationUser> Get()
    {
        return new List<ApplicationUser> {
            new ApplicationUser {Id="test", Email="[email protected]" },
            new ApplicationUser {Id="tst2",Email="[email protected]" }

        };
    }

app.js File is

(function () {
'use strict';

angular.module('saniehhaApp', [
    // Angular modules 
    //'ngRoute'

    // Custom modules  
    "indexService"
    // 3rd Party Modules

]);
})();
(function () {
'use strict';

angular
    .module('saniehhaApp')
    .controller('indexController', indexController);

indexController.$inject = ['$location', 'index'];

function indexController($location, index) {
    index.query()
    .$promise.then(function (result) {
     $scope.qwets = result;
}
})();
(function () {
'use strict';
var indexService = angular.module('indexService', ['ngResource']);

indexService.factory('index', ['$resource',
    function ($resource) {
     return $resource('/api/index/', {}, {
         query:
             {
                 method: 'GET',
                 params: {},
                 isArray: true
             }
     });
}]);
})();

and my index.html file

<!DOCTYPE html>
<html ng-app="saniehhaApp">
<head>
<meta charset="utf-8" />
<title>SampleTest</title>

<script src="vendor/angular.min.js"></script>
<script src="vendor/angular-resource.min.js"></script>
<script src="vendor/angular-route.min.js"></script>
<script src="scripts/app.js"></script>
</head>
<body ng-cloak>
<div ng-controller="indexController"></div>
<h2>list of users</h2>
<ul>
    <li ng-repeat="qwet in qwets">
        <p> "{{qwet.Id}}" - {{qwet.Email}}</p>

    </li>
</ul>
</body>
</html>

Can you check the network tab in developer bar and see if the API call is returning expected data? May be paste the response data in the question? — sabithpocker
– sabithpocker, Commented Nov 20, 2016 at 9:02
What you are describing is default $resource behavior. The request is asynchronous so $resource initially returns an empty array which then gets populated when request completes. Unless you need to do something immediately in the controller when data arrives it shouldn't be a problem...watchers in the view would still update things like ng-repeat — charlietfl
– charlietfl, Commented Nov 20, 2016 at 11:13
@sabithpocker Yes I checked the network the api returned value. — Sino
– Sino, Commented Nov 20, 2016 at 11:30

Sino · Accepted Answer · 2016-11-20 12:25:28Z

1

You are using $location and not $scope in the controller to assign properties needed in the view. The view doesn't see things in $location

Change to

function indexController($scope, index) {
    /* jshint validthis:true */
    $scope.qwets = index.query();
}

As mentioned in comments above, $resource will initially return an empty array (or object) that will subsequently be populated when the actual request completes and internal watchers will then update view when it arrives

Also bad end "div" in HTML ng-repeat not in div controller

edited Nov 20, 2016 at 12:25

Sino

3902 silver badges13 bronze badges

answered Nov 20, 2016 at 11:26

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

Collectives™ on Stack Overflow

AngularJs is empty list

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