Neotrixs Neotrixs - 3 months ago 50
JSON Question

Fetch multi level(nested) JSON data and show data in Ionic App

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:

enter image description here

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

Answer

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