Reading JSON on AngularJS

Question

I'm trying to read json from my Web Service.

I get an error when I try to read teh file form the Web Service.

This is my controller:

var myApp = angular.module('myApp',[]);

myApp.controller('ShowServers', function($scope, $http) {
    $http.get('http://localhost/espaidiscos/WebService/ws.php/servidors').
    success(function(data, status, headers, config) {
      $scope.servers = data;
      console.log("work");
    }).
    error(function(data, status, headers, config) {
      // log error
      console.log("don't work");
    });
});

The html:

<html ng-app='myApp'>
    <header>
        <script src="./assets/js/angular.min.js"></script>
    </header>
    <body>
        <div ng-controller="ShowServers">
            <ul>
                <li ng-repeat="server in servers">
                    {{ server.nom }}
                </li>
            </ul>
        </div>
        <!--<div ng-controller="GreetingController">
            {{ greeting }}
        </div>-->
    </body>
    <!--<script src="./assets/js/angular.min.js"></script>-->
    <script src="./assets/js/controller.js"></script>
    <!--<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js"></script>-->
</html>

I can't get any value on the browser. I'm very newbie, any help would be grateful.

Edit:

This is What I get form the Web Service on this URL:

{"servers": [{"idServidors":"1","nom":"file01","ip":"10.0.0.170"},{"idServidors":"2","nom":"dc","ip":"10.0.0.5"}]}

Edit v2:

I tryied with SoapUI and this is what my web service is returning me:

<html>
   <head>
      <meta content="HTML Tidy for Java (vers. 26 sep 2004), see www.w3.org" name="generator"/>
      <title/>
   </head>
   <body>{"servers": [{"idServidors":"1","nom":"file01","ip":"10.0.0.170"},{"idServidors":"2","nom":"dc","ip":"10.0.0.5"}]}</body>
</html>

Can the problem comes from here? Don't should be a simple json without body tag and other stuff?

EDIT v3:

Now my web service is working fine and returns a truly json response. I don't get any error on the js chrome console.

This is how my html and angular looks now:

<html ng-app='myApp'>
    <header>
        <script src="./assets/js/angular.min.js"></script>
    </header>
    <body>
        <div ng-controller="ShowServers">
            <ul>
                <li ng-repeat="server in servers">
                    {{ server.nom }}
                </li>
            </ul>
        </div>
        <!--<div ng-controller="GreetingController">
            {{ greeting }}
        </div>-->
    </body>
    <!--<script src="./assets/js/angular.min.js"></script>-->
    <script src="./assets/js/controller.js"></script>
    <!--<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js"></script>-->
</html>

var myApp = angular.module('myApp',[]);

    $http.get('http://localhost/espaidiscos/WebService/ws.php/servidors').success(function(data, status, headers, config) {
      $scope.servers = data;
      console.log(data);
      console.log(status);
      console.log(headers);
      console.log(config);
    }).
    error(function(data, status, headers, config) {
      // log error
      console.log("Error");
    });
});

SOLVED:

I copyed the example on w3schools site: http://www.w3schools.com/angular/angular_http.asp

<script>
var MyApp = angular.module('myApp', []);
MyApp.controller('customersCtrl', function($scope, $http) {
    $http.get("http://localhost/espaidiscos/WebService/ws.php/servidors")
    .then(function(response) {
                  $scope.servers= response.data.servers;
    });
});
</script>

just give data.servers in the success callback.

Amaranadh Meda
– Amaranadh Meda

2015-12-09 08:26:33 +00:00
Commented Dec 9, 2015 at 8:26 — Amaranadh Meda
– Amaranadh Meda, Commented Dec 9, 2015 at 8:26

CleoR · Accepted Answer · 2015-12-09 16:10:57Z

3

It looks like 2 things could be happening. The first is the variable servers isn't instantiated when the ng-repeat runs.

The second is servers doesn't actually have a nom attribute.

$scope.servers = [];
//HTTP Request

Also, print out the servers variable from request to make sure you are getting what you think.

EDIT:

You are making $scope.servers equal to the servers object. You should make it equal data.servers. ng-repeat is only going to work over an array.

EDIT2:

If you're getting an error in the error callback, you must print out the servers response to try and debug it. Without seeing this information I can only guess at what's happening. If you can post the URL in your browser and get JSON fine, but when you try it from javascript, you get an error, then it might have something to do with the response-type. The browser will use a response-type of HTML where from Angular I believe the response-type will be JSON by default. Your server might error out if it doesn't know how to handle the latter.

EDIT3

var myApp = angular.module('myApp',[]);

myApp.controller('ShowServers',function($scope,$http,GetServers){
	GetServers.simGetServers($scope);
});

myApp.factory('GetServers', function($http,$timeout){
	var simGetServers = function(scope){
		$timeout(function(){
			data = {"servers": [{"idServidors":"1","nom":"file01","ip":"10.0.0.170"},{"idServidors":"2","nom":"dc","ip":"10.0.0.5"}]}
			scope.servers = data.servers;
		},200)
	};	
	var getServers = function(scope){
		$http.get('http://localhost/espaidiscos/WebService/ws.php/servidors').success(function(data, status, headers, config) {
      scope.servers = data.servers;
    }).
    error(function(data, status, headers, config) {
      console.log(data);
    });
	};
	return {
		getServers: function(scope){
			getServers(scope);
		},
		simGetServers: function(scope){
			simGetServers(scope);
		}
	}
});

<html>
	<header>
		<title>StackOverflow Question Response</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
	</header>
	<body ng-app="myApp">
		<div ng-controller="ShowServers">
			<ul>
				<li ng-repeat="server in servers" ng-cloak>
					{{ server.nom }}
				</li>
			</ul>
		</div>
		<script src="index.js"></script>
	</body>
</html>

You put your script outside of the body tag!

edited Dec 9, 2015 at 16:10

answered Dec 8, 2015 at 17:03

CleoR

8151 gold badge6 silver badges19 bronze badges

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

17 Comments

jcobo1 Over a year ago

I changed but still don't work: success(function(data, status, headers, config) { $scope.servers = data.servers; console.log("work"); }).

CleoR Over a year ago

data.servers is correct but also print out $scope.servers inside of console.log to make sure you are getting an array back. You may need to follow my other advice and instantiate $scope.servers before making the HTML request. Post your new error when you get it

jcobo1 Over a year ago

I tryed and returned 'undefined'

jcobo1 Over a year ago

I will Try it @CleoR. If works be sure I will accept it

CleoR Over a year ago

Nice! I wrote the code out above if you still want it. It looks like you put your script tag in the wrong place too

|

Patrick Gray · Accepted Answer · 2015-12-08 17:02:02Z

1

The error you show from your web browser's console implies that the server is not providing a JSON object. Check your web service to make sure that it is proving the object the way you expect.

answered Dec 8, 2015 at 17:02

Patrick Gray

751 silver badge9 bronze badges

3 Comments

jcobo1 Over a year ago

If i go to the URL I get this: {"servers": [{"idServidors":"1","nom":"file01","ip":"10.0.0.170"},{"idServidors":"2","nom":"dc","ip":"10.0.0.5"}]} I validated with an online JSON validator and looks fine.

CleoR Over a year ago

You have to make $scope.servers = to data.servers

jcobo1 Over a year ago

I tryed this but doesn't see any changes

Collectives™ on Stack Overflow

Reading JSON on AngularJS

2 Answers 2

17 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

17 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related