how to display data from Yii2 framework which is JSON format into IONIC framework (mobile application)?

Question

I am newbie in ionic framework and also Yii2 framework. In Yii2 framework I'm working on RESTful API project which is display data from database into JSON format. This is the result after fetch data into JSON format.

{
   "user_id": 1,
   "username": "linux",
   "nicename": "backtrack"
}

So, what I want to do right now is get some data from JSON format and display at mobile application using ionic framework. I have tried at browser but no data is displayed. At inspect element console I got this error:

XMLHttpRequest cannot load http://localhost/basic/web/index.php/users/1?key1=value&key2=value. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.

This is my code at app.js inside myApplication ionic folder:

var App = angular.module('starter',['ionic'])
.run(function($ionicPlatform) {
   $ionicPlatform.ready(function() {
      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
      // for form inputs)
      if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
           cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
   }
      if (window.StatusBar) {
       // org.apache.cordova.statusbar required
       StatusBar.styleLightContent();
}
  });
});

App.controller('AppCtrl', function($scope, $http){
$scope.getData = function() {
    $http.get('http://localhost/basic/web/index.php/users/1', {params: {"key1": "value", "key2": "value"}})
        .success(function(data){
            $scope.username = data.username;
        })
        .error(function(data){
            alert("ada prob !");
        });
  }
});

This is my index.html inside myApplication ionic folder:

<!doctype html>
<html>
<head>
    <meta charset='UTF-8'>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>Ikrar Potensi</title>
    <!--Ionic Libs-->
    <link rel='stylesheet' href="lib/ionic/css/ionic.css">
    <script src='lib/ionic/js/ionic.bundle.js'></script>
    <!--My app-->
    <link rel='stylesheet' href='css/style.css'>
    <script src='js/app.js'></script>
    <script src='cordova.js'></script>

</head>
<body ng-app="starter">
    <ion-header-bar class='bar-balanced'>
        <h1 class='title'>Ikrar Potensi</h1>
        <!--<button class='button' data-ng-click='getData()'>
            <i class='icon ion-refresh'></i>
        </button>-->
    </ion-header-bar>
<ion-content ng-controller='AppCtrl'>
<button class='button' ng-click='getData()'>Do Something</button>
    <br>
            name: {{username}}
            <p>Some text</p>


</ion-content>
</body>

Before I put http://localhost/basic/web/index.php/users/1 at app.js, I try put https://graph.facebook.com/profile-name and run at chrome, the data will be DISPLAYED depend on what I want to display. But, when I put localhost/... error shown at inspect element console.

What is the meaning of the error and how to fix it? I need your help guys.

meow · Accepted Answer · 2015-05-10 16:39:32Z

0

try install CORS extension on your google chrome

answered May 10, 2015 at 16:39

meow

452 gold badges2 silver badges8 bronze badges

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

Comments

Дмитрий Мельниченко · Accepted Answer · 2015-05-10 20:20:31Z

0

I have solution based on .htaccess

Try something like that in your web folder:

<IfModule mod_headers.c>
   Header Always set Access-Control-Allow-Origin "YOUR_HOST"
   Header set Access-Control-Allow-Credentials true
   Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS, PATCH, HEAD"
   Header set Access-Control-Allow-Headers "Authorization, Content-Type, Response-Type, If-Modified-Since"
   Header set Access-Control-Expose-Headers "Content-disposition, X-Pagination-Current-Page, X-Pagination-Page-Count, X-Pagination-Per-Page, X-Pagination-Total-Count, Link"
</IfModule>

It allows only one host.

answered May 10, 2015 at 20:20

Дмитрий Мельниченко

312 bronze badges

Comments

Reza1607 · Accepted Answer · 2015-05-11 07:15:29Z

0

For security reasons, Browsers can not send ajax request to another site. To do this you should use JSONP.

Try this code.

$http.jsonp('http://localhost/basic/web/index.php/users/1?callback=JSON_CALLBACK', {params: {"key1": "value", "key2": "value"}})
    .success(function(data){
        $scope.username = data.username;
    })
    .error(function(data){
        alert("ada prob !");
    });

}

answered May 11, 2015 at 7:15

Reza1607

581 silver badge8 bronze badges

Collectives™ on Stack Overflow

how to display data from Yii2 framework which is JSON format into IONIC framework (mobile application)?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related