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

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

i cannot understand your question. You want to fetch the icon from those social? — gianlucatursi
– gianlucatursi, Commented Aug 31, 2016 at 12:23
@gianlucatursi Thanks for your reply. No, I want only to show that json data to my app look like in above pic. The problem that I am not able to fetch "socialmedia" data and not able to bind in app page — Neotrixs
– Neotrixs, Commented Aug 31, 2016 at 12:39

Prasad K - Google · Accepted Answer · 2016-09-01 10:32:24Z

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

answered Sep 1, 2016 at 10:32

Prasad K - Google

2,5841 gold badge17 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Neotrixs Over a year ago

Thanks Prasad, You save my day!!.

Homen · Accepted Answer · 2016-08-31 12:38:57Z

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

Gopinath Kaliappan · Accepted Answer · 2016-08-31 12:46:42Z

0

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

answered Aug 31, 2016 at 12:46

Gopinath Kaliappan

7,4298 gold badges42 silver badges62 bronze badges

1 Comment

Neotrixs Over a year ago

Thanks for your reply, i try your code I face problem that json data is for different different ID and I need to show social network images based on there ID page

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related