Fetch multi level(nested) JSON data and show data

Question

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

Answer 1

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

Answer 2

You Have to store the response in $scope variable like this

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

In Your View

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

Note the images should be stored in your www folder, based on the name it will display or else you can directly call it from server

Answer 3

Try like this :

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