Angular 2 Firebase how to get array in object
I am getting this array from my database :
By this function :
getMembers(){
this.db.list(`projects/${this.auth.userId}/${this.uploadService.pro.name}/teams/`).snapshotChanges().pipe(
map(changes =>
changes.map(c => ({ key: c.payload.key, ...c.payload.val() }))
)
).subscribe((data:any) =>
console.log(data)
this.members = data;
)
}
How to display members in ngFor ?
My try (first ngFor is teams - second one is for members) :
<div *ngFor="let item of teams">
<p>{{item.name}}</p>
<p *ngFor="let member of item.members">{{member}}</p> //does not work
</div>
Error for let member of item.member :
Cannot find a differ supporting object '[object Object]' of type
'object'. NgFor only supports binding to Iterables such as Arrays.
Teams are only - name:string - members are in teams.
export Interface Teams {
name: string;
}
export Interface Members {
name: string;
}
At first I upload team - for example "Programmers". Then I add members to that Team. And it looks like :
8468as6d84a6s8d4a6s8d4 {
name: Programmers;
members: {
FirstMember,
SeconndMemeber...
}
}
angular typescript firebase firebase-realtime-database asked Nov 25 '18 at 17:39
Angulandy2Angulandy2
241213
add a comment |
I am getting this array from my database :
By this function :
getMembers(){
this.db.list(`projects/${this.auth.userId}/${this.uploadService.pro.name}/teams/`).snapshotChanges().pipe(
map(changes =>
changes.map(c => ({ key: c.payload.key, ...c.payload.val() }))
)
).subscribe((data:any) =>
console.log(data)
this.members = data;
)
}
How to display members in ngFor ?
My try (first ngFor is teams - second one is for members) :
<div *ngFor="let item of teams">
<p>{{item.name}}</p>
<p *ngFor="let member of item.members">{{member}}</p> //does not work
</div>
Error for let member of item.member :
Cannot find a differ supporting object '[object Object]' of type
'object'. NgFor only supports binding to Iterables such as Arrays.
Teams are only - name:string - members are in teams.
export Interface Teams {
name: string;
}
export Interface Members {
name: string;
}
At first I upload team - for example "Programmers". Then I add members to that Team. And it looks like :
8468as6d84a6s8d4a6s8d4 {
name: Programmers;
members: {
FirstMember,
SeconndMemeber...
}
}
asked Nov 25 '18 at 17:39
Angulandy2Angulandy2
241213
can you post JSON data here instead of Image? also what data doesteamscontains?
– Pardeep Jain
Nov 25 '18 at 17:48
what is teams here? your variable shows it should be just members
– Sajeetharan
Nov 25 '18 at 17:50
Edited my question
– Angulandy2
Nov 25 '18 at 17:54
add a comment |
I am getting this array from my database :
By this function :
getMembers(){
this.db.list(`projects/${this.auth.userId}/${this.uploadService.pro.name}/teams/`).snapshotChanges().pipe(
map(changes =>
changes.map(c => ({ key: c.payload.key, ...c.payload.val() }))
)
).subscribe((data:any) =>
console.log(data)
this.members = data;
)
}
How to display members in ngFor ?
My try (first ngFor is teams - second one is for members) :
<div *ngFor="let item of teams">
<p>{{item.name}}</p>
<p *ngFor="let member of item.members">{{member}}</p> //does not work
</div>
Error for let member of item.member :
Cannot find a differ supporting object '[object Object]' of type
'object'. NgFor only supports binding to Iterables such as Arrays.
Teams are only - name:string - members are in teams.
export Interface Teams {
name: string;
}
export Interface Members {
name: string;
}
At first I upload team - for example "Programmers". Then I add members to that Team. And it looks like :
8468as6d84a6s8d4a6s8d4 {
name: Programmers;
members: {
FirstMember,
SeconndMemeber...
}
}
asked Nov 25 '18 at 17:39
Angulandy2Angulandy2
241213
I am getting this array from my database :
By this function :
getMembers(){
this.db.list(`projects/${this.auth.userId}/${this.uploadService.pro.name}/teams/`).snapshotChanges().pipe(
map(changes =>
changes.map(c => ({ key: c.payload.key, ...c.payload.val() }))
)
).subscribe((data:any) =>
console.log(data)
this.members = data;
)
}
How to display members in ngFor ?
My try (first ngFor is teams - second one is for members) :
<div *ngFor="let item of teams">
<p>{{item.name}}</p>
<p *ngFor="let member of item.members">{{member}}</p> //does not work
</div>
Error for let member of item.member :
Cannot find a differ supporting object '[object Object]' of type
'object'. NgFor only supports binding to Iterables such as Arrays.
Teams are only - name:string - members are in teams.
export Interface Teams {
name: string;
}
export Interface Members {
name: string;
}
At first I upload team - for example "Programmers". Then I add members to that Team. And it looks like :
8468as6d84a6s8d4a6s8d4 {
name: Programmers;
members: {
FirstMember,
SeconndMemeber...
}
}
asked Nov 25 '18 at 17:39
Angulandy2Angulandy2
241213
asked Nov 25 '18 at 17:39
Angulandy2Angulandy2
241213
edited Nov 25 '18 at 17:54
Angulandy2
asked Nov 25 '18 at 17:39
Angulandy2Angulandy2
241213
asked Nov 25 '18 at 17:39
Angulandy2Angulandy2
241213
asked Nov 25 '18 at 17:39
Angulandy2Angulandy2
241213
241213
can you post JSON data here instead of Image? also what data doesteamscontains?
– Pardeep Jain
Nov 25 '18 at 17:48
what is teams here? your variable shows it should be just members
– Sajeetharan
Nov 25 '18 at 17:50
Edited my question
– Angulandy2
Nov 25 '18 at 17:54
add a comment |
can you post JSON data here instead of Image? also what data doesteamscontains?
– Pardeep Jain
Nov 25 '18 at 17:48
what is teams here? your variable shows it should be just members
– Sajeetharan
Nov 25 '18 at 17:50
Edited my question
– Angulandy2
Nov 25 '18 at 17:54
can you post JSON data here instead of Image? also what data does
teams contains?– Pardeep Jain
Nov 25 '18 at 17:48
can you post JSON data here instead of Image? also what data does
teams contains?– Pardeep Jain
Nov 25 '18 at 17:48
what is teams here? your variable shows it should be just members
– Sajeetharan
Nov 25 '18 at 17:50
what is teams here? your variable shows it should be just members
– Sajeetharan
Nov 25 '18 at 17:50
Edited my question
– Angulandy2
Nov 25 '18 at 17:54
Edited my question
– Angulandy2
Nov 25 '18 at 17:54
add a comment |
1 Answer
1
active
oldest
votes
you are getting error, because your members is object and object isn't iterable, and *ngFor supports only iterables for example arrays, maps and so on..., so you can:
use Object.keys(), which will return keys of objects in new array,
NOTE that Object isn't accessible in the template, so you should create a pipe or define a method in the component.ts which will do the job,
for example
objectKeys(obj) {
return Object.keys(obj);
}
<div *ngFor="let item of teams">
<p>{{item.name}}</p>
<p *ngFor="let key of objectKeys(item.members)">{{item.members[key].name}}</p>
</div>
or another option you can use Object.values(), which will return values of objects in new array
objectValues(obj) {
return Object.values(obj);
}
<div *ngFor="let item of teams">
<p>{{item.name}}</p>
<p *ngFor="let member of objectValues(item.members)">{{member.name}}</p>
</div>
answered Nov 25 '18 at 19:04
Artyom AmiryanArtyom Amiryan
1,9621214
Cannot read property 'values' of undefined or Cannot read property 'key' of undefined
– Angulandy2
Nov 25 '18 at 19:09
@Angulandy2 I have updated my answer, please check again
– Artyom Amiryan
Nov 25 '18 at 19:14
It cant work because objectValues got "item" which is not defined.
– Angulandy2
Nov 25 '18 at 19:16
error : item is not defined in function objectValues(obj) or objectKeys(obj)
– Angulandy2
Nov 25 '18 at 19:17
As you can see i did that
– Angulandy2
Nov 25 '18 at 19:19
|
show 9 more comments
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
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
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53470142%2fangular-2-firebase-how-to-get-array-in-object%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
you are getting error, because your members is object and object isn't iterable, and *ngFor supports only iterables for example arrays, maps and so on..., so you can:
use Object.keys(), which will return keys of objects in new array,
NOTE that Object isn't accessible in the template, so you should create a pipe or define a method in the component.ts which will do the job,
for example
objectKeys(obj) {
return Object.keys(obj);
}
<div *ngFor="let item of teams">
<p>{{item.name}}</p>
<p *ngFor="let key of objectKeys(item.members)">{{item.members[key].name}}</p>
</div>
or another option you can use Object.values(), which will return values of objects in new array
objectValues(obj) {
return Object.values(obj);
}
<div *ngFor="let item of teams">
<p>{{item.name}}</p>
<p *ngFor="let member of objectValues(item.members)">{{member.name}}</p>
</div>
answered Nov 25 '18 at 19:04
Artyom AmiryanArtyom Amiryan
1,9621214
Cannot read property 'values' of undefined or Cannot read property 'key' of undefined
– Angulandy2
Nov 25 '18 at 19:09
@Angulandy2 I have updated my answer, please check again
– Artyom Amiryan
Nov 25 '18 at 19:14
It cant work because objectValues got "item" which is not defined.
– Angulandy2
Nov 25 '18 at 19:16
error : item is not defined in function objectValues(obj) or objectKeys(obj)
– Angulandy2
Nov 25 '18 at 19:17
As you can see i did that
– Angulandy2
Nov 25 '18 at 19:19
|
show 9 more comments
you are getting error, because your members is object and object isn't iterable, and *ngFor supports only iterables for example arrays, maps and so on..., so you can:
use Object.keys(), which will return keys of objects in new array,
NOTE that Object isn't accessible in the template, so you should create a pipe or define a method in the component.ts which will do the job,
for example
objectKeys(obj) {
return Object.keys(obj);
}
<div *ngFor="let item of teams">
<p>{{item.name}}</p>
<p *ngFor="let key of objectKeys(item.members)">{{item.members[key].name}}</p>
</div>
or another option you can use Object.values(), which will return values of objects in new array
objectValues(obj) {
return Object.values(obj);
}
<div *ngFor="let item of teams">
<p>{{item.name}}</p>
<p *ngFor="let member of objectValues(item.members)">{{member.name}}</p>
</div>
answered Nov 25 '18 at 19:04
Artyom AmiryanArtyom Amiryan
1,9621214
Cannot read property 'values' of undefined or Cannot read property 'key' of undefined
– Angulandy2
Nov 25 '18 at 19:09
@Angulandy2 I have updated my answer, please check again
– Artyom Amiryan
Nov 25 '18 at 19:14
It cant work because objectValues got "item" which is not defined.
– Angulandy2
Nov 25 '18 at 19:16
error : item is not defined in function objectValues(obj) or objectKeys(obj)
– Angulandy2
Nov 25 '18 at 19:17
As you can see i did that
– Angulandy2
Nov 25 '18 at 19:19
|
show 9 more comments
you are getting error, because your members is object and object isn't iterable, and *ngFor supports only iterables for example arrays, maps and so on..., so you can:
use Object.keys(), which will return keys of objects in new array,
NOTE that Object isn't accessible in the template, so you should create a pipe or define a method in the component.ts which will do the job,
for example
objectKeys(obj) {
return Object.keys(obj);
}
<div *ngFor="let item of teams">
<p>{{item.name}}</p>
<p *ngFor="let key of objectKeys(item.members)">{{item.members[key].name}}</p>
</div>
or another option you can use Object.values(), which will return values of objects in new array
objectValues(obj) {
return Object.values(obj);
}
<div *ngFor="let item of teams">
<p>{{item.name}}</p>
<p *ngFor="let member of objectValues(item.members)">{{member.name}}</p>
</div>
answered Nov 25 '18 at 19:04
Artyom AmiryanArtyom Amiryan
1,9621214
you are getting error, because your members is object and object isn't iterable, and *ngFor supports only iterables for example arrays, maps and so on..., so you can:
use Object.keys(), which will return keys of objects in new array,
NOTE that Object isn't accessible in the template, so you should create a pipe or define a method in the component.ts which will do the job,
for example
objectKeys(obj) {
return Object.keys(obj);
}
<div *ngFor="let item of teams">
<p>{{item.name}}</p>
<p *ngFor="let key of objectKeys(item.members)">{{item.members[key].name}}</p>
</div>
or another option you can use Object.values(), which will return values of objects in new array
objectValues(obj) {
return Object.values(obj);
}
<div *ngFor="let item of teams">
<p>{{item.name}}</p>
<p *ngFor="let member of objectValues(item.members)">{{member.name}}</p>
</div>
answered Nov 25 '18 at 19:04
Artyom AmiryanArtyom Amiryan
1,9621214
edited Nov 25 '18 at 19:25
answered Nov 25 '18 at 19:04
Artyom AmiryanArtyom Amiryan
1,9621214
answered Nov 25 '18 at 19:04
Artyom AmiryanArtyom Amiryan
1,9621214
answered Nov 25 '18 at 19:04
Artyom AmiryanArtyom Amiryan
1,9621214
1,9621214
Cannot read property 'values' of undefined or Cannot read property 'key' of undefined
– Angulandy2
Nov 25 '18 at 19:09
@Angulandy2 I have updated my answer, please check again
– Artyom Amiryan
Nov 25 '18 at 19:14
It cant work because objectValues got "item" which is not defined.
– Angulandy2
Nov 25 '18 at 19:16
error : item is not defined in function objectValues(obj) or objectKeys(obj)
– Angulandy2
Nov 25 '18 at 19:17
As you can see i did that
– Angulandy2
Nov 25 '18 at 19:19
|
show 9 more comments
Cannot read property 'values' of undefined or Cannot read property 'key' of undefined
– Angulandy2
Nov 25 '18 at 19:09
@Angulandy2 I have updated my answer, please check again
– Artyom Amiryan
Nov 25 '18 at 19:14
It cant work because objectValues got "item" which is not defined.
– Angulandy2
Nov 25 '18 at 19:16
error : item is not defined in function objectValues(obj) or objectKeys(obj)
– Angulandy2
Nov 25 '18 at 19:17
As you can see i did that
– Angulandy2
Nov 25 '18 at 19:19
Cannot read property 'values' of undefined or Cannot read property 'key' of undefined
– Angulandy2
Nov 25 '18 at 19:09
Cannot read property 'values' of undefined or Cannot read property 'key' of undefined
– Angulandy2
Nov 25 '18 at 19:09
@Angulandy2 I have updated my answer, please check again
– Artyom Amiryan
Nov 25 '18 at 19:14
@Angulandy2 I have updated my answer, please check again
– Artyom Amiryan
Nov 25 '18 at 19:14
It cant work because objectValues got "item" which is not defined.
– Angulandy2
Nov 25 '18 at 19:16
It cant work because objectValues got "item" which is not defined.
– Angulandy2
Nov 25 '18 at 19:16
error : item is not defined in function objectValues(obj) or objectKeys(obj)
– Angulandy2
Nov 25 '18 at 19:17
error : item is not defined in function objectValues(obj) or objectKeys(obj)
– Angulandy2
Nov 25 '18 at 19:17
As you can see i did that
– Angulandy2
Nov 25 '18 at 19:19
As you can see i did that
– Angulandy2
Nov 25 '18 at 19:19
|
show 9 more comments
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
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
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53470142%2fangular-2-firebase-how-to-get-array-in-object%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
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
Required, but never shown
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
Required, but never shown
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
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
can you post JSON data here instead of Image? also what data does
teamscontains?– Pardeep Jain
Nov 25 '18 at 17:48
what is teams here? your variable shows it should be just members
– Sajeetharan
Nov 25 '18 at 17:50
Edited my question
– Angulandy2
Nov 25 '18 at 17:54