0

I tried the following code by coping the data from JSON link as an object. Everything was good. But when I really retrieve it remote from the server and test, it seems that I cannot get it display on the list. Can someone help ? I want to list the title,image and author on the home.html page. Appreciate if anyone can help. Still trying to learn.

I've tried getting other JSON $http.get('https://jsonplaceholder.typicode.com/posts') and it worked. But this particular one is a little difficult for me to understand why it is not parsing correctly. For the code to work, i need to have it on my phone in order to work also. I can see the JSON being downloaded and alerted. But, I don't know why still not seeing the data.

Please see my code as follows. http://codepen.io/ccrash/pen/VjNPkv

Home.html

<ion-view view-title="Dashboard">
  <ion-content class="padding">
    <h2>Ionic GET Json Example</h2>
      <ion-item ng-repeat="x in result[0].data.items">
      <div> {{x.title}} </div>
      <div> {{x.image[0]}} </div>
      <div> {{x.author}} </div>
    </ion-item>
  </ion-content> 
</ion-view>

Controller

.controller('HomeCtrl', function($http, $scope, $ionicSideMenuDelegate) {

  $http.get('http://www.malaysiakini.com/c/en/news?alt=json')
    .success(function(data, status, headers,config){
      //console.log('data success');
      //console.log(data); // for browser console
      alert(JSON.stringify(data));
      $scope.result = data; // for UI
    })
    .error(function(data, status, headers,config){
      console.log(headers); 
      console.log('data error');
    })
    .then(function(result){
      things = result.data;
    });  

})
Jsmidt
  • 125
  • 2
  • 9

1 Answers1

0

It's a common issue. I see errors in browser console:

error log

It's usually because you are request to a different domain than your page is on, browser will block your request for security consideration. According to my experience, you can use jsonp as your request data type or add Access-Control-Allow-Origin headers to the server's response.

See this question for more infomation

Community
  • 1
  • 1
Max
  • 463
  • 4
  • 11
  • Hi... I am not referring to this error. I tried the code on my phone and it is able to download the JSON, but after that, it cannot parsed and display – Jsmidt Aug 20 '16 at 14:20
  • I have tried open your codepen on my phone, download and run it localhost, it always show the same error in answer. So what is the correct way to reproduce your error? – Max Aug 20 '16 at 15:28
  • Hi, When I run it on my phone, I did a http request and did a JSON.stringify(data) and alert. Please see the image posted here. https://postimg.org/image/e6un86h1l/ – Jsmidt Aug 20 '16 at 15:48
  • I see. Try `ng-repeat="x in result.data.items"`, `[0]` is used for retrieving the first item of an **array**, but the `data` is an **object**, so you use `.` to get its item. – Max Aug 20 '16 at 16:48
  • Got it. Thanks. You really helped me a lot. Thank you. I understand it much much more. – Jsmidt Aug 20 '16 at 18:48