I am a beginner with AngularJS and I'm currently working on retrieving, parsing, and displaying data from a SOAP web service. So far, I have been able to successfully make calls to a public weather service, capture and display the XML data that is returned, convert the XML to a JSON string. However, I am facing difficulties in binding and displaying the JSON data. Below are my HTML and JS files. Any advice or suggestions would be greatly appreciated!
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;
});
}