TypeError: Cannot read property '0' of undefined from the Array using AngularJS
up vote
0
down vote
favorite
I am trying to create a webpage where when a user logs in from the login page, my page that is the 'user management' page should display users belonging to the login user's company.
For eg: When a user belonging to company APPLE logs in, this webpage should only display users belonging to APPLE.
In the code, "currentUser" is the login user I get from the login page via localStorage getItem. "allUsers" array is the list of all users from different companies. Empty array "user" should display only display Current user's company's-users from the list of allUsers.
For that I have used FOR LOOP seen at the end of the JS file. I'm getting a error that the property 'company' is undefined. Looking for someone to help me. Thanks in advance.
var myApp = angular.module("myApp", );
myApp.controller("myController", function ($scope) {
console.log("in controller...");
$scope.newUser = {};
$scope.info = "";
if ($scope.users = JSON.parse(localStorage.getItem("users")) !== null) {
$scope.users = JSON.parse(localStorage.getItem("users"));
}
if (localStorage.getItem("currentUser") !== null) {
var currentUser = JSON.parse(localStorage.getItem("currentUser"));
console.log("Received");
}
else {
console.log("Not received");
}
if (localStorage.getItem("allUsers") === null) {
$scope.allUsers = [
{ email: "John@yahoo.com", password:"John123", firstName: "John", lastName: "Doe", contact: "281-283-2480", role: "Supplier-Admin", company: "Apple" },
{ email: "Rick@yahoo.com", password: "Rick123", firstName: "Rick", lastName: "Fraiser", contact: "987-283-2489", role: "Supplier-User", company: "Apple" },
{ email: "Sam@yahoo.com", password: "Sam123", firstName: "Sam", lastName: "Tarly", contact: "456-786-2480", role: "BuyerAdmin", company: "Samsung" }
];
localStorage.setItem("allUsers", JSON.stringify($scope.allUsers));
// localStorage.setItem("users", JSON.stringify($scope.users));
} else {
$scope.allUsers = JSON.parse(localStorage.getItem("allUsers"));
}
//filter allUsers based on currentUser's role
for (var i = 0; $scope.allUsers.length; i++) {
$scope.users = [{}];
if ($scope.allUsers[i].company === currentUser[0].company) {
$scope.users.push($scope.allUser[i]);
}
localStorage.setItem("users", JSON.stringify($scope.users));
}
});
javascript arrays angularjs
add a comment |
up vote
0
down vote
favorite
I am trying to create a webpage where when a user logs in from the login page, my page that is the 'user management' page should display users belonging to the login user's company.
For eg: When a user belonging to company APPLE logs in, this webpage should only display users belonging to APPLE.
In the code, "currentUser" is the login user I get from the login page via localStorage getItem. "allUsers" array is the list of all users from different companies. Empty array "user" should display only display Current user's company's-users from the list of allUsers.
For that I have used FOR LOOP seen at the end of the JS file. I'm getting a error that the property 'company' is undefined. Looking for someone to help me. Thanks in advance.
var myApp = angular.module("myApp", );
myApp.controller("myController", function ($scope) {
console.log("in controller...");
$scope.newUser = {};
$scope.info = "";
if ($scope.users = JSON.parse(localStorage.getItem("users")) !== null) {
$scope.users = JSON.parse(localStorage.getItem("users"));
}
if (localStorage.getItem("currentUser") !== null) {
var currentUser = JSON.parse(localStorage.getItem("currentUser"));
console.log("Received");
}
else {
console.log("Not received");
}
if (localStorage.getItem("allUsers") === null) {
$scope.allUsers = [
{ email: "John@yahoo.com", password:"John123", firstName: "John", lastName: "Doe", contact: "281-283-2480", role: "Supplier-Admin", company: "Apple" },
{ email: "Rick@yahoo.com", password: "Rick123", firstName: "Rick", lastName: "Fraiser", contact: "987-283-2489", role: "Supplier-User", company: "Apple" },
{ email: "Sam@yahoo.com", password: "Sam123", firstName: "Sam", lastName: "Tarly", contact: "456-786-2480", role: "BuyerAdmin", company: "Samsung" }
];
localStorage.setItem("allUsers", JSON.stringify($scope.allUsers));
// localStorage.setItem("users", JSON.stringify($scope.users));
} else {
$scope.allUsers = JSON.parse(localStorage.getItem("allUsers"));
}
//filter allUsers based on currentUser's role
for (var i = 0; $scope.allUsers.length; i++) {
$scope.users = [{}];
if ($scope.allUsers[i].company === currentUser[0].company) {
$scope.users.push($scope.allUser[i]);
}
localStorage.setItem("users", JSON.stringify($scope.users));
}
});
javascript arrays angularjs
YourcurrentUsermay beundefined. Check your condition in the retrieving of your currentUser from the localstorage.
– Sw0ut
4 hours ago
The currentUser array does show in the localStorage in the browser developer tools. And I also get the console message "Received" under the if (localStorage.getItem("currentUser") != null) statement.
– Vaibhav Shankar
4 hours ago
Maybe, but you should add a condition. And I don't see a declaration of yourivariable. You should clean your localstorage, because residual things of what you did before may stay in your variables.
– Sw0ut
3 hours ago
@Sw0ut I did clear localStorage, still no good. I don't understand what do you mean by- "And I don't see a declaration of your i variable". I can say that the code certainly gets the currentUser data because it shows the message "Received". If i clear the CurrentUser data and run again, I get "Not received".
– Vaibhav Shankar
3 hours ago
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I am trying to create a webpage where when a user logs in from the login page, my page that is the 'user management' page should display users belonging to the login user's company.
For eg: When a user belonging to company APPLE logs in, this webpage should only display users belonging to APPLE.
In the code, "currentUser" is the login user I get from the login page via localStorage getItem. "allUsers" array is the list of all users from different companies. Empty array "user" should display only display Current user's company's-users from the list of allUsers.
For that I have used FOR LOOP seen at the end of the JS file. I'm getting a error that the property 'company' is undefined. Looking for someone to help me. Thanks in advance.
var myApp = angular.module("myApp", );
myApp.controller("myController", function ($scope) {
console.log("in controller...");
$scope.newUser = {};
$scope.info = "";
if ($scope.users = JSON.parse(localStorage.getItem("users")) !== null) {
$scope.users = JSON.parse(localStorage.getItem("users"));
}
if (localStorage.getItem("currentUser") !== null) {
var currentUser = JSON.parse(localStorage.getItem("currentUser"));
console.log("Received");
}
else {
console.log("Not received");
}
if (localStorage.getItem("allUsers") === null) {
$scope.allUsers = [
{ email: "John@yahoo.com", password:"John123", firstName: "John", lastName: "Doe", contact: "281-283-2480", role: "Supplier-Admin", company: "Apple" },
{ email: "Rick@yahoo.com", password: "Rick123", firstName: "Rick", lastName: "Fraiser", contact: "987-283-2489", role: "Supplier-User", company: "Apple" },
{ email: "Sam@yahoo.com", password: "Sam123", firstName: "Sam", lastName: "Tarly", contact: "456-786-2480", role: "BuyerAdmin", company: "Samsung" }
];
localStorage.setItem("allUsers", JSON.stringify($scope.allUsers));
// localStorage.setItem("users", JSON.stringify($scope.users));
} else {
$scope.allUsers = JSON.parse(localStorage.getItem("allUsers"));
}
//filter allUsers based on currentUser's role
for (var i = 0; $scope.allUsers.length; i++) {
$scope.users = [{}];
if ($scope.allUsers[i].company === currentUser[0].company) {
$scope.users.push($scope.allUser[i]);
}
localStorage.setItem("users", JSON.stringify($scope.users));
}
});
javascript arrays angularjs
I am trying to create a webpage where when a user logs in from the login page, my page that is the 'user management' page should display users belonging to the login user's company.
For eg: When a user belonging to company APPLE logs in, this webpage should only display users belonging to APPLE.
In the code, "currentUser" is the login user I get from the login page via localStorage getItem. "allUsers" array is the list of all users from different companies. Empty array "user" should display only display Current user's company's-users from the list of allUsers.
For that I have used FOR LOOP seen at the end of the JS file. I'm getting a error that the property 'company' is undefined. Looking for someone to help me. Thanks in advance.
var myApp = angular.module("myApp", );
myApp.controller("myController", function ($scope) {
console.log("in controller...");
$scope.newUser = {};
$scope.info = "";
if ($scope.users = JSON.parse(localStorage.getItem("users")) !== null) {
$scope.users = JSON.parse(localStorage.getItem("users"));
}
if (localStorage.getItem("currentUser") !== null) {
var currentUser = JSON.parse(localStorage.getItem("currentUser"));
console.log("Received");
}
else {
console.log("Not received");
}
if (localStorage.getItem("allUsers") === null) {
$scope.allUsers = [
{ email: "John@yahoo.com", password:"John123", firstName: "John", lastName: "Doe", contact: "281-283-2480", role: "Supplier-Admin", company: "Apple" },
{ email: "Rick@yahoo.com", password: "Rick123", firstName: "Rick", lastName: "Fraiser", contact: "987-283-2489", role: "Supplier-User", company: "Apple" },
{ email: "Sam@yahoo.com", password: "Sam123", firstName: "Sam", lastName: "Tarly", contact: "456-786-2480", role: "BuyerAdmin", company: "Samsung" }
];
localStorage.setItem("allUsers", JSON.stringify($scope.allUsers));
// localStorage.setItem("users", JSON.stringify($scope.users));
} else {
$scope.allUsers = JSON.parse(localStorage.getItem("allUsers"));
}
//filter allUsers based on currentUser's role
for (var i = 0; $scope.allUsers.length; i++) {
$scope.users = [{}];
if ($scope.allUsers[i].company === currentUser[0].company) {
$scope.users.push($scope.allUser[i]);
}
localStorage.setItem("users", JSON.stringify($scope.users));
}
});
javascript arrays angularjs
javascript arrays angularjs
edited 3 hours ago
asked 4 hours ago
Vaibhav Shankar
65
65
YourcurrentUsermay beundefined. Check your condition in the retrieving of your currentUser from the localstorage.
– Sw0ut
4 hours ago
The currentUser array does show in the localStorage in the browser developer tools. And I also get the console message "Received" under the if (localStorage.getItem("currentUser") != null) statement.
– Vaibhav Shankar
4 hours ago
Maybe, but you should add a condition. And I don't see a declaration of yourivariable. You should clean your localstorage, because residual things of what you did before may stay in your variables.
– Sw0ut
3 hours ago
@Sw0ut I did clear localStorage, still no good. I don't understand what do you mean by- "And I don't see a declaration of your i variable". I can say that the code certainly gets the currentUser data because it shows the message "Received". If i clear the CurrentUser data and run again, I get "Not received".
– Vaibhav Shankar
3 hours ago
add a comment |
YourcurrentUsermay beundefined. Check your condition in the retrieving of your currentUser from the localstorage.
– Sw0ut
4 hours ago
The currentUser array does show in the localStorage in the browser developer tools. And I also get the console message "Received" under the if (localStorage.getItem("currentUser") != null) statement.
– Vaibhav Shankar
4 hours ago
Maybe, but you should add a condition. And I don't see a declaration of yourivariable. You should clean your localstorage, because residual things of what you did before may stay in your variables.
– Sw0ut
3 hours ago
@Sw0ut I did clear localStorage, still no good. I don't understand what do you mean by- "And I don't see a declaration of your i variable". I can say that the code certainly gets the currentUser data because it shows the message "Received". If i clear the CurrentUser data and run again, I get "Not received".
– Vaibhav Shankar
3 hours ago
Your
currentUser may be undefined. Check your condition in the retrieving of your currentUser from the localstorage.– Sw0ut
4 hours ago
Your
currentUser may be undefined. Check your condition in the retrieving of your currentUser from the localstorage.– Sw0ut
4 hours ago
The currentUser array does show in the localStorage in the browser developer tools. And I also get the console message "Received" under the if (localStorage.getItem("currentUser") != null) statement.
– Vaibhav Shankar
4 hours ago
The currentUser array does show in the localStorage in the browser developer tools. And I also get the console message "Received" under the if (localStorage.getItem("currentUser") != null) statement.
– Vaibhav Shankar
4 hours ago
Maybe, but you should add a condition. And I don't see a declaration of your
i variable. You should clean your localstorage, because residual things of what you did before may stay in your variables.– Sw0ut
3 hours ago
Maybe, but you should add a condition. And I don't see a declaration of your
i variable. You should clean your localstorage, because residual things of what you did before may stay in your variables.– Sw0ut
3 hours ago
@Sw0ut I did clear localStorage, still no good. I don't understand what do you mean by- "And I don't see a declaration of your i variable". I can say that the code certainly gets the currentUser data because it shows the message "Received". If i clear the CurrentUser data and run again, I get "Not received".
– Vaibhav Shankar
3 hours ago
@Sw0ut I did clear localStorage, still no good. I don't understand what do you mean by- "And I don't see a declaration of your i variable". I can say that the code certainly gets the currentUser data because it shows the message "Received". If i clear the CurrentUser data and run again, I get "Not received".
– Vaibhav Shankar
3 hours ago
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
localStorage.getItem() returns string representation of null, if the key has null value in localStorage so your null check might not be behaving like expected. I'd recommend to wrap getItem in a function that would check that.
function(itemName) {
const item = localStorage.getItem(itemName);
return item === 'null'
? null
: item;
}
Your problem is probably in the place where you set currentUser, maybe because of the same null check.
Also try declaring your i variable in for loop.
for(var i = 0; ...) ...
Edit
There seems to be an error in this line
if ($scope.allUsers[i].company === currentUser[0].company) {
$scope.users.push($scope.allUser[i]);
}
You're trying to push $scope.allUser[I] which is not defined, you've probably meant to write $scope.allUsers[I].
Nope, still doesn't work. Getting the same error message 'Comapny' undefined.
– Vaibhav Shankar
3 hours ago
Could you change, console.log("Received");, to console.log("Received", currentUser); and show us the output? Did you check your spelling and case?
– Simas.B
3 hours ago
When i use this, console.log("Received", currentUser);, I get Array(0) with all the columns like Email, name, contact, company....along with their details. So that means the data does get received from the stroage right?
– Vaibhav Shankar
3 hours ago
So currentUser is an array then. You should then access it like one. currentUser[0].company
– Simas.B
3 hours ago
Oh you are right! But unfortunately, I am now getting '0' as undefined :(
– Vaibhav Shankar
3 hours ago
|
show 7 more comments
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
localStorage.getItem() returns string representation of null, if the key has null value in localStorage so your null check might not be behaving like expected. I'd recommend to wrap getItem in a function that would check that.
function(itemName) {
const item = localStorage.getItem(itemName);
return item === 'null'
? null
: item;
}
Your problem is probably in the place where you set currentUser, maybe because of the same null check.
Also try declaring your i variable in for loop.
for(var i = 0; ...) ...
Edit
There seems to be an error in this line
if ($scope.allUsers[i].company === currentUser[0].company) {
$scope.users.push($scope.allUser[i]);
}
You're trying to push $scope.allUser[I] which is not defined, you've probably meant to write $scope.allUsers[I].
Nope, still doesn't work. Getting the same error message 'Comapny' undefined.
– Vaibhav Shankar
3 hours ago
Could you change, console.log("Received");, to console.log("Received", currentUser); and show us the output? Did you check your spelling and case?
– Simas.B
3 hours ago
When i use this, console.log("Received", currentUser);, I get Array(0) with all the columns like Email, name, contact, company....along with their details. So that means the data does get received from the stroage right?
– Vaibhav Shankar
3 hours ago
So currentUser is an array then. You should then access it like one. currentUser[0].company
– Simas.B
3 hours ago
Oh you are right! But unfortunately, I am now getting '0' as undefined :(
– Vaibhav Shankar
3 hours ago
|
show 7 more comments
up vote
0
down vote
localStorage.getItem() returns string representation of null, if the key has null value in localStorage so your null check might not be behaving like expected. I'd recommend to wrap getItem in a function that would check that.
function(itemName) {
const item = localStorage.getItem(itemName);
return item === 'null'
? null
: item;
}
Your problem is probably in the place where you set currentUser, maybe because of the same null check.
Also try declaring your i variable in for loop.
for(var i = 0; ...) ...
Edit
There seems to be an error in this line
if ($scope.allUsers[i].company === currentUser[0].company) {
$scope.users.push($scope.allUser[i]);
}
You're trying to push $scope.allUser[I] which is not defined, you've probably meant to write $scope.allUsers[I].
Nope, still doesn't work. Getting the same error message 'Comapny' undefined.
– Vaibhav Shankar
3 hours ago
Could you change, console.log("Received");, to console.log("Received", currentUser); and show us the output? Did you check your spelling and case?
– Simas.B
3 hours ago
When i use this, console.log("Received", currentUser);, I get Array(0) with all the columns like Email, name, contact, company....along with their details. So that means the data does get received from the stroage right?
– Vaibhav Shankar
3 hours ago
So currentUser is an array then. You should then access it like one. currentUser[0].company
– Simas.B
3 hours ago
Oh you are right! But unfortunately, I am now getting '0' as undefined :(
– Vaibhav Shankar
3 hours ago
|
show 7 more comments
up vote
0
down vote
up vote
0
down vote
localStorage.getItem() returns string representation of null, if the key has null value in localStorage so your null check might not be behaving like expected. I'd recommend to wrap getItem in a function that would check that.
function(itemName) {
const item = localStorage.getItem(itemName);
return item === 'null'
? null
: item;
}
Your problem is probably in the place where you set currentUser, maybe because of the same null check.
Also try declaring your i variable in for loop.
for(var i = 0; ...) ...
Edit
There seems to be an error in this line
if ($scope.allUsers[i].company === currentUser[0].company) {
$scope.users.push($scope.allUser[i]);
}
You're trying to push $scope.allUser[I] which is not defined, you've probably meant to write $scope.allUsers[I].
localStorage.getItem() returns string representation of null, if the key has null value in localStorage so your null check might not be behaving like expected. I'd recommend to wrap getItem in a function that would check that.
function(itemName) {
const item = localStorage.getItem(itemName);
return item === 'null'
? null
: item;
}
Your problem is probably in the place where you set currentUser, maybe because of the same null check.
Also try declaring your i variable in for loop.
for(var i = 0; ...) ...
Edit
There seems to be an error in this line
if ($scope.allUsers[i].company === currentUser[0].company) {
$scope.users.push($scope.allUser[i]);
}
You're trying to push $scope.allUser[I] which is not defined, you've probably meant to write $scope.allUsers[I].
edited 2 hours ago
answered 3 hours ago
Simas.B
16114
16114
Nope, still doesn't work. Getting the same error message 'Comapny' undefined.
– Vaibhav Shankar
3 hours ago
Could you change, console.log("Received");, to console.log("Received", currentUser); and show us the output? Did you check your spelling and case?
– Simas.B
3 hours ago
When i use this, console.log("Received", currentUser);, I get Array(0) with all the columns like Email, name, contact, company....along with their details. So that means the data does get received from the stroage right?
– Vaibhav Shankar
3 hours ago
So currentUser is an array then. You should then access it like one. currentUser[0].company
– Simas.B
3 hours ago
Oh you are right! But unfortunately, I am now getting '0' as undefined :(
– Vaibhav Shankar
3 hours ago
|
show 7 more comments
Nope, still doesn't work. Getting the same error message 'Comapny' undefined.
– Vaibhav Shankar
3 hours ago
Could you change, console.log("Received");, to console.log("Received", currentUser); and show us the output? Did you check your spelling and case?
– Simas.B
3 hours ago
When i use this, console.log("Received", currentUser);, I get Array(0) with all the columns like Email, name, contact, company....along with their details. So that means the data does get received from the stroage right?
– Vaibhav Shankar
3 hours ago
So currentUser is an array then. You should then access it like one. currentUser[0].company
– Simas.B
3 hours ago
Oh you are right! But unfortunately, I am now getting '0' as undefined :(
– Vaibhav Shankar
3 hours ago
Nope, still doesn't work. Getting the same error message 'Comapny' undefined.
– Vaibhav Shankar
3 hours ago
Nope, still doesn't work. Getting the same error message 'Comapny' undefined.
– Vaibhav Shankar
3 hours ago
Could you change, console.log("Received");, to console.log("Received", currentUser); and show us the output? Did you check your spelling and case?
– Simas.B
3 hours ago
Could you change, console.log("Received");, to console.log("Received", currentUser); and show us the output? Did you check your spelling and case?
– Simas.B
3 hours ago
When i use this, console.log("Received", currentUser);, I get Array(0) with all the columns like Email, name, contact, company....along with their details. So that means the data does get received from the stroage right?
– Vaibhav Shankar
3 hours ago
When i use this, console.log("Received", currentUser);, I get Array(0) with all the columns like Email, name, contact, company....along with their details. So that means the data does get received from the stroage right?
– Vaibhav Shankar
3 hours ago
So currentUser is an array then. You should then access it like one. currentUser[0].company
– Simas.B
3 hours ago
So currentUser is an array then. You should then access it like one. currentUser[0].company
– Simas.B
3 hours ago
Oh you are right! But unfortunately, I am now getting '0' as undefined :(
– Vaibhav Shankar
3 hours ago
Oh you are right! But unfortunately, I am now getting '0' as undefined :(
– Vaibhav Shankar
3 hours ago
|
show 7 more comments
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53265378%2ftypeerror-cannot-read-property-0-of-undefined-from-the-array-using-angularjs%23new-answer', 'question_page');
}
);
Post as a guest
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Your
currentUsermay beundefined. Check your condition in the retrieving of your currentUser from the localstorage.– Sw0ut
4 hours ago
The currentUser array does show in the localStorage in the browser developer tools. And I also get the console message "Received" under the if (localStorage.getItem("currentUser") != null) statement.
– Vaibhav Shankar
4 hours ago
Maybe, but you should add a condition. And I don't see a declaration of your
ivariable. You should clean your localstorage, because residual things of what you did before may stay in your variables.– Sw0ut
3 hours ago
@Sw0ut I did clear localStorage, still no good. I don't understand what do you mean by- "And I don't see a declaration of your i variable". I can say that the code certainly gets the currentUser data because it shows the message "Received". If i clear the CurrentUser data and run again, I get "Not received".
– Vaibhav Shankar
3 hours ago