Display data from data.json in poem format

ionic-v1
1

I want to do list of poems- I already create the list and create data.json file as shown down

[
    {
      "title": "Red Rose",
      "photo": "Red_Rose",
      "poem": [
        "Roses are red",
        "Violets are blue",
        "Sugar is sweet",
        "And so are you."
             ]
    }
]

and create detail page to display the poem, but the page show the poem like this
[ “Roses are red”, “Violets are blue”, “Sugar is sweet”, “And so are you.” ]
and my detail file like this

<ion-view>
  <ion-content>
    <ion-list class="list-inset">
      <ion-item class="item-text-wrap"
        ng-repeat="item in artists | filter:{ photo: whichartist }">
        <img ng-src="img/{{item.photo}}_tn.jpg"
             alt="{{ item.title }} Photo">
        <h2>{{ item.title }}</h2>
        <p>{{ item.poem}}</p>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

every thing display well except the {{item.poem}}
it shown like this
[ "Roses are red", "Violets are blue", "Sugar is sweet", "And so are you." ]

any one have idea how to do it in the right way

2

item.poem is an JSON array so our output is not as expected.
You could loop trough the item.poem within your item loop and output the single lines with a break or whatever.

Btw: Putting your code in a pre-formatted block makes it more readable

3

Please edit your post and use the </> button above the post input field to format your code or error message or wrap it in ``` (“code fences”) manually. This will make sure your text is readable and if it recognizes the programming language it also automatically adds code syntax highlighting. Thanks.

4

Sujan12, thanks for your reply, can you explain more for me, I need this urgent
where can I edit my code, and where to add the button

5

gregg, thanks, please explain more, can you prepare the code with loop for me, to test and feedback for You, I really failed to display it as poem

6

You should make the code in your post readable. I can’t read anything of it.

7

I fixed the code format problem - can you help me to solve the problem please

8

The problem with simply doing:

<p>{{ item.poem}}</p>

Is that item.poem is an array, so what you may want to do is something like:

<p *ngFor="let line of item.poem">{{line}}</p>
9

SigmundFroyd, thanks for your reply, but that not work for me- it give empty white page - can you help more