$http.get and JSON

ionic-v1
1

I am trying to pull a JSON file to an ion-list but I can’t seem to get it to display. I also want to set up a detail page that pulls data from the list page. Any ideas? I’m still trying to wrap my head around how JSON files work too.

Thanks in advance!

Here is my controller.js code

 .controller('SessionCtrl', ['$scope', '$http', function($scope, $http) {
     $http.get('sessions/sessions.json').success(function(data) {
         $scope.sessions = data;
     });
}])

.controller('SessionDetailCtrl', ['$scope', '$routeParams',
    function($scope, $routeParams)
    {    
        $scope.sessionId = $routeParams.sessionId;
    }
])

Here is my ion-list code:

<ion-list>
  <ion-item ng-repeat="sessions in session" href="#/tab/sunday-detail/{{sessions.id}}">
    {{sessions.title}}
  </ion-item>
</ion-list>
2

you’ve set $scope.sessions in your controller but try to iterate over session (without the s)… try to change ng-repeat=“sessions in session” to “session in sessions” :smile:

and don’t forget to update {{sessions.}} to {{session.}}

3

Thanks, Bas. However, I am still not getting my list to show. I am also working within tabs. Could that be an issue?

4

try:

.controller('SessionCtrl', ['$scope', '$http', function($scope, $http) {
     $http.get('sessions/sessions.json').success(function(data) {
         console.log(data);
         $scope.sessions = data;
     });
}])

and see if it print the array in your console, and do what @Bas said:

<ion-list>
  <ion-item ng-repeat="session in sessions" href="#/tab/sunday-detail/{{session.id}}">
    {{session.title}}
  </ion-item>
</ion-list>

if doesn’t work, post your array here, or the code on codepen

5

Here’s my test array:

[
    {
        "id": 1,
        "imageUrl": " ",
        "name": "NAHU PPACA Certification Program",
        "speaker": " ",
        "day": "Sunday",
        "snippet": "NAHU PPACA Certification Program Description."
    }, 
    {
        "id": 2,
        "imageUrl": " ",
        "name": "DataSmart Vertical",
        "speaker": " ",
        "day": "Sunday",
        "snippet": "DataSmart Vertical Description."
    }, 
    {
        "id": 3,
        "imageUrl": " ",
        "name": "Retirement Vertical",
        "speaker": " ",
        "day": "Sunday",
        "snippet": "Retirement Vertical Description."
    }, 
    {
        "id": 4,
        "imageUrl": " ",
        "name": "Regional UBA Meetings",
        "speaker": " ",
        "day": "Sunday",
        "snippet": "Regional UBA Meetings Description."
    }
]
6

Found my issue. I was using {{session.title}} in my list when I should have been using {{session.name}}.

Thanks again for the help!

7 
HI mmilligan

i m using same but my one is not working can you pls help me. in controller i write this

.controller('SessionCtrl', ['$scope', '$http', function($scope, $http) {
     $http.get('http://tmcs.no-ip.info:83/iAutoCount/Profile.svc/json/GetProfile?dbName=5bvq9pq8EokHTf+uB/yLD61bh48juTfB/Up19EK4bks=&uDId=iKNColFa+oztAVriouDfvMpoNDwsYn9H4aJxSVWFIWpqyPnE1k47C5VUkpntIVPr&appsVersion=1.27.5&deviceUsage=180&appRealVersion=1.27.6&osVersion=8.1').success(function(data) {
         console.log(data);
         $scope.sessions = data;
     });
}])


and in html i m calling 

 {{session.Profile}}
8

Hi

the servicelist array is

[{“id”:“1”,“serviceTitle”:“Security Service”,“serviceDescription”:“We are providing 24 hrs Security service.”,“language”:“1”}]

in controller file

$scope.servicelists = data;

but i am not able to list the values in html page

    <ion-item ng-repeat="servicelist in servicelists">
      
        {{ servicelist.serviceTitle }}
       
    </ion-item>