AngularJS $scope.Itemlist undefined

Question

Good day I am trying to read data from the database but its not working properly i need to refresh twice to load the data. And if the data was not load properly the scope.item list stated not define. Thanks

$scope.ItemList = [];
$http({
    method: 'GET',
    url: 'json/Item.php',
}).success(function (result) {
    $scope.ItemList = result;
});

$http({
    method: 'GET',
    url: 'json/ItemOrder.php?ID=' + $scope.DeliveryID,
}).success(function (result) {

    $scope.result = result;


    angular.forEach($scope.result, function (value, key) {

        var currentIndex = 0;
        var index = 0;
        var ItemID = value.ItemID;

        angular.forEach($scope.ItemList, function (value, key) {
            if (value.ItemID == ItemID) {
                currentIndex = index;
            }
            index++;
        });

        $scope.currentItemId = $scope.ItemList[currentIndex];
    });
});

Can you console.log on $scope.ItemList = result to see what is the result that you get ? — Farhan Tahir, Jul 12 '18 at 07:31
i get result from the database and pass data to $scope.ItemList but as i observed, i have 300+ records in the database somehow that the $http bypass the process and then proceed to the foreach i think thanks so much — Newbie, Jul 12 '18 at 07:46
Actually it happens because your `ItemOrder.php` may return result earlier than `Item.php`. — Farhan Tahir, Jul 12 '18 at 07:53
though even if it happens you are defining $scope.ItemList = []; on top before http calls. So undefined doesn't make sense. Unless your `Item.php` returns nothing and `$scope.ItemList = result` is basically setting `$scope.ItemList = undefined // result is undefined.` — Farhan Tahir, Jul 12 '18 at 07:54
i try your suggestion and i return undefined $scope.ItemList but when i check the console it display the data from the database. — Newbie, Jul 12 '18 at 09:12
I suggest to queue your both async calls with $q and once you have all results check whether your first request actually delivers an expected (ot at least empty) array. — LBA, Jul 12 '18 at 09:14
Possible duplicate of [AngularJS two http get in one controller make problems](https://stackoverflow.com/a/51296209/5535245). — georgeawg, Jul 12 '18 at 10:23

score 0 · Answer 1 · answered Jul 12 '18 at 10:19

Chain the two $http.get requests:

$scope.ItemList = [];
$http({
    method: 'GET',
    url: 'json/Item.php',
}).then(function (response) {
    var result = response.data;
    $scope.ItemList = result;
    return $http({
        method: 'GET',
        url: 'json/ItemOrder.php?ID=' + $scope.DeliveryID,
    });
}).then(function (response) {
    var result = response.data;
    $scope.result = result;

    //code that uses $scope.ItemList
});

Because calling the .then method of a promise returns a new derived promise, it is easily possible to create a chain of promises. It is possible to create chains of any length and since a promise can be resolved with another promise (which will defer its resolution further), it is possible to pause/defer resolution of the promises at any point in the chain.

For more information, see AngularJS $q Service API Reference - chaining promises

AngularJS $scope.Itemlist undefined

1 Answers1