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 ?

It is hard to tell without knowing the context where you are trying to do console.log in your code, and where your $scope.creneaux object is being populated with the two arrays. But seems to me like you are trying to do console.log($scope.creneaux.inscriptions) before it is available. — show-me-the-code, CommentedOct 8, 2015 at 15:24
@jannagy02 : i added more code. It comes from a factory method. i gave full code — Nightf, CommentedOct 8, 2015 at 16:38

show-me-the-code · Accepted Answer · 2015-10-10 02:57:20Z

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.

Thanks a lot m8, it works great and helped me understanding this concept ! — Nightf, CommentedOct 10, 2015 at 12:53
Please mark the answer as accepted if it was helpful. This will help future visitors find the right answer without having to go through all the posts and comments. — show-me-the-code, CommentedOct 10, 2015 at 13:07

rvalerio · Accepted Answer · 2015-10-08 15:38:05Z

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])

creneaux contains 2 arrays : creneaux and inscriptions. i tried console.log($scope.creneaux.creneaux[0]) => gives me undefined — Nightf, CommentedOct 8, 2015 at 16:32
could you show a bit of the code where you call the method of that service? — rvalerio, CommentedOct 8, 2015 at 19:34

Collectives™ on Stack Overflow

Javascript : dealing with arrays into object (in angular)

2 Answers 2

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Related