Develop Reference

can't get data form array

I try to get data from the array but I get undefined
please check the image of my problem
I don't know what I'm missing
please help
I have an array called nameTable of string
when I console.log(this.nameTable) I got this : check the image please
enter image description here
and when I click to arrow I got this : check image please
enter image description here
the problem is the table has 5 element I want to show them so I make for loop to do that
for (let i = 0; i < 5; i++){
console.log(this.nameTable[i])
}
but us you can see in the image I got undefined
enter image description here
here the code :
employeeL:Array<Awinjard> = [];
inv_agentTab: Array<Inv_agent> = [];
drafbiesTab: Array<Drafbies> = [];
nameemployee: string = "";
inv_agentNombre: number = 0;
matriculeTable: Array<number> = [];
nameTable:Array<string> = [];
validatationTable: Array<number> = [];
ngOnInit() {
this.folder = this.activatedRoute.snapshot.paramMap.get('id');
this.awinjard.getAwinjardMatricule().subscribe(res => {
this.inv_agentTab = res as Array<Inv_agent>
this.inv_agentTab.forEach(element => {
this.matriculeTable[this.inv_agentNombre] = element.AGENT;
this.validatationTable[this.inv_agentNombre] = element.VLD;
this.inv_agentNombre++;
this.awinjard.getAwinjardNameAr().subscribe(res2 => {
this.drafbiesTab = res2 as Array<Drafbies>
this.drafbiesTab=this.drafbiesTab.filter((employee)=>employee.DECAFFE==element.AGENT)
this.nameemployee = this.drafbiesTab[0].AR_DELAFFE;
this.nameTable.push(this.nameemployee);
})
});
for (let i = 0; i < 5; i++){
// here the problem I can't get the data form nameTable array
console.log(this.nameTable[i])
let awin= <Awinjard> {
matricule: this.matriculeTable[i],
fullname: this.nameTable[i],
status: true,
done: 1,
mustBeDone:40
}
this.employeeL.push(awin);
}
})
}

You have subscribed to getAwinjardNameAr and before that response, you are trying to access the nameTable array, which is why you get undefined. #raishav-hanspal's solution is right to solve your issue, but a code change can keep things straightforward. I suggest you to write that code inside your for loop inside your subscribe. Here's the alteration:
this.awinjard.getAwinjardNameAr().subscribe(res2 => {
this.drafbiesTab = res2 as Array<Drafbies>
this.drafbiesTab=this.drafbiesTab.filter((employee)=>employee.DECAFFE==element.AGENT)
this.nameemployee = this.drafbiesTab[0].AR_DELAFFE;
this.nameTable.push(this.nameemployee);
let awin= <Awinjard> {
matricule: this.matriculeTable[this.inv_agentNombre],
fullname: this.nameemployee,
status: true,
done: 1,
mustBeDone:40
}
this.employeeL.push(awin);
})

You can move the code where you're logging nameTable[] inside the subscribe (where you are pushing the values into nameTable[]).
A complete solution is to use complete in subscribe() -->
this.awinjard.getAwinjardNameAr().subscribe(res2 => {
this.drafbiesTab = res2 as Array<Drafbies>
this.drafbiesTab=this.drafbiesTab.filter((employee)=>employee.DECAFFE==element.AGENT)
this.nameemployee = this.drafbiesTab[0].AR_DELAFFE;
this.nameTable.push(this.nameemployee);
},err => {console.log(err)}, ()=> {
for (let i = 0; i < 5; i++){
// here the problem I can't get the data form nameTable array
console.log(this.nameTable[i])}})
});
You can read more on https://angular.io/guide/observables

Multiple api calls using AngularJS

I am fairly new to AngularJS and I am practising below exercise with requirement
1.Using the API to get 20 posts and display them on the page along with the user’s
name who created the post and display them on the page.
For this exercise I am using https://jsonplaceholder.typicode.com/ as the data source.
I need to do 2 api calls in same controller
To get list of 20 posts which has userid in it(https://jsonplaceholder.typicode.com/posts)
Based on the above user Id I need to get username (https://jsonplaceholder.typicode.com/users/userId)
Please see my work done in plnkr, I am able to display Post but not username.
Script.js
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("https://jsonplaceholder.typicode.com/posts").then(function(response) {
$scope.data = response.data;
var postList = [];
for (var i = 0; i < 20; i++) {
var display = {
UserName: $http.get("https://jsonplaceholder.typicode.com/users/" + $scope.data[i].userId).then(function(response) {
$scope.user = response.data;
}),
Post: $scope.data[i].title
}
postList.push(display);
}
$scope.list = postList;
});
});
Index.html
<div ng-repeat="x in list">
Post:{{ x.Post }}
UserName:{{x.UserName}}
</div>

