离子获取远程JSON数据

时间:2016-08-19 09:06:45

标签: json http ionic-framework

我通过将来自JSON链接的数据作为对象进行处理来尝试以下代码。一切都很好。但是,当我真正从服务器远程检索它并进行测试时,我似乎无法将其显示在列表中。有人可以帮忙吗? 我想在home.html页面上列出标题,图片和作者。感谢是否有人可以提供帮助。还在努力学习。

我尝试过获取其他JSON $ http.get('https://jsonplaceholder.typicode.com/posts')并且它有效。但是这个特别难以理解为什么它没有正确解析。为了使代码工作,我需要在手机上使用它才能工作。我可以看到JSON正在下载并发出警报。但是,我不知道为什么还没有看到数据。

请参阅我的代码如下。 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('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;
    });  

})

1 个答案:

答案 0 :(得分:0)

这是一个常见问题。我在浏览器控制台中看到错误:

error log

通常是因为您要求使用与您的网页不同的域名,浏览器会阻止您的安全考虑请求。根据我的经验,您可以使用jsonp作为请求数据类型,或者将Access-Control-Allow-Origin标头添加到服务器的响应中。

有关详细信息,请参阅this question