1

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

1

2 Answers 2

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>
Sign up to request clarification or add additional context in comments.

2 Comments

amazing thanks for helping can i add a divider like thing here ?
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>
0

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>

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.