I believe this area is wrong:
.then(function(response) {
$scope.data = response.data;
var postList = [];
for (var i = 0; i < 20; i++) {
var display = {
UserName: $http.get("https://jsonplaceholder.typicode.com/users/"+$scope.data[i].userId).then(function(response){
$scope.user = response.data;
}),
Post: $scope.data[i].title
}
postList.push(display);
}
$scope.list = postList;
});
where you stored a Promise object in your UserName property and produced unexpected result.
to correct this assign the postList after the request has finished:
.then(function(response) {
$scope.data = response.data;
var postList = [];
for (var i = 0; i < 20; i++) {
$http.get("https://jsonplaceholder.typicode.com/users/"+$scope.data[i].userId).then(function(response){
$scope.user = response.data;
var display = {
UserName: "",
Post: $scope.data[i].title
};
$scope.list.push(display);
});
}
$scope.list = postList;
});
Once you implemented this you will encounter a new problem:
since you called $http.get() in a loop and actually used the variable i inside .then() by the time .then() executes the value of i is already in its final form which is i = 20 | data.length which every .then() calls will receive.
in order to overcome this problem the best way I know is to format the entire data first before displaying it:
$http.get("https://jsonplaceholder.typicode.com/posts")
.then(function(response)
{
var data = response.data;
var postList = [];
// this will check if formatting is done.
var cleared = 0;
// create a function that checks if data mapping is done.
var allClear = function () {
if (postList.length == cleared)
{
// display the formatted data
$scope.list = postList;
}
};
for (var i = 0; i < data.length; i++)
{
// create a object that stores the necessary data;
var obj = {
// the ID will be needed to store name;
ID: data[i].userId,
Post: data[i].title,
UserName: ""
};
var url = "https://jsonplaceholder.typicode.com/users/" + obj.userId;
$http.get(url).then(function(response)
{
// find its entry in the array and add UserName;
postList.forEach(function (item)
{
if (item.ID == response.userId)
{
// just add the correct key, but I will assume it is `userName`
item.UserName = response.userName;
// break the loop
return item;
}
});
// increment cleared
cleared++;
// call allClear
allClear();
});
postList.push(obj);
}
}
);
in this way we are sure that the data is complete before displaying it in the view.
as this solution contains a loop to map the result with its original object, we can actually change postList as an object to make it a bit faster:
// var postList = [];
var postList = {};
// instead of pushing we will use the ID as key
// postList.push(obj);
postList[obj.ID] = obj;
and so in this section:
$http.get(url).then(function(response)
{
// instead of looking for the item in .forEach
postList[response.userId].userName = response.userName;
// increment cleared
cleared++;
// call allClear
allClear();
});
hope that helps.

The easy solution would be to add the username to the user object and then push it to the scope list when the promise is resolved
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("https://jsonplaceholder.typicode.com/posts").then(function(response) {
$scope.data = response.data;
$scope.list = [];
for (var i = 0; i < 20; i++) {
$http.get("https://jsonplaceholder.typicode.com/users/" + $scope.data[i].userId)
.then(function(response) {
var user = {
UserName: response.data.username,
Post: $scope.data[i].title
}
$scope.list.push(user);
});
}
});
});

Calling forEach on Dictionary in Node.js

