After converting xml to json unable to access the data

Question

I am learning angularjs.

When i want to access xml file,i am unable to do it i used xml_strjson this method is converting the data xml to json but unable to access in 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",

}

try parsing JSON.parse(your_converted_data) . – Anil Sharma Dec 17 '14 at 12:25 — Anil Sharma, Dec 17 '14 at 12:25

score 3 · Accepted Answer · 2014-12-17T12:38:17.453

3

You need to create a main module for your app, and then add the 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 set up your app and controller correctly

<body ng-app="myApp">
    <div ng-controller="customersController">
        <table>
            .... etc

also, as pointed out above you will need to change your ng-repeat.

<tr ng-repeat="objects in lstComapanies.CompanyModel">

edited Dec 17 '14 at 12:38

answered Dec 17 '14 at 12:28

hi sorry above one showing blank page i modifed the script as u given but no change in result but when i check with alert i can see the data – user1983379 Dec 17 '14 at 12:39
@user1983379 since you changed the name of ng-repeat to objects did you change the binding to {{objects}} – Dec 17 '14 at 12:44
hi Alex Scott my issue was sloved by changin this code $scope.lstComapanies = obj.ArrayOfCompanyModel.CompanyModel; – user1983379 Dec 17 '14 at 13:41

score 0 · Answer 2 · edited May 23 '17 at 12:33

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 count) 2. CompanyModel = Array of objects

So the repeater expects an array and you gave him an object. But this object includes your array.

JSON means Java Script Obect Notation and when you have JSON parsed in JavaScript it ends up in an object or array. So you can directly acces everythin in your lstComapanies (should be lstCampanies?).

If not working do the hole thing:

Module
Controller to define scope

use 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() doesn't exist in all browser, see here: Safely turning a JSON string into an object

But normaly I would place the http get stuff in a factory or service class which can be injected in to any controller that needs access to the data. Then next I would you promises which when succeed return desired data over specific API functions like getCompanies()

Then you have to add an angular module as described by @Alex Scott, too. — Rene M., Dec 17 '14 at 13:23

After converting xml to json unable to access the data

2 Answers2