Question

我试图从我的网络服务中读取json。

当我尝试从Web服务中读取文件时出现错误。

这是我的控制者：

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");
    });
});

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>

我无法在浏览器上获得任何价值。我是新手，任何帮助都会感激不尽。

编辑：

这是我在此URL上从Web服务获得的内容：

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

编辑v2：

我尝试使用SoapUI，这就是我的网络服务给我的回复：

<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>

问题可以来自这里吗？不应该是一个没有身体标签和其他东西的简单json吗？

编辑v3：

现在我的网络服务工作正常并返回真正的json响应。我没有在js chrome控制台上收到任何错误。

这就是我的html和angular现在的样子：

<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");
    });
});

解决：

我在w3schools网站上复制了这个例子：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>

Answer 1

看起来有两件事情可能会发生。第一个是当ng-repeat运行时，实例化变量服务器。

第二个是服务器实际上没有nom属性。

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

此外，从请求中打印出服务器变量，以确保获得您的想法。

编辑：

您正在使$ scope.servers等于servers对象。你应该使它等于data.servers。 ng-repeat只能在数组上工作。

EDIT2：

如果您在错误回调中遇到错误，则必须打印出服务器响应以尝试调试它。没有看到这些信息，我只能猜测发生了什么。如果您可以在浏览器中发布URL并获得JSON，但是当您从javascript尝试它时，您会收到错误，然后它可能与响应类型有关。浏览器将使用响应类型的HTML，其中来自Angular我认为响应类型默认为JSON。如果服务器不知道如何处理后者，则可能会出错。

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>

您将脚本放在body标签之外！

Answer 2

您在Web浏览器控制台中显示的错误意味着服务器未提供JSON对象。检查您的Web服务，确保它以您期望的方式证明对象。

在AngularJS上阅读JSON

2 个答案: