获取多级（嵌套）JSON数据并在Ionic应用程序中显示数据 [英] Fetch multi level(nested) JSON data and show data in Ionic App

问题描述

好友好友

我需要根据JSON数据在离线应用中显示一些社交图标，但我无法fetch多级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，
 ：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
b
]，
}，{
id：2，
socialmedia：[
 {
network facebook，
url：https://www.facebook.com，
icon：https://www.example.com/images/facebook.png
} 
]，
} 
} 
  

如果你想为每个候选人显示社交图标，你可以嵌套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）; 
} 
  

Hi friends

I need to show some social icon in ionic app based on JSON data, but the problem I am not able to fetch multi level JSON data not able to show on screen.

Need to look like:

JSON data

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

Please Help Me, Thanks in Advance

解决方案

If you want to show social icons for each candidate, you can have nested ng-repeat as shown something like below:

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

You can define some css classes based on the socialmedia networks and use those class names in your html to display the images (check the below css for your reference. This is just an example for your understanding and not the exact css definitions you will use)

.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");
}

这篇关于获取多级（嵌套）JSON数据并在Ionic应用程序中显示数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！