I am trying to loop over a Firebase reference. It works but for some reason the forEach loop runs one more time than there are objects in the reference. This causes the Promise.all() function to fail and the whole promise to fail. Here is my code. I have no Idea what I'm doing wrong.
return userReceiptMetrics.child(userID).child('postItemIDs').orderByChild('itemID').equalTo(oldProductID).once('value', function(oldSnapshot) {
var oldPostItemIDs = [];
var metrics = oldSnapshot.val()
if (oldSnapshot.val() != null) {
return Promise.all(oldSnapshot.forEach(function(record) {
console.log(record.val());
var oldKey = record.key;
var newKey = oldKey.replace(oldProductID, newProductID);
var data = record.val();
oldPostItemIDs.push(oldKey);
data.itemID = newProductID;
updateObject['userReceiptMetrics/'+userID+'/postItemIDs/'+newKey] = data;
updateObject['userReceiptMetrics/'+userID+'/postItemIDs/'+oldKey] = null;
})).then(function() {
return Promise.all(oldPostItemIDs.map(function(oldPostItemID) {
return userReceiptMetrics.child(userID).child('postItems').child(oldPostItemID).then(function(oldPostItem) {
var oldKey = oldPostItem.key
var newKey = oldKey.replace(oldProductID, newProductID)
var data = record.val()
updateObject['userReceiptMetrics/'+userID+'/postItems/'+newKey] = data;
updateObject['userReceiptMetrics/'+userID+'/postItems/'+oldKey] = null;
progress(38);
});
}))
}).catch(function(error) {
console.log('fudge louise');
});
}
});
Here is the console output:
App listening on port 8080
Press Ctrl+C to quit.
FIREBASE WARNING: Using an unspecified index. Consider adding ".indexOn": "_state" at /productUpdateQueue/tasks to your security rules for better performance
FIREBASE WARNING: Using an unspecified index. Consider adding ".indexOn": "_state" at /productUpdateQueue/tasks to your security rules for better performance
{ date: '2016-12-21 22:05:03',
itemID: 'Macys-EReceipts-MENS HOSIERY-Size(No size provided)-Color(No color provided)-786888403743',
postID: '-KZbmaThvxNmrvHwh_mc' }
{ date: '2016-12-21 22:05:03',
itemID: 'Macys-EReceipts-MENS HOSIERY-Size(No size provided)-Color(No color provided)-786888403743',
postID: '-KZbxAUcwzcP28C91EZA' }
FIREBASE WARNING: Using an unspecified index. Consider adding ".indexOn": "itemID" at /userReceiptMetrics/HeQST8hSkoPUmkBiVDR0tpSPo0x2/postItemIDs to your security rules for better performance
fudge louise

So it looks like the Promise.all() call failed because there is an empty object at the end of the list of objects. Here is the corrected code.
return userReceiptMetrics.child(userID).child('postItemIDs').orderByChild('itemID').equalTo(oldProductID).once('value', function(oldSnapshot) {
var oldPostItemIDs = [];
var metrics = oldSnapshot.val()
if (oldSnapshot.val() != null) {
return Promise.all(oldSnapshot.forEach(function(record) {
console.log(record.val());
var oldKey = record.key;
var newKey = oldKey.replace(oldProductID, newProductID);
var data = record.val();
oldPostItemIDs.push(oldKey);
data.itemID = newProductID;
updateObject['userReceiptMetrics/'+userID+'/postItemIDs/'+newKey] = data;
updateObject['userReceiptMetrics/'+userID+'/postItemIDs/'+oldKey] = null;
})).then(function() {
return oldPostItemIDs.map(function(oldPostItemID) {
return userReceiptMetrics.child(userID).child('postItems').child(oldPostItemID).then(function(oldPostItem) {
var oldKey = oldPostItem.key
var newKey = oldKey.replace(oldProductID, newProductID)
var data = record.val()
updateObject['userReceiptMetrics/'+userID+'/postItems/'+newKey] = data;
updateObject['userReceiptMetrics/'+userID+'/postItems/'+oldKey] = null;
progress(38);
});
})
}).catch(function(error) {
console.log('fudge louise');
});
}
});

Javascript variable is an array of objects but can't access the elements

