how to display the array inside json in ionic card

Question

consider the below json data

    [{
    "id":"1",
    "name": "abc",
    "url": "www.abc.com",
    "img":"abc.jpeg",
    "yield": "12",
    "ingredients":[
      "1 cup Rice flour<br/>",
      "2 cups Water<br/>",
      "1 teaspoon Cooking oil<br/>",
      "1/2 teaspoon Salt<br/>",
      "1 cup Fresh coconut , grated<br/>",
      "1/2 cup Jaggery<br/>",
      "1 teaspoon Cardamom Powder<br/>"
    ]
}]

Now when i tried to print ingredients in ionic-card-content Its showing as a paragraph

 <ion-card-content class="item item-text-wrap">{{ recepie.ingredients }

o/p

1 cup Rice flour,2 cups Water,1 teaspoon Cooking oil,1/2 teaspoon Salt,1 cup Fresh coconut , grated,1/2 cup Jaggery,1 teaspoon Cardamom Powder

But i need those ingredients to be printed in each line in ionic card. with divider

Possible duplicate of Display array in Angular2 template

Kim Kern
– Kim Kern

2017-09-17 13:14:20 +00:00
Commented Sep 17, 2017 at 13:14 — Kim Kern
– Kim Kern, Commented Sep 17, 2017 at 13:14

Kim Kern · Accepted Answer · 2017-09-17 13:03:24Z

1

You can use the *ngFor directive, see the docs.

<ion-card-content class="item item-text-wrap">
  <p *ngFor="let ingredient of recepie.ingredients">{{ ingredient }}</p>
</ion-card-content>

answered Sep 17, 2017 at 13:03

Kim Kern

61.1k20 gold badges221 silver badges215 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

displayuser Over a year ago

amazing thanks for helping can i add a divider like thing here ?

Kim Kern Over a year ago

If you want to add more elements, put the *ngFor in a container (e.g. a div) and all its children will be repeated for each element of the array. <div *ngFor="let item of items">...</div>

Dr. X · Accepted Answer · 2017-09-17 13:12:48Z

With respect to your json file because your json file data is in array;

myData= [
  {
    "id":"1",
    "name": "abc",
    "url": "www.abc.com",
    "img":"abc.jpeg",
    "yield": "12",
    "ingredients":[
      "1 cup Rice flour<br/>",
      "2 cups Water<br/>",
      "1 teaspoon Cooking oil<br/>",
      "1/2 teaspoon Salt<br/>",
      "1 cup Fresh coconut , grated<br/>",
      "1/2 cup Jaggery<br/>",
      "1 teaspoon Cardamom Powder<br/>"
    ]
 },
 {
    "id":"2",
    "name": "xyz",
    "url": "www.xyz.com",
    "img":"xyz.jpeg",
    "yield": "12",
    "ingredients":[
      "3 cup Rice flour<br/>",
      "1 cups Water<br/>",
      "1 teaspoon Cooking oil<br/>",
      "3/2 teaspoon Salt<br/>",
      "2 cup Fresh coconut , grated<br/>",
      "1/2 cup Jaggery<br/>",
      "1 teaspoon Cardamom Powder<br/>"
    ]
 }
]

the html code must be like that

<ion-card-content class="item item-text-wrap" *ngFor= let item of myData>
  <p *ngFor="let ingredient of item.ingredients" class= >{{ ingredient }}</p>
</ion-card-content>

Collectives™ on Stack Overflow

how to display the array inside json in ionic card

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related