[英]AngularJS - Data-binding from JSON string
我对AngularJS完全陌生,并尝试从SOAP Web服务捕获,解析和显示数据。 到目前为止,我可以成功呼叫一个公共气象服务机构,捕获并显示返回的XML数据,将XML转换为JSON字符串,但是绑定/显示JSON数据没有任何成功。 以下是我的HTML和JS文件。 在此先感谢您的任何建议/建议!
MyHelloView.html
<!doctype html>
<html>
<head>
<script language="JavaScript" type="text/JavaScript" src="angular.min.js"> </script>
<script language="JavaScript" type="text/JavaScript" src="xml2json.js"></script>
<script language="JavaScript" type="text/JavaScript" src="MyHelloController.js"> </script>
</head>
<body ng-app>
<title>My Simple Angular App</title>
<div ng-controller='MyHttpController'>
{{soapResponse}}
<br/><br/>
{{jsonData}}
<br/><br/>
WeatherReturn: <br/>
Success: <input type="text" ng-model="jsonData.Success" /> <br/>
ResponseText: <input type="text" ng-model="jsonData.ResponseText" /> <br/>
State: <input type="text" ng-model="jsonData.State" /> <br/>
City: <input type="text" ng-model="jsonData.City" /> <br/>
WeatherStationCity: <input type="text" ng-model="jsonString.WeatherStationCity" /> <br/>
WeatherID: <input type="text" ng-model="jsonData.WeatherID" /> <br/>
Description: <input type="text" ng-model="jsonData.Description" /> <br/>
Temperature: <input type="text" ng-model="jsonData.Temperature" /> <br/>
RelativeHumidity: <input type="text" ng-model="jsonData.RelativeHumidity" /> <br/>
<div ng-repeat="field in jsonData.fields">
{{field.name}}: <input type="text" ng-model="field.value">
</div>
<br/><br/>
</div>
</body>
</html>
MyHelloController.js
function MyHttpController($scope, $http) {
$scope.loaded = false;
$scope.soapResponse = 'no response yet';
$http.get('http://wsf.cdyne.com//WeatherWS/Weather.asmx/GetCityWeatherByZIP?ZIP=60301').then(function(result){
$scope.soapResponse = result.data;
var x2js = new X2JS(); // convert XML data to JSON
$scope.jsonData = x2js.xml_str2json(result.data);
$scope.loaded = true;
});
}
xml的交付方式如下所示,这意味着您只需要从json对象的顶部提取数据即可。 顺便说一句,您可能希望考虑将控制器放到模块上,然后将天气资料移到服务中……但是您并没有对此提出疑问。
$scope.jsonData = x2js.xml_str2json(result.data).WeatherReturn;
<WeatherReturn xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns="http://ws.cdyne.com/WeatherWS/">
<Success>true</Success>
<ResponseText>City Found</ResponseText>
<State>IL</State>
<City>Oak Park</City>
<WeatherStationCity>Maywood</WeatherStationCity>
<WeatherID>14</WeatherID>
<Description>Cloudy</Description>
<Temperature>27</Temperature>
<RelativeHumidity>63</RelativeHumidity>
<Wind>S9</Wind>
<Pressure>29.95F</Pressure>
<Visibility/>
<WindChill/>
<Remarks/>
</WeatherReturn>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.