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

您好，在下面的代码中，我正在尝试将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" 
         } 
     }] 
};

输出是我期望的，但是当我分配直接结果时

i、 e，

$scope.Employees=响应它不工作。可能是什么问题



var-app=angular.module（'httpApp'，[]）；
app.controller（'httpController'，函数（$scope，$http）{
$http.get（“File1.xml”{
转换响应：功能（cnv）{
var x2js=新的x2js（）；
var aftCnv=x2js.xmlu str2json（cnv）；
返回aftCnv；
}
})
.成功（功能（响应）{
控制台日志（响应）；
$scope.Employees=响应；
console.log（$scope.Employees）；
});
});


{{employeeList}
{{employee.EmpId}
{{employee.Name}
{{employee.Phone.\u Type}
{{employee.Phone.\uu text}
{{employee.Address.Street}
{{employee.Address.State}
{{employee.Phone.Zip}
{{employee.Phone.\u text}
{{employee.Address.Country}
好的。问题是，
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>
    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>


var-app=angular.module（'httpApp'，[]）；
app.controller（'httpController'，函数（$scope，$http）{
$http.get（“File1.xml”{
转换响应：功能（cnv）{
var x2js=新的x2js（）；
var aftCnv=x2js.xmlu str2json（cnv）；
返回aftCnv；
}
})
.成功（功能（响应）{
//您所需的数据显示在response.data的“Employees”字段中
$scope.Employees=response.data.Employees；
console.log（$scope.Employees）；
});
});

是已更新且正在工作的plunker

另外，请注意
employee.Phone
是一个数组，您需要再次使用
ng repeat
来显示我在其中一条评论中提到的详细信息。
确定。问题是，
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>
    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>


var-app=angular.module（'httpApp'，[]）；
app.controller（'httpController'，函数（$scope，$http）{
$http.get（“File1.xml”{
转换响应：功能（cnv）{
var x2js=新的x2js（）；
var aftCnv=x2js.xmlu str2json（cnv）；
返回aftCnv；
}
})
.成功（功能（响应）{
//您所需的数据显示在response.data的“Employees”字段中
$scope.Employees=response.data.Employees；
console.log（$scope.Employees）；
});
});

是已更新且正在工作的plunker

另外，请注意
employee.Phone
是一个数组，您需要再次使用
ng repeat
来显示我在其中一条评论中提到的详细信息。
您可以显示
console.log（response）的输出吗
？@Chinni check我已经在页面顶部插入了图像作为控制台日志图像。你能告诉我什么都显示在表中，什么都没有显示在表中吗？我没有在表中获取员工的个人详细信息，例如{{employee.EmpId}{{employee.Name}{{employee.Phone.\u 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]。\uu键入
或使用
ng repeat
。能否显示
console.log（响应）的输出
？@Chinni check我已经在页面顶部插入了图像作为控制台日志图像。你能告诉我什么都显示在表中，什么都没有显示在表中吗？我没有在表中获取员工的个人详细信息，例如{{employee.EmpId}{{employee.Name}{{employee.Phone.\u 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]。\u键入
或使用
ng repeat
。