如何检查 JSON 对象 ionic2 中的值答案

【问题标题】：How to Check value in JSON object ionic2如何检查 JSON 对象 ionic2 中的值
【发布时间】：2017-06-07 20:47:55
【问题描述】：

如何检查thumbnail[0] 中的"no_cover" 值并将其替换为asset/sss.jpg 以显示listpage 我尝试在 Listpage.html 中设置<img src="{{item.LINKS.thumbnail[0]}}">，这个只显示缩略图[0] 是http://xxx.jpg，http://xxx.jpg，但是我不知道设置“no_cover”

我的json

"    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"}
        }]
     }

编辑 - 你的 JSON 应该是什么样子

因为我 (ivaro18) 相信您是手动编写 JSON 并且没有复制响应对象。让我向您展示有效的 JSON 是什么样的：

{
    "DOCSET" : [
        {
            "DOC" : {
                "LINKS" : [
                    {
                      "thumbnail" : "http://.....jpg"
                    },
                    {
                      "thumbnail" : "http://.....jpg"
                    }                
                ]
             }
        },
        {
            "DOC" : {
                "LINKS" : [
                    {
                      "thumbnail" : "http://.....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')
            );

【问题讨论】：

您的 JSON 似乎已损坏：您有 3 个左方括号 [ 没有相应的右方括号 ]
@elf337 哦，我编辑了！ ,你能帮我吗T^T
您的 JSON 似乎有重复的键 DOC，这使其无效且无法正常使用。
fongfuse，使用[...]声明一个列表，{...}声明一个对象。一个对象不能有 2 个或更多同名的东西（就像你的 DOC 和 thumbnail 建议的那样）。好像您已经手动编写了 JSON 并将 [] 和 {} 混淆了 :)
@Ivaro18 我编辑了！ ,你能帮我吗T^T

标签： javascript html typescript ionic-framework ionic2

【解决方案1】：

首先，您发布的 JSON 无效。用它可能是什么来编辑你的问题（因为你正在按你说的那样打印它）

我从您的问题中了解到以下内容，您有<img src="{{item.LINKS.thumbnail[0]}}">，但是当no_cover 返回时，这会引发404，这就是为什么当item.LINKS.thumbnail[0] 等于'no_cover' 时，您想要显示图片assets/sss.jpg

那么，我们如何使用它来显示'assets/sss.jpg' 而不是'no_cover'？它被称为Elvis operator ( ? : )

让我们假设if-statement 的构造如下：

if(expression) {
    result = whenExpressionIsTrue
 } else {
    result = whenExpressionIsFalse  
 }

我们可以像这样用 Elvis 运算符重写：

result = someExpression ? whenExpressionIsTrue : whenExpressionIsFalse

那么，让我们看看你的问题，我们如何使用if-statement 来解决这个问题？

if(item.LINKS.thumbnail[0] == 'no_cover') {
   someVariable = 'assets/sss.jpg';
}  else {
   someVariable == item.LINKS.thumbnail[0];
}

现在用 Elvis 运算符缩短它：

someVariable = item.LINKS.thumbnail[0] == 'no_cover' ? 'assets/sss.jpg' : item.LINKS.thumbnail[0];

现在它可以像这样在你的 HTML 中使用：

<img 
     [src]="item.LINKS.thumbnails[0] == 'no_cover' ? 'assets/sss.jpg' : item.LINKS.thumbnails[0]"
/>

【讨论】：

在我看来这看起来更好，你也可以使用 if 语句，只要你使用数据绑定 [src] （或 [attr.src] 不再完全确定）like [src]="if(....) { 'assets/sss.jpg' } else { .... }