Data cannot be accessed after xml to json conversion
I study corners.
When i want to access the xml file i cant do it, i used xml_strjson this method converts xml data to json but cant access html file here is my code:
enter code here<!DOCTYPE html>
<html ng-app="">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"> </script>
<script type="text/javascript" src="http://demos.amitavroy.com/learningci/assets /js/xml2json.js" charset="UTF-8"></script>
<script>
function customersController($scope, $http) {
$http.get("http://localhost:13087/Data.xml")
.success(function (response) {
$scope.lstComapanies = x2js.xml_str2json(response);
console.log($scope.lstComapanies);
alert(response);
});
}
</script>
<title></title>
</head>
<body ng-controller="customersController">
<table>
<tbody>
<tr ng-repeat="CompanyModel in lstComapanies">
<!-- $index for duplicate values -->
<td class="border">
<label>{{ CompanyModel }}</label>
</td>
</tr>
</tbody>
</table>
my json data
{
"__cnt": 8,
"CompanyModel": [
{
"__cnt": 7,
"BacklogSum": "646",
"BacklogSum_asArray": [
"646"
],
"BillingSum": "607",
"BillingSum_asArray": [
"607"
],
"BookingSum": "646",
"BookingSum_asArray": [
"646"
],
"CashflowSum": "$-4809038.45",
"CashflowSum_asArray": [
"$-4809038.45"
],
"LstCompanies": {
"__cnt": 1,
"_i:nil": "true"
},
"LstCompanies_asArray": [
{
"__cnt": 1,
"_i:nil": "true"
}
],
"Name": "OPTERNA AM, INC. ",
"Name_asArray": [
"OPTERNA AM, INC. "
],
"Number": "2000",
"Number_asArray": [
"2000"
]
}
],
"_xmlns:i": "http://www.w3.org/2001/XMLSchema-instance",
}
source to share
You need to create a main module for your application and then add a controller to it.
First, change your script to this:
var myApp = angular.module('myApp', []);
myApp.controller('customersController', ['$scope', '$http',
function($scope, $http){
$http.get("http://localhost:13087/Data.xml")
.success(function (response) {
$scope.lstComapanies = x2js.xml_str2json(response);
console.log($scope.lstComapanies);
alert(response);
})
}]);
then configure your app and controller correctly.
<body ng-app="myApp">
<div ng-controller="customersController">
<table>
.... etc
also as above you will need to change your ng-repeat.
<tr ng-repeat="objects in lstComapanies.CompanyModel">
source to share
It's simple:
<tr ng-repeat="CompanyModel in lstComapanies.CompanyModel">
See your JSON. It starts with an object with two attributes: 1. ____cnt = 8 (sounds like a count) 2. CompanyModel = array of objects
So the relay is expecting an array, and you gave it an object. But this object includes your array.
JSON stands for Java Script Obect Notation and when JSON is processed in JavaScript it ends up in an object or array. This way you can directly join your lstComapanies (must be lstCampanies?).
If doesn't work, complete this task:
- Module
- Scope controller
-
use a controller and iterate over data
angular.module('myApp', []) .controller('customersController', ['$scope', '$http', $scope.lstComapanies = {}; function($scope, $http){ $http.get("http://localhost:13087/Data.xml") .success(function (response) { $scope.lstComapanies = JSON.parse(x2js.xml_str2json(response)); console.log($scope.lstComapanies); alert(response); }) }]); <body ng-app="myApp"> <div ng-controller="customersController"> ... <tr ng-repeat="CompanyModel in lstComapanies.CompanyModel"> <td>{{ CompanyModel.__cnt }}</td> <td>{{ CompanyModel.BacklogSum }}</td> <td> <span ng-repeat="sum in CompanyModel.BacklogSum_asArray">{{ sum }}</span> </td> </tr> ... </div>
NOTE. JSON.parse () does not exist in all browsers, see here: Safely Converting JSON String to Object
But ok, I would put http get stuff in a factory or service class that can be injected into any controller that needs data access. Then the next one I would promises you, which on successful return the desired data on certain API functions like getCompanies ()
source to share