I have successfully transformed my XML data into JSON format to be utilized in Angular 2 within my view. However, as I attempt to loop through the data using a for(var... loop, I encounter an error message stating that it cannot find name array and that the property lenght does not exist on type Document.
getXml() {
this.http.get('../../xmlConf/dashboard_journey.xml')
.map(response => response.text())
.subscribe(data => {
if(data) {
var parser = new DOMParser();
var xmlData = parser.parseFromString(data, "application/xml");
for (var index = 0; index < xmlData.length; index++) {
var element = xmlData[index];
}
}
});
}
The aforementioned line will retrieve the XML data that needs to be iterated through.
var xmlData = parser.parseFromString(data, "application/xml");
My XML Data consists of 5 of these:
<journey>
<title>Click and Collect</title>
<shortDesc>
<short_desc_1>lorem</short_desc_1>
<short_desc_2>lorem</short_desc_2>
</shortDesc>
<longDesc>
lorem
</longDesc>
<imageName>
<img src="/journey_images/clickandcollect.jpg" alt="Click and Collect"/>
</imageName>
Desired End Result:
In Angular 1, when working with JSON format data received from the server, you can access items like data.obj or use ng-repeat in HTML to display the response data.
<div ng-repeat="item in items">
<div>{{item.title}}</div>
<div>{{item.longDesc}}</div>
<div>{{item.imageName}}</div>
</div>