CODEWITHSUNDEEP
angularjsjsonionic-framework
Ikram Bk
Ikram Bk

Reputation: 177

data to read my json file in IONIC

This world is sad to cry , am blocked for two hours with a problem that i couldnt define ,i can't retrieve data from my json file ,everything in my code seems correct.

This is my factory:

'use strict';
angular.module('starter.services')


.factory('userService',function ($http) {

	
        
        return{
			
			getUsers:function(){
				return $http.get("http://localhost:26309/api/User/getAll/").then(function (response) {
							return response.data;
                        });
			}
			
		}
		
});

and this controller :

'use strict';
angular.module('starter.controllers', ['starter.services'])


 .controller('UsersCtrl', function($scope,userService) {
	 $scope.Users = [];
userService.getUsers().then(function (data) { $scope.Users= data.data; }); });
	
	
});

index.html:

<!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></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>
	<script src="lib/ionic/js/angular/angular-resource.min.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
	 <script src="js/UserControllerIonic.js"></script>
	  <script src="js/UsersServiceIonic.js"></script>
   
  </head>

  <body ng-app="starter" ng-controller="UsersCtrl">
  <ion-view>
     <div class = "list" >
            <a class = "item" ng-repeat = "user in Users">
                <h2>{{user.nom}}</h2>
               
            </a>
        </div>
</ion-view>
 
	
  </body>
</html>

Thank you in advance

SOLUTION

i solved the problem by :

1- adding in the config.xml the permission <allow-navigation href="http://*/*"/>

2-installing cordova-plugin-whitelist ionic plugin add cordova-plugin-whitelist

3-add control-allow-origin extention to chrome :https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi/related?hl=en-US

and finally : specifying the type of data returned by the back-end controller by adding this code to my Global.asax in Application_start method :config.Formatters.JsonFormatter.SerializerSettings.Formatting = Newtonsoft.Json.Formatting.Indented; config.Formatters.Remove(config.Formatters.XmlFormatter);

hope this helps someone

Upvotes: 0

Views: 408

Answers (2)

Aditya Singh
Aditya Singh

Reputation: 16660

The issue is that you are resolving the promise in service with the value response.data, and again expecting the resolved value to have data property. Change your service code as below:

'use strict';
angular
  .module('starter.services')
  .factory('userService',function ($http) {
    return {        
      getUsers: function(){
        return $http.get("http://localhost:26309/api/User/getAll/").then(function (response) {
          return response;
        });
      }
    }
});

Or simply return the promise as below:

'use strict';
angular
  .module('starter.services')
  .factory('userService',function ($http) {
    return {        
            getUsers: function(){
                return $http.get("http://localhost:26309/api/User/getAll/");
            }
        }
});

Upvotes: 0

Prashant G
Prashant G

Reputation: 4900

You don't want to resolve your $http call inside factory.

JS:

angular.module('app',[])
.controller('MainCtrl', function($scope, MyService){
  var url = "http://jsonplaceholder.typicode.com/users";
  MyService.getData(url).then(function(res){
    console.log(res.data);
    $scope.data = res.data;
  });
})
.service('MyService', function($http){
  return {
    getData: function(url){
      return $http.get(url);
    }
  }
})

HTML: 

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <ul>
      <li ng-repeat="item in data">{{item.name}}</li>
    </ul>
  </body>

</html>

Upvotes: 0

Related Questions