繁体   English   中英

AngularJS-JSON字符串的数据绑定

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM