how to display the array inside an array of objects using ngFor Angular 2
5
I need to display the array quality which is located inside an array of objects. I have tried calling it in ngFor using the code below. Is there something wrong with my usage of ngFor?
import { Component} from '@angular/core';
@Component({
selector: 'my-app',
template: `<table>
<thead>
<tr>
<th>Name</th>
<th>Quality1</th>
<th>Quality2</th>
</tr>
</thead>
<tbody>
<tr *ngFor"let item of people">
<td>{{item.Name}}</td>
<td *ngFor"let item of people.quality">item.quality1</td>
<td *ngFor"let item of people.quality">item.quality2/td>
</tr>
</tbody>
</table>
})
export class AppComponent{
people: any = [{Name:"John", quality:[{quality1: "nice", quality2: "humble"}]}, {Name:"Dave", quality:[{quality1: "kind", quality2: "caring"}]} ];
}
As of now only the names are appearing in the table but I would also like the quality to appear.
arrays
angular typescript ngfor edited Nov 23 '16 at 12:14
Amruth LS
2,9431727
asked Nov 23 '16 at 8:49
user3797088user3797088
2002314
add a comment |
5
I need to display the array quality which is located inside an array of objects. I have tried calling it in ngFor using the code below. Is there something wrong with my usage of ngFor?
import { Component} from '@angular/core';
@Component({
selector: 'my-app',
template: `<table>
<thead>
<tr>
<th>Name</th>
<th>Quality1</th>
<th>Quality2</th>
</tr>
</thead>
<tbody>
<tr *ngFor"let item of people">
<td>{{item.Name}}</td>
<td *ngFor"let item of people.quality">item.quality1</td>
<td *ngFor"let item of people.quality">item.quality2/td>
</tr>
</tbody>
</table>
})
export class AppComponent{
people: any = [{Name:"John", quality:[{quality1: "nice", quality2: "humble"}]}, {Name:"Dave", quality:[{quality1: "kind", quality2: "caring"}]} ];
}
As of now only the names are appearing in the table but I would also like the quality to appear.
arrays
angular typescript ngfor edited Nov 23 '16 at 12:14
Amruth LS
2,9431727
asked Nov 23 '16 at 8:49
user3797088user3797088
2002314
What are the second and third loops supposed to be doing? Will every person have two qualities? Why are the qualities in a map? Why useias the name of each person in the loop? You're missing a closing backtick too.
– jonrsharpe
Nov 23 '16 at 8:55
@jonrsharpe the second and third loop are going to display the the quality of a person, I use "let item of people" and "let item of people quality" in my real code this is just a shortcut
– user3797088
Nov 23 '16 at 9:03
@jonrsharpe is there a way to display my array using ngFor?
– user3797088
Nov 23 '16 at 9:04
The second loop should be overi.quality, but your data model seems very weird and you're going to end up with an odd-looking table. Please show a Minimal, Complete, and Verifiable example of real code, rewriting it badly is not helpful.
– jonrsharpe
Nov 23 '16 at 9:06
add a comment |
5
5
5
I need to display the array quality which is located inside an array of objects. I have tried calling it in ngFor using the code below. Is there something wrong with my usage of ngFor?
import { Component} from '@angular/core';
@Component({
selector: 'my-app',
template: `<table>
<thead>
<tr>
<th>Name</th>
<th>Quality1</th>
<th>Quality2</th>
</tr>
</thead>
<tbody>
<tr *ngFor"let item of people">
<td>{{item.Name}}</td>
<td *ngFor"let item of people.quality">item.quality1</td>
<td *ngFor"let item of people.quality">item.quality2/td>
</tr>
</tbody>
</table>
})
export class AppComponent{
people: any = [{Name:"John", quality:[{quality1: "nice", quality2: "humble"}]}, {Name:"Dave", quality:[{quality1: "kind", quality2: "caring"}]} ];
}
As of now only the names are appearing in the table but I would also like the quality to appear.
arrays
angular typescript ngfor edited Nov 23 '16 at 12:14
Amruth LS
2,9431727
asked Nov 23 '16 at 8:49
user3797088user3797088
2002314
I need to display the array quality which is located inside an array of objects. I have tried calling it in ngFor using the code below. Is there something wrong with my usage of ngFor?
import { Component} from '@angular/core';
@Component({
selector: 'my-app',
template: `<table>
<thead>
<tr>
<th>Name</th>
<th>Quality1</th>
<th>Quality2</th>
</tr>
</thead>
<tbody>
<tr *ngFor"let item of people">
<td>{{item.Name}}</td>
<td *ngFor"let item of people.quality">item.quality1</td>
<td *ngFor"let item of people.quality">item.quality2/td>
</tr>
</tbody>
</table>
})
export class AppComponent{
people: any = [{Name:"John", quality:[{quality1: "nice", quality2: "humble"}]}, {Name:"Dave", quality:[{quality1: "kind", quality2: "caring"}]} ];
}
As of now only the names are appearing in the table but I would also like the quality to appear.
arrays
angular typescript ngfor arrays
angular typescript ngfor edited Nov 23 '16 at 12:14
Amruth LS
2,9431727
asked Nov 23 '16 at 8:49
user3797088user3797088
2002314
edited Nov 23 '16 at 12:14
Amruth LS
2,9431727
asked Nov 23 '16 at 8:49
user3797088user3797088
2002314
edited Nov 23 '16 at 12:14
Amruth LS
2,9431727
edited Nov 23 '16 at 12:14
Amruth LS
2,9431727
edited Nov 23 '16 at 12:14
Amruth LS
2,9431727
2,9431727
asked Nov 23 '16 at 8:49
user3797088user3797088
2002314
asked Nov 23 '16 at 8:49
user3797088user3797088
2002314
asked Nov 23 '16 at 8:49
user3797088user3797088
2002314
2002314
What are the second and third loops supposed to be doing? Will every person have two qualities? Why are the qualities in a map? Why useias the name of each person in the loop? You're missing a closing backtick too.
– jonrsharpe
Nov 23 '16 at 8:55
@jonrsharpe the second and third loop are going to display the the quality of a person, I use "let item of people" and "let item of people quality" in my real code this is just a shortcut
– user3797088
Nov 23 '16 at 9:03
@jonrsharpe is there a way to display my array using ngFor?
– user3797088
Nov 23 '16 at 9:04
The second loop should be overi.quality, but your data model seems very weird and you're going to end up with an odd-looking table. Please show a Minimal, Complete, and Verifiable example of real code, rewriting it badly is not helpful.
– jonrsharpe
Nov 23 '16 at 9:06
add a comment |
What are the second and third loops supposed to be doing? Will every person have two qualities? Why are the qualities in a map? Why useias the name of each person in the loop? You're missing a closing backtick too.
– jonrsharpe
Nov 23 '16 at 8:55
@jonrsharpe the second and third loop are going to display the the quality of a person, I use "let item of people" and "let item of people quality" in my real code this is just a shortcut
– user3797088
Nov 23 '16 at 9:03
@jonrsharpe is there a way to display my array using ngFor?
– user3797088
Nov 23 '16 at 9:04
The second loop should be overi.quality, but your data model seems very weird and you're going to end up with an odd-looking table. Please show a Minimal, Complete, and Verifiable example of real code, rewriting it badly is not helpful.
– jonrsharpe
Nov 23 '16 at 9:06
What are the second and third loops supposed to be doing? Will every person have two qualities? Why are the qualities in a map? Why use
i as the name of each person in the loop? You're missing a closing backtick too.– jonrsharpe
Nov 23 '16 at 8:55
What are the second and third loops supposed to be doing? Will every person have two qualities? Why are the qualities in a map? Why use
i as the name of each person in the loop? You're missing a closing backtick too.– jonrsharpe
Nov 23 '16 at 8:55
@jonrsharpe the second and third loop are going to display the the quality of a person, I use "let item of people" and "let item of people quality" in my real code this is just a shortcut
– user3797088
Nov 23 '16 at 9:03
@jonrsharpe the second and third loop are going to display the the quality of a person, I use "let item of people" and "let item of people quality" in my real code this is just a shortcut
– user3797088
Nov 23 '16 at 9:03
@jonrsharpe is there a way to display my array using ngFor?
– user3797088
Nov 23 '16 at 9:04
@jonrsharpe is there a way to display my array using ngFor?
– user3797088
Nov 23 '16 at 9:04
The second loop should be over
i.quality, but your data model seems very weird and you're going to end up with an odd-looking table. Please show a Minimal, Complete, and Verifiable example of real code, rewriting it badly is not helpful.– jonrsharpe
Nov 23 '16 at 9:06
The second loop should be over
i.quality, but your data model seems very weird and you're going to end up with an odd-looking table. Please show a Minimal, Complete, and Verifiable example of real code, rewriting it badly is not helpful.– jonrsharpe
Nov 23 '16 at 9:06
add a comment |
3 Answers
3
active
oldest
votes
0
You can use <ng-container> to combine several nodes with *ngFor without introducing another element to the DOM:
<ng-container *ngFor"let item of people.quality">
<td>item.quality1</td>
<td>item.quality2/td>
</ng-container>
answered Nov 23 '16 at 12:19
Günter ZöchbauerGünter Zöchbauer
332k701005940
add a comment |
0
If I understand you well you could also bind like that:
<tr *ngFor="let item of people">
<td>{{item.Name}}</td>
<td *ngFor="let item of people.quality">{{item.quality.[quality1]}}</td>
<td *ngFor="let item of people.quality">{{item..quality.[quality2]}}</td>
</tr>
edited Jul 21 '17 at 7:52
user3795373
826
answered May 11 '17 at 8:44
Emile CanteroEmile Cantero
5382730
add a comment |
0
We can simply iterate the loop inside by modifying the second loop
<tr *ngFor="let item of people">
<td>{{item.Name}}</td>
<td *ngFor="let quality of item.quality">{{ quality }}</td>
<td *ngFor="let quality2 of item.quality2">{{quality2}}</td>
</tr>
answered Jan 3 at 1:34
Anoop P SAnoop P S
3331522
add a comment |
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
});
}
});
draft saved
draft discarded
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%2f40759703%2fhow-to-display-the-array-inside-an-array-of-objects-using-ngfor-angular-2%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
You can use <ng-container> to combine several nodes with *ngFor without introducing another element to the DOM:
<ng-container *ngFor"let item of people.quality">
<td>item.quality1</td>
<td>item.quality2/td>
</ng-container>
answered Nov 23 '16 at 12:19
Günter ZöchbauerGünter Zöchbauer
332k701005940
add a comment |
0
You can use <ng-container> to combine several nodes with *ngFor without introducing another element to the DOM:
<ng-container *ngFor"let item of people.quality">
<td>item.quality1</td>
<td>item.quality2/td>
</ng-container>
answered Nov 23 '16 at 12:19
Günter ZöchbauerGünter Zöchbauer
332k701005940
add a comment |
0
0
0
You can use <ng-container> to combine several nodes with *ngFor without introducing another element to the DOM:
<ng-container *ngFor"let item of people.quality">
<td>item.quality1</td>
<td>item.quality2/td>
</ng-container>
answered Nov 23 '16 at 12:19
Günter ZöchbauerGünter Zöchbauer
332k701005940
You can use <ng-container> to combine several nodes with *ngFor without introducing another element to the DOM:
<ng-container *ngFor"let item of people.quality">
<td>item.quality1</td>
<td>item.quality2/td>
</ng-container>
answered Nov 23 '16 at 12:19
Günter ZöchbauerGünter Zöchbauer
332k701005940
answered Nov 23 '16 at 12:19
Günter ZöchbauerGünter Zöchbauer
332k701005940
answered Nov 23 '16 at 12:19
Günter ZöchbauerGünter Zöchbauer
332k701005940
answered Nov 23 '16 at 12:19
Günter ZöchbauerGünter Zöchbauer
332k701005940
332k701005940
add a comment |
add a comment |
0
If I understand you well you could also bind like that:
<tr *ngFor="let item of people">
<td>{{item.Name}}</td>
<td *ngFor="let item of people.quality">{{item.quality.[quality1]}}</td>
<td *ngFor="let item of people.quality">{{item..quality.[quality2]}}</td>
</tr>
edited Jul 21 '17 at 7:52
user3795373
826
answered May 11 '17 at 8:44
Emile CanteroEmile Cantero
5382730
add a comment |
0
If I understand you well you could also bind like that:
<tr *ngFor="let item of people">
<td>{{item.Name}}</td>
<td *ngFor="let item of people.quality">{{item.quality.[quality1]}}</td>
<td *ngFor="let item of people.quality">{{item..quality.[quality2]}}</td>
</tr>
edited Jul 21 '17 at 7:52
user3795373
826
answered May 11 '17 at 8:44
Emile CanteroEmile Cantero
5382730
add a comment |
0
0
0
If I understand you well you could also bind like that:
<tr *ngFor="let item of people">
<td>{{item.Name}}</td>
<td *ngFor="let item of people.quality">{{item.quality.[quality1]}}</td>
<td *ngFor="let item of people.quality">{{item..quality.[quality2]}}</td>
</tr>
edited Jul 21 '17 at 7:52
user3795373
826
answered May 11 '17 at 8:44
Emile CanteroEmile Cantero
5382730
If I understand you well you could also bind like that:
<tr *ngFor="let item of people">
<td>{{item.Name}}</td>
<td *ngFor="let item of people.quality">{{item.quality.[quality1]}}</td>
<td *ngFor="let item of people.quality">{{item..quality.[quality2]}}</td>
</tr>
edited Jul 21 '17 at 7:52
user3795373
826
answered May 11 '17 at 8:44
Emile CanteroEmile Cantero
5382730
edited Jul 21 '17 at 7:52
user3795373
826
edited Jul 21 '17 at 7:52
user3795373
826
edited Jul 21 '17 at 7:52
user3795373
826
826
answered May 11 '17 at 8:44
Emile CanteroEmile Cantero
5382730
answered May 11 '17 at 8:44
Emile CanteroEmile Cantero
5382730
answered May 11 '17 at 8:44
Emile CanteroEmile Cantero
5382730
5382730
add a comment |
add a comment |
0
We can simply iterate the loop inside by modifying the second loop
<tr *ngFor="let item of people">
<td>{{item.Name}}</td>
<td *ngFor="let quality of item.quality">{{ quality }}</td>
<td *ngFor="let quality2 of item.quality2">{{quality2}}</td>
</tr>
answered Jan 3 at 1:34
Anoop P SAnoop P S
3331522
add a comment |
0
We can simply iterate the loop inside by modifying the second loop
<tr *ngFor="let item of people">
<td>{{item.Name}}</td>
<td *ngFor="let quality of item.quality">{{ quality }}</td>
<td *ngFor="let quality2 of item.quality2">{{quality2}}</td>
</tr>
answered Jan 3 at 1:34
Anoop P SAnoop P S
3331522
add a comment |
0
0
0
We can simply iterate the loop inside by modifying the second loop
<tr *ngFor="let item of people">
<td>{{item.Name}}</td>
<td *ngFor="let quality of item.quality">{{ quality }}</td>
<td *ngFor="let quality2 of item.quality2">{{quality2}}</td>
</tr>
answered Jan 3 at 1:34
Anoop P SAnoop P S
3331522
We can simply iterate the loop inside by modifying the second loop
<tr *ngFor="let item of people">
<td>{{item.Name}}</td>
<td *ngFor="let quality of item.quality">{{ quality }}</td>
<td *ngFor="let quality2 of item.quality2">{{quality2}}</td>
</tr>
answered Jan 3 at 1:34
Anoop P SAnoop P S
3331522
answered Jan 3 at 1:34
Anoop P SAnoop P S
3331522
answered Jan 3 at 1:34
Anoop P SAnoop P S
3331522
answered Jan 3 at 1:34
Anoop P SAnoop P S
3331522
3331522
add a comment |
add a comment |
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f40759703%2fhow-to-display-the-array-inside-an-array-of-objects-using-ngfor-angular-2%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
What are the second and third loops supposed to be doing? Will every person have two qualities? Why are the qualities in a map? Why use
ias the name of each person in the loop? You're missing a closing backtick too.– jonrsharpe
Nov 23 '16 at 8:55
@jonrsharpe the second and third loop are going to display the the quality of a person, I use "let item of people" and "let item of people quality" in my real code this is just a shortcut
– user3797088
Nov 23 '16 at 9:03
@jonrsharpe is there a way to display my array using ngFor?
– user3797088
Nov 23 '16 at 9:04
The second loop should be over
i.quality, but your data model seems very weird and you're going to end up with an odd-looking table. Please show a Minimal, Complete, and Verifiable example of real code, rewriting it badly is not helpful.– jonrsharpe
Nov 23 '16 at 9:06