How to Check value in JSON object ionic2

Ionic Framework ionic-v3
1

How to check "no_cover" value inthumbnail[0] and replace it toasset/sss.jpg for showlistpage I try to set <img src="{{item.LINKS.thumbnail[0]}}"> in Listpage.html ,this show onlythumbnail[0] is http://xxx.jpg, http://xxx.jpg , ,But I have no idea to set "no_cover"

myjson

"    DOCSET":{
      "DOC":[
        "LINKS":{
        {
          "thumbnail":"http://yyy.jpg",
          "thumbnail":"http://....jpg"}
        },
      "DOC":[
        "LINKS":{
        {
          "thumbnail":"http://xxx.jpg",
          "thumbnail":"http://....jpg"}
        },
      "DOC":[
        "LINKS":{
        {
          "thumbnail":"no_cover",     <<<<
          "thumbnail":"http://....jpg"}
        }
     }

listpage.html

<ion-list>
    <ion-item *ngFor="let item of foundRepos">
     <ion-thumbnail item-left  >
      <img src="{{item.LINKS.thumbnail[0]}}">  <!--I have no idea to set it -->
    </ion-thumbnail>
</ion-list>

list.page.ts

this.http.get("my_url")
 .subscribe(data =>{
     this.foundRepos = data.json().DOCSET.DOC; 
                   },error=>{
                 err => console.error(err),
                () => console.log('getRepos completed')
            );
2

Hi,

use ngSwitch to compare the value of an element with a given string. In your example “no_cover”. Can be extended to as many conditions as you like.

Example based on your code:

<ion-list>
    <ion-item *ngFor="let item of foundRepos">
        <span [ngSwitch]="item.LINKS.thumbnail[0]">
            <span *ngSwitchCase="'no_cover'">
                <ion-thumbnail item-left  >
                    <img src="fallback_img.png">
                </ion-thumbnail>
            </span> 
            <span *ngSwitchDefault>
                <ion-thumbnail item-left  >
                    <img src="{{item.LINKS.thumbnail[0]}}">
                </ion-thumbnail>
            </span>
        </span>
    </ion-item>
</ion-list>

The “span” elements (or any other you would like to use) are required for the ngSwitch to be executed. But “span” do normally not interfer with any layout settings even if it blows up markup.

Use the same logic to decide with templates to use for rendering based on content type.

3

@gregg sorry ,It’s not work T^T

4

@fongfuse

Works for me.

But your json looks somewhat strange.

The Links section is not built the right way etc.

This one should work:

{"DOCSET":{
      "DOC":{
        "LINKS":[
{"thumbnail":"http://yyy.jpg"},{"thumbnail":"http://....jpg"}
]
}
}
}

Just do a console.log of your item element and I am pretty sure you will not get a valid object in return. After re-formating you should be able to access the desired value by item.LINKS[0].thumbnail.

Our just let your json validate e.g. by http://json.parser.online.fr/ and see if there is a valid output. Gives you also hints about expected brackets etc.

5

@gregg

 "DOCSET":{
    "@HIT_TIME":"137",
    "@TOTALHITS":"318206",
    "DOC":[
    {
    "@ID":"488489",
    "LINKS":{
    "thumbnail":"no_cover",

    "@ID":"314954",
    "LINKS":{
    "thumbnail":[
    "http://images.amazon.com/images/P/1118691784.01._SSTHUM_.jpg",
    "http://images.amazon.com/images/P/1118691784.01._SS[size]_SCLZZZZZZZ_.jpg"
    ],
6

Ok, well, use item.thumbnail to compare in [ngSwitch]. If ‘no_cover’, than use the fallback image, if not, use the regular image.

To debug your while loop and ngSwitch, just log the item to the console and have a look, what’s inside. This way you should be able to adjust your switch statement or the generation of the item object.

The ngSwitchCase thing is still the way to achieve the desired solutíon.