AngularJS - Data-binding from JSON string

Question

I'm completely new with AngularJS and attempting to capture, parse, and display data from a SOAP web service. So far I can call successfully call a public weather service, capture and display the returned XML data, convert the XML to a JSON string, but I'm not having any success binding/displaying the JSON data. Below are my HTML and JS files. Thanks in advance for any advice/suggestions!

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

It would be helpful to include in your question what result you were expecting and what actually happened instead, along with any theories you might have or investigations you already tried. — Martin Atkins
– Martin Atkins, Commented Jul 27, 2014 at 2:14

Dan Doyon · Accepted Answer · 2014-07-27 05:56:32Z

0

Your xml is being delivered like below, which means you just need to pull the data off the top of the json object. Just an aside, you probably will want to look into putting your controller onto a module and moving the weather stuff into a service... but you didn't ask about that.

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

answered Jul 27, 2014 at 5:56

Dan Doyon

6,7302 gold badges33 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

AngularNoob Over a year ago

Thank you very much Dan, that resolved it. I understand architecturally, things should be structured more formally. I'll definitely investigate employing modules and services as I build out a more formal deployment for my much larger project at work.

Dan Doyon Over a year ago

@user3880846, One other bit I should've mentioned is that its probably better to test that your parsed jsonData is valid before pulling out WeatherReturn. An alternative would be to reference your bindings like jsonData.WeatherReturn.Temperature. Welcome to angularjs world it is very powerful but there are learning curves.

AngularNoob Over a year ago

Having just started learning regular Java, preventing null pointer exceptions has become somewhat of a habit. ;) I've advanced to displaying the data using ng-repeat with "(key,value) in jsonObject.WeatherReturn"

Collectives™ on Stack Overflow

AngularJS - Data-binding from JSON string

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related