为什么从Web服务返回的数据不会显示在表格中?

时间:2017-12-06 09:46:31

标签: angularjs

我在项目中使用了anguraljs 1.6。

我从网络服务中读取数据,我需要在表格中显示返回的数据。

这是我的http ajax调用:

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

以下是从Web服务返回的数据示例:

    "<?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>"

你可以看到它以XML格式返回。

这是表:

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

但是当我尝试在表格中显示数据时,它没有显示出来。

我认为没有显示记录,因为来自Web服务的返回数据是XML格式而不是JSON格式。

知道如何在上表中显示数据?

1 个答案:

答案 0 :(得分:1)

您必须使用某些js库(例如X2JS)将您获得的XML数据转换为JSON格式。

在你的控制器中试试这个:

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

这是一个工作小提琴:

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

希望这适合你: - )