Question

Console log image 嗨，在我的代码下面，我试图将xml数据转换为Json对象。使用转换的Json对象我试图使用angularjs创建一个表。所以这里的问题是我能够绑定完整转换的json对象{{employeeList}}但是无法加载json对象的单个属性，即{{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;它不起作用。可能是什么问题？

 <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;
             }
         })
         .success(function (response) {
             console.log(response);
             $scope.Employees = response;
             console.log($scope.Employees);
         });
     });
 <script>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/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>
</div>

Answer 1

确定。问题是，response.data文件转换后xml具有以下结构，

{
    "Employees": {  // note that the data you need is present in "Employees" field
        "Employee": [
            ...  // contains objects with employee details
        ]
    }
}

因此，您需要按如下方式填充$scope.Employees，

// your required data is present in "Employees" field of response.data
$scope.Employees = response.data.Employees;

因此，您的<script>代码代码为

<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;
            }
        })
        .success(function (response) {
            // your required data is present in "Employees" field of response.data
            $scope.Employees = response.data.Employees;
            console.log($scope.Employees);
        });
    });
</script>

Here是更新且有效的插件。

另请注意，employee.Phone是一个数组，您需要再次使用ng-repeat来显示我在其中一条评论中提到的详细信息。

如何使用Angularjs通过json对象创建表

1 个答案: