Javascript : dealing with arrays into object (in angular)

Question

I have the following issue :

$scope.creneaux1=creneauxFactory.list();
console.log($scope.creneaux)

gives me what i expect :

Object {}

and inside the object

creneaux : Arrays[35]
inscriptions : Arrays[554]

etc..

Whenever i try to acess te inscriptions arrays with

console.log($scope.creneaux.inscriptions)
console.log($scope.creneaux.inscriptions[0])
console.log($scope.creneaux["inscriptions"])

I got undefined.

How can i do ?

Factory part thats is used therefore :

    var creneaux ={},
  urlphp = "http://bacly.fr/baclymphp/",
  phpFiles = {
        getCreneaux: "getCreneaux.php",
        getInscriptionsclub: "getInscriptionsclub.php",
        getUsers: "getUsers.php"
    },
    countResponse=0;

function getDate(from, onSuccess, onError) {

    $http.get(urlphp + from).then(function (response) {
        if (response) {
            if (onSuccess) {
                onSuccess(response)
            }
        } else if (onError) {
            onError()
        }
    }, function () {
        onError();
    }
    )
}
getDate(phpFiles.getCreneaux, function (response) {
    creneaux.creneaux = response.data;
    countResponse++;
}, function () {
    alert("pas d acces reseau");
});
getDate(phpFiles.getInscriptionsclub, function (response) {
    creneaux.inscriptions = response.data;
    countResponse++;
}, function () {
    alert("pas d acces reseau");
});
getDate(phpFiles.getUsers, function (response) {
    creneaux.users = response.data;
    countResponse++;
}, function () {
    alert("pas d acces reseau");
});


 return {
    getResponseAfterSuccess: function (onSuccess, onError) {  

        if (Object.keys(phpFiles).length == countResponse) {
            if (onSuccess) onSuccess(tournois);
        } else {
            if (onError) onError(tournois);
        }
    },    
    list: function(){
        return creneaux;
    },
    listinsc: function(){
        return creneaux.inscriptions;
    },        
    findcreneau: function(cid){
        return _.find(creneaux.creneaux, function(t) {return t.creneau_id === cid});
    },
    findinscription: function(cid){
        return _.filter(creneaux.inscriptions, function(t) {return t.inscriptions_uid == cid});
    },

UPDATE : i tried to improve my code but when i use for example :

        $scope.selectedinscription=creneauxFactory.findinscription(window.localStorage.getItem('logmbaclyuid'));

i get an empty array. How to proceed to wait for data to be available ?

Answer 1

You need to properly wait until all your data has been received, and then fire a callback. Here's one way to do it.

<div ng-app="myApp" ng-controller="testCtrl"> 
    <pre>
    {{selectedinscription|json}}
    </pre>
</div>

// Factory
var app = angular.module('myApp', []);
app.factory('dataFactory', function ($http) {
    var urlphp = "http://jsonplaceholder.typicode.com/",
        phpFiles = {
            getCreneaux: "posts",
            getInscriptionsclub: "albums",
            getUsers: "comments"
        },
        countResponse = 0;

    function getDate(from, onSuccess, onError) {

        $http.get(urlphp + from).then(function (response) {
            if (response) {
                if (onSuccess) {
                    onSuccess(response)
                }
            } else if (onError) {
                onError()
            }
        }, function () {
            onError();
        })
    }




    return {
        creneaux: {},
        init: function (callback) {
            var that = this;
            getDate(phpFiles.getCreneaux, function (response) {
                console.log(response);
                that.creneaux.creneaux = response.data;
                that.getResponseAfterSuccess(callback);
            }, function () {
                alert("pas d acces reseau");
            });
            getDate(phpFiles.getInscriptionsclub, function (response) {
                console.log(response);
                that.creneaux.inscriptions = response.data;
                that.getResponseAfterSuccess(callback);
            }, function () {
                alert("pas d acces reseau");
            });
            getDate(phpFiles.getUsers, function (response) {
                console.log(response);
                that.creneaux.users = response.data;
                that.getResponseAfterSuccess(callback);
            }, function () {
                alert("pas d acces reseau");
            });
        },
        getResponseAfterSuccess: function (callback) {
            if (_.keys(phpFiles).length === _.keys(this.creneaux).length) {
                callback();
            }
        },
        list: function () {
            return this.creneaux;
        },
        listinsc: function () {
            return this.creneaux.inscriptions;
        },
        findcreneau: function (cid) {
            return _.find(this.creneaux.creneaux, function (t) {
                return t.id === cid
            });
        },
        findinscription: function (cid) {
            console.log("Searching for " + cid);
            console.log(this.creneaux);
            return _.filter(this.creneaux.inscriptions, function (t) {
                return t.id == cid
            });
        }
    };
});

// Controller
app.controller('testCtrl', function ($scope, dataFactory) {
    var onSuccess = function () {
        $scope.selectedinscription = dataFactory.findinscription(1);
    };

    dataFactory.init(onSuccess);

});

And here's a working Fiddle. I have used generic REST APIs to pull data, but you get the point.

Answer 2

creneaux : Arrays[35]
inscriptions : Arrays[554]

If this is inside $scope.creneaux, then the output means that creneaux holds another creneaux array, so you would access it like so:

console.log($scope.creneaux.creneaux[0])