I am using Firebase database and Javascript, and I have code that will get each question in each category. I have an object called category will contain the name, the questions, and the question count, then it will be pushed into the list of categories (questionsPerCategory). Inside the the callback function I just do console.log(questionsPerCategory). It prints the object (array) that contains the categories and questions. Now my problem is that when I do console.log(questionsPerCategory[0]) is says it's undefined, I also tried console.log(questionsPerCategory.pop()) since it's an array but it's also undefined. Why is that? Below is the code and the image of the console log. Additional note: CODE A and C are asynchronous, CODE B and D are synchronous.
this.getQuestionsForEachCategory = function(callback, questions, questionsPerCategory) {
var ref = firebase.database().ref('category');
var questionRef = firebase.database().ref('question');
console.log('get questions for each category');
// CODE A
ref.once("value", function(snapshot) {
// CODE B
snapshot.forEach(function(childSnapshot) {
var key = childSnapshot.key;
var childData = childSnapshot.val();
var category = {
category_name: childData.category_name
};
// CODE C
questionRef.orderByChild("category_name").equalTo(childData.category_name).once("value", function(questionSnapshot){
var count = 0;
var q = [];
// CODE D
questionSnapshot.forEach(function(childQuestionSnapshot) {
var questionObj = childQuestionSnapshot.val();
count++;
questions.push(questionObj.question);
q.push(questionObj.question);
});
category.questions = q;
category.questionCount = count;
questionsPerCategory.push(category);
});
});
callback(questionsPerCategory);
});
};

The callback(questionsPerCategory); should happen when all async calls are finished.
Right now the questionsPerCategory is not ready when the callback is called.
I would use Promise API to accomplish this.
Depending on the Promise library you are using, this can be accomplished in a different ways, e.g. by using bluebird it looks like you need map functionality.

Try this code:
this.getQuestionsForEachCategory = function(callback, questions) {
var ref = firebase.database().ref('category');
var questionRef = firebase.database().ref('question');
console.log('get questions for each category');
var questionsPerCategory = [];
// CODE A
ref.once("value", function(snapshot) {
// CODE B
snapshot.forEach(function(childSnapshot) {
var key = childSnapshot.key;
var childData = childSnapshot.val();
var category = {
category_name: childData.category_name
};
// CODE C
questionRef.orderByChild("category_name").equalTo(childData.category_name).once("value", function(questionSnapshot){
var count = 0;
var q = [];
// CODE D
questionSnapshot.forEach(function(childQuestionSnapshot) {
var questionObj = childQuestionSnapshot.val();
count++;
questions.push(questionObj.question);
q.push(questionObj.question);
});
category.questions = q;
category.questionCount = count;
questionsPerCategory.push(category);
});
callback(questionsPerCategory);
});
});
};

code refactoring, how to elegantly overwrite object values

so I have a call to factory and after everything goes fine I want to reset the values of imput fields and as you can see in the code below I do this by hand.
vm.submitRequest = () = > {
requestedBooksFactory.requestBook(vm.title, vm.author, vm.link, vm.destination, vm.currentUser, vm.comments)
.then(function (newbook) {
let booksInTotal = vm.requestedBooks.allBooks.length + 1;
vm.requestedBooks.allBooks.push(newbook);
vm.requestedBooks.header = requestedBooksFactory.requestedText(booksInTotal);
}).then(() = > {
vm.title = '';
vm.author = '';
vm.link = '';
vm.comments = '';
vm.destination = false;
vm.submitted = false;
})
}
I dont like the way this looks, but cant come up with a way to solve it

My own way to refactore this code:
vm.submitRequest = submitRequest;
/**************/
function submitRequest() {
return requestBook()
.then(bookReceived)
.then(clearController);
}
function requestBook() {
return requestedBooksFactory.requestBook(vm.title, vm.author, vm.link, vm.destination, vm.currentUser, vm.comments);
}
function bookReceived(book) {
vm.requestedBooks.allBooks.push(book);
vm.requestedBooks.header = requestedBooksFactory.requestedText(vm.requestedBooks.allBooks.length);
}
function clearController() {
vm.title = '';
vm.author = '';
vm.link = '';
vm.comments = '';
vm.destination = false;
vm.submitted = false;
}
Source should not to be too zipped. It should be readable and clear.
Don't use anonymous functions for long methods.
They was designed for short iterators.
Don't afraid function names, they here for you, not for parser.
For parser you'll use obfuscators.
But I try to post what are you looking for :)
function clearController() {
['title', 'author', 'link', 'comments'].forEach(f => {vm[f] = '';});
['destination', 'submitted'].forEach(f => {vm[f] = false;});
}