Question

Click here to see For Converted Json Object

请非常清楚地阅读我的问题

您好，在我的代码中，我正在尝试将xml数据转换为Json对象。使用转换的Json对象我试图使用angularjs创建一个表。所以这里的问题是我能够绑定完整转换的json对象{{employeeList}}但是无法加载json对象的个别atttribute，即{{employee.EmpId}}。最后从我的观察结果中我发现转换后的json对象直接被赋予

$scope.Employees="Employee": [ {"EmpId": "4", "Name": "Chris", "Sex": "Male", "Phone": [ { "_Type": "Home", "__text": "564-555-0122" }, { "_Type": "Work", "__text": "442-555-0154" } ], "Address": { "Street": "124 Kutbay", "City": "Montara", "State": "CA", "Zip": "94037", "Country": "USA" } } ] }

输出是我的预期，但是当我指定直接结果时

即$ scope.Employees = response.data;它无法解决问题。在这里，response.data只是我们到达的成功函数结果

            <script>
                var app = angular.module('httpApp', []);
                app.controller('httpController', function ($scope, $http) {
                    $http.get("File1.xml",
                            {
                                transformResponse: function (cnv) {
                                    var x2js = new X2JS();
                                    var aftCnv = x2js.xml_str2json(cnv);
                                    return aftCnv;
                                }
                            })
                    .then(function (response) {
                        $scope.Employees = response.data;
                        console.log($scope.Employees);

                    });
                });
            </script>
        </div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="httpApp">
            <div ng-controller="httpController">
                <div ng-repeat="employeeList in Employees">
                    {{employeeList}}
    <table>
        <tr ng-repeat="employee in Employees.Employee">
            <td>{{employee.EmpId}}</td>
            <td>{{employee.Name}}</td>
            <td>{{employee.Phone._Type}}</td>
            <td>{{employee.Phone.__text}}</td>
            <td>{{employee.Address.Street}}</td>
            <td>{{employee.Address.State}}</td>
            <td>{{employee.Phone.Zip}}</td>
            <td>{{employee.Phone._text}}</td>
            <td>{{employee.Address.Country}}</td>
        </tr>
    </table>
                </div>
            </div>

Click here..For Converted Json Object

Answer 1

这是一个基于json提供的简单示例：

<强> HTML

<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myApp">
<head runat="server">
    <title></title>
</head>
<body ng-controller="myController">
    <div>
        <table>
            <thead>
                <tr>
                    <th>EmpId</th>
                    <th>Name</th>
                    <th>Sex</th>
                    <th>Phone</th>
                    <th>Address</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="employee in json.Employee">
                    <td>{{employee.EmpId}}</td>
                    <td>{{employee.Name}}</td>
                    <td>{{employee.Sex}}</td>
                    <td>{{employee.Phone[0].__text}}</td>
                    <td>{{employee.Address.Street}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="scripts/angular.js"></script>
    <script src="scripts/app.js"></script>
</body>
</html>

<强>的JavaScript

(function () {
    angular.module('myApp', [])

    .controller('myController', function ($scope) {

        $scope.json = { "Employee": [{ "EmpId": "4", "Name": "Chris", "Sex": "Male", "Phone": [{ "_Type": "Home", "__text": "564-555-0122" }, { "_Type": "Work", "__text": "442-555-0154" }], "Address": { "Street": "124 Kutbay", "City": "Montara", "State": "CA", "Zip": "94037", "Country": "USA" } }] };


    })

}());

Answer 2

您应该将代码更改为此。

<div ng-app><div ng-controller="httpController">
  <div>
    <table>
      <tr ng-repeat="employee in Employees.Employee">
        <td>{{employee.EmpId}}</td>
        <td>{{employee.Name}}</td>
        <td>{{employee.Phone._Type}}</td>
        <td>{{employee.Phone.__text}}</td>
        <td>{{employee.Address.Street}}</td>
        <td>{{employee.Address.State}}</td>
        <td>{{employee.Phone.Zip}}</td>
        <td>{{employee.Phone._text}}</td>
        <td>{{employee.Address.Country}}</td>

      </tr>
    </table>
  </div>

Answer 3

您的代码中还有另一个问题。响应数据驻留在response.data中，因此除了您的JSON是否有效外，您还应该使用以下赋值：

$scope.Employees = response.data

Answer 4

在我之前关于response.data的回答之后发表了额外的评论，因为我还没有看到关于你的JSON对象的正确答案，完整答案：

ng-repeat需要一个您不能提供的项目列表。删除封装的＆＃39;员工＆＃39;部分来自您的JSON，如下所示：

$scope.Employees = [
                     {"EmpId": "4", "Name": "Chris", "Sex": "Male", "Phone": [ { "_Type": "Home", "__text": "564-555-0122" }, { "_Type": "Work", "__text": "442-555-0154" } ], "Address": { "Street": "124 Kutbay", "City": "Montara", "State": "CA", "Zip": "94037", "Country": "USA" } },
                     {"EmpId": "5", "Name": "Chris", "Sex": "Male", "Phone": [ { "_Type": "Home", "__text": "564-555-0122" }, { "_Type": "Work", "__text": "442-555-0154" } ], "Address": { "Street": "124 Kutbay", "City": "Montara", "State": "CA", "Zip": "94037", "Country": "USA" } }
                   ]

（我已经在这里添加了一个额外的ID为5的员工，但它也只能与一名员工一起工作，只要它是一个列表，列表中的对象（{}）（[]）

使用此JSON对象，您可以执行以下操作：

 <tr ng-repeat="employee in Employees">
     <td>{{ employee.EmpId }}</td>
     <td>{{ employee.Name }}</td>
     <td>etc ...</td>
 </tr>

确保您的JSON设置如下，将逗号分隔的对象封装在列表中。

从get请求中返回此JSON格式，并且不要忘记从response.data而不是响应中获取数据。

无法使用Angularjs通过json对象创建表

4 个答案: