Angular loop

Ionic Framework ionic-v3
1

Hi!
M having a small issue. I have a ts code of loop, but i want that to run in angular as

for(let i = 0; i <= this.Data.length; i++){
        this.name  = this.Data.name
        this.age= this.Data.age 
} 
console.log(this.name[i] + " Name" + this.age[i] + " Age")

In console it prints great but while printing it prints on single line. I want this to be run in Angular.

<ion-item  *ngFor ="let data of Data" >
    <div>
      {{data.name}}{{data.age}}
    </div>
  </ion-item>

but in this code it prints all on same line but i want to separate that item.

2 
<ion-item  *ngFor ="let data of Data" >
    <div class="user">
      {{data.name}}{{data.age}}
    </div>
  </ion-item>

And in your css

.user {
display: block;
}
3

Thanks for your reply but this ain’t working.

4

If you want to separate the age from the name, try:

<ion-item *ngFor="let data of Data">
    <h2>{{data.name}}</h2>
    <p>Age: {{data.age}}</p>
</ion-item>
5

Another way is to just put the ion-item inside a list :slight_smile:

<ion-list>
 <ion-item *ngFor ="let data of Data" >
     <div class="user">
       {{data.name}}{{data.age}}
     </div>
  </ion-item>
</ion-list>
6

name and age will be next to other, here “Data” is an array, its a nested array, in array there is element of name and each name have another array associated with it having age and other details with it. i want to write each index of array elements of name and age

7

can you display output of your Data variable in Json format,so we can easily understand what you want as output ?

8

currently my output is:

test,test1 20,22
test and test1 are the names and 20 and 22 are the age. but ts loop console shows:

test 20
test1 22

so i want the out put like console’s.

9

Can you display the output of:

console.log(JSON.stringify(this.Data));
10

[{"personName":"testing","PrescriptionItems":[{"name":["test1","test2"],"medi":[["1"],["2","3"]]}],"MedicenItems":[["1"],["2","3"]]},{"personName":"testing1","PrescriptionItems":[{"name":["test3"],"medi":[["4","5"]]}],"MedicenItems":[["4","5"]]}]

testing {
test1 has 1
test2 has 2,3
}

11

Where is this.Data.name and this.Data.age?

12

this is the part of that, in this i have deleted the age and details part

13

cough cough

This fixes your issue

14

it gives me output as:
test1,test2 1,2,3.
but what i want is that it shows me like
test1 1
test2 2,3

15 
<ion-list>
 <div *ngFor ="let data of Data" >
  <ion-item>
      {{data.name}}{{data.age}}
   </ion-item>
 </div>
</ion-list>

Screenshots would be helpful btw :slight_smile:

16

I suggest you restructure your data from this:

Data = [
    {
      name: ["test1", "test2"],
      medi: [["1"], ["2", "3"]]
    }
  ];

to this:

DataNew = [
    {
      name: "test1",
      medi: ["1"]
    },
    {
      name: "test2",
      medi: ["2", "3"]
    }
  ];

and then use

<ion-list>
  <ion-item *ngFor="let data of DataNew">
    {{data.name}} {{data.medi}}
  </ion-item>
</ion-list>
17

Much tidier :wink: I was going to suggest he do that but didn’t know if it was possible for him to change it.

18

i will create code based on you json data ,try this

<ion-list>
 <div *ngFor ="let data of Data" >
 <div *ngFor ="let temp of data.name;let i=index" >
  <ion-item>
      {{temp[i]}}{{data.medi[i]}}
   </ion-item>
 </div>
</div>
</ion-list>
19 
<ion-list>
 <div *ngFor ="let data of Data" >
 <div *ngFor ="let temp of data.name" >
  <ion-item>
      {{temp}}{{data.medi}}
   </ion-item>
 </div>
</div>
</ion-list>

worked great after making changes
but now its printing all other ages next to ever name.

20

ok then what kind of output you have and what you want ?