CODEWITHSUNDEEP
angularjs
Michael
Michael

Reputation: 13636

Why returned data from web service is not displayed in table?

I use anguraljs 1.6 in my project.

I read data from web service and I need to display returned data in table.

Here is my http ajax call:

$http.get("../../Services/ReportDepartmentService.asmx/GetRecords").then(function (response) {
          $scope.report = response.data;
    });

And here is example of data returned from web service: 

    "<?xml version="1.0" encoding="utf-8"?>
    <ArrayOfDepartmentReport xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://localhost/services">
      <DepartmentReport>
        <IncidentId>140609</IncidentId>
        <JunctionId>1</JunctionId>
        <PropType>Data1</PropType>
        <Damage>Data2</Damage>
        <UserName>John1</UserName>
        <ContractNO>10040/10</ContractNO>
        <FixName>Data3</FixName>
        <TimeStart>14:31</TimeStart>
        <TimeDue>17:31</TimeDue>
        <TimeEnd>14:38</TimeEnd>
        <StatusID>1</StatusID>
        <StatusText>End</StatusText>
        <Priority>High</Priority>
        <Notes />
        <IncidentFactor />
        <Description />
        <DtStartPlus>2017-01-18T14:31:00</DtStartPlus>
        <DtDuePlus>2017-01-18T17:31:00</DtDuePlus>
        <DtEnd>2017-01-18T14:38:00</DtEnd>
      </DepartmentReport>
      <DepartmentReport>
        <IncidentId>140609</IncidentId>
        <JunctionId>1</JunctionId>
        <PropType>Data10</PropType>
        <Damage>Data20</Damage>
        <UserName>Max1</UserName>
        <ContractNO>10040/10</ContractNO>
        <FixName>Data30</FixName>
        <TimeStart>14:31</TimeStart>
        <TimeDue>17:31</TimeDue>
        <TimeEnd>14:38</TimeEnd>
        <StatusID>1</StatusID>
        <StatusText>End</StatusText>
        <Priority>High</Priority>
        <Notes />
        <IncidentFactor />
        <Description>Description1</Description>
        <DtStartPlus>2017-01-30T17:39:00</DtStartPlus>
        <DtDuePlus>2017-01-30T20:39:00</DtDuePlus>
        <DtEnd>2017-01-30T18:34:00</DtEnd>
      </DepartmentReport>
    </ArrayOfDepartmentReport>"

as you can see it returned in XML format.

And here is table:

    <table class="table table-striped table-hover table-condensed">
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Credit</th>
                <th>Semester</th>

            </tr>
        </thead>

         <tbody><tr ng-repeat="record in report track by $index">
            <td>{{record.IncidentId}}</td>
            <td>{{record.JunctionId}}</td>
            <td>{{record.PropType}}</td>
            <td>{{record.Damage}}</td>
        </tr>
      </tbody>
    </table>

But when I try to display data in the table it's not displayed.

I gess that the records is not displayed because the returned data from the web service is XML format and not JSON format.

Any idea how can I display data in table above?

Upvotes: 0

Views: 29

Answers (1)

Renaud is Not Bill Gates
Renaud is Not Bill Gates

Reputation: 2084

You have to convert the XML data you are getting to a JSON format using some js library (X2JS for example).

And in your controller try this :

var vm = this;
var x2js = new X2JS();
var dataAsJson = x2js.xml_str2json(xmlData);
vm.report = dataAsJson.ArrayOfDepartmentReport.DepartmentReport;

Here is a working fiddle :

https://jsfiddle.net/gtrwzsn1/398/

Hope this works for you :-)

Upvotes: 1

Related Questions