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

【问题标题】：How to Create table through json object using Angularjs如何使用Angularjs通过json对象创建表
【发布时间】：2016-06-24 05:25:20
【问题描述】：

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>

【问题讨论】：

你能显示console.log(response)的输出吗？
@Chinni 检查我已将页面顶部的图像插入为控制台日志图像
你能告诉我什么都显示在表格中，什么没有显示在表格中吗？
我没有将员工的个人详细信息放入表中，例如{{employee.EmpId}} {{employee.Name}} {{employee.Phone._Type}} {{employee.Phone.__text}} {{employee.Address.Street}} {{employee.Address.State}} {{employee.Phone.Zip}} {{employee.Phone._text}} { {employee.Address.Country}}
检查{{employee}} 包含什么？另外，我看到employee.Phone 是一个数组而不是一个对象。所以你必须使用employee.Phone[0].__Type 或使用ng-repeat。

标签： angularjs json xml

【解决方案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 来显示我在其中一个 cmets 中提到的详细信息。

【讨论】：