Question

嗨朋友

我需要在离子应用中根据JSON数据显示一些社交图标，但问题是我无法获取无法在屏幕上显示的多级JSON数据。

需要看起来像：

JSON数据

{
"candidates": [
    {
        "id": "0",
        "socialmedia": [
            {
                "network": "linkend",
                "url": "https://www.linkend.com",
                "icon": "https://www.example.com/images/linkend.png"
            },{
                "network": "skype",
                "url": "https://www.skype.com",
                "icon": "https://www.example.com/images/skype.png"
            },{
                "network": "google",
                "url": "https://www.google.com",
                "icon": "https://www.example.com/images/google.png"
            },{
                "network": "yahoo",
                "url": "https://www.yahoo.com",
                "icon": "https://www.example.com/images/yahoo.png"
            }
        ],
    },{
        "id": "1",
        "socialmedia": [
            {
                "network": "facebook",
                "url": "https://www.facebook.com",
                "icon": "https://www.example.com/images/facebook.png"
            },{
                "network": "linkend",
                "url": "https://www.linkend.com",
                "icon": "https://www.example.com/images/linkend.png"
            },{
                "network": "google",
                "url": "https://www.google.com",
                "icon": "https://www.example.com/images/google.png"
            },{
                "network": "yahoo",
                "url": "https://www.yahoo.com",
                "icon": "https://www.example.com/images/yahoo.png"
            }
        ],
    },{
        "id": "2",
        "socialmedia": [
            {
                "network": "facebook",
                "url": "https://www.facebook.com",
                "icon": "https://www.example.com/images/facebook.png"
            }
        ],
    }
}

请帮助我，提前致谢

Answer 1

如果您想为每个候选人显示社交图标，您可以使用嵌套的ng-repeat，如下所示：

<div ng-repeat="candidate in candidates">
    <div ng-repeat="socialLink in candidate.socialmedia">
       <a href="{{socialLink.url}}"><div class="{{socialLink.network}}></a>
    </div>
</div>

你可以根据社交媒体网络定义一些css类，并在你的html中使用这些类名来显示图像（查看下面的css供你参考。这只是你理解的一个例子，而不是你的确切css定义将使用）

.facebook {
  display: inline-block;
  background-image: url("facebook-icon.png");
}
.linkedin {
  display: inline-block;
  background-image: url("linkedin-icon.png");
}
.another-network {
  display: inline-block;
  background-image: url("another-network-icon.png");
}

Answer 2

试试这样：

    var test={
"candidates": [
    {
        "id": "0",
        "socialmedia": [
            {
                "network": "facebook",
                "url": "https://www.facebook.com"
            },{
                "network": "linkend",
                "url": "https://www.linkend.com"
            },{
                "network": "skype",
                "url": "https://www.skype.com"
            },{
                "network": "google",
                "url": "https://www.google.com"
            },{
                "network": "yahoo",
                "url": "https://www.google.com"
            }
        ]
    }
]
}; 
var socialmedia=test.candidates[0].socialmedia;
for(var i in socialmedia){
alert(socialmedia[i].url);
}

Answer 3

您必须将响应存储在$ scope变量中，如此

$scope.socialmedia=response.candidates[0].socialmedia;

在你的视图中

 <div ng-repeat="img in socialmedia">
    <img ng-src="img/{{img.network}}.jpeg" >
    </div>

注意图像应根据其显示的名称存储在www文件夹中，否则您可以直接从服务器调用它

获取多级（嵌套）JSON数据并在Ionic App中显示数据

3 个答案: