AngularJS - 從JSON字符串中進行數據綁定

我對AngularJS是全新的，試圖捕獲，解析和顯示來自SOAP Web服務的數據。到目前爲止，我可以調用成功調用公共天氣服務，捕獲並顯示返回的XML數據，將XML轉換爲JSON字符串，但是我沒有成功綁定/顯示JSON數據。以下是我的HTML和JS文件。在此先感謝您的任何建議/建議！AngularJS - 從JSON字符串中進行數據綁定

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

來源

2014-07-27 AngularNoob

如果在您的問題中包含您期待的結果以及實際發生的情況，以及您可能擁有的任何理論或您已經嘗試過的調查，這將會很有幫助。 –

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

來源

2014-07-27 05:56:32

非常感謝丹，解決了它。我從架構上理解，事情應該更加正式地構建。我肯定會調查僱用模塊和服務，因爲我爲我的大型項目建立了更正式的部署。 – AngularNoob

@ user3880846，我應該提到的另外一點是，在拔出WeatherReturn之前，可能更好地測試解析的jsonData是否有效。另一種方法是引用你的綁定，比如jsonData.WeatherReturn.Temperature。歡迎來到angularjs世界，它非常強大，但有學習曲線。 –

剛開始學習普通的Java，防止空指針異常已經成爲一種習慣。 ;）我已經開始使用ng-repeat在「jsonObject.WeatherReturn」中使用「（key，value）」來顯示數據， – AngularNoob

AngularJS - 從JSON字符串中進行數據綁定

回答

相關問題