如何使用Angularjs創建通過json對象的表格

Console log image 嗨在我的代碼下面我試圖將xml數據轉換爲Json對象。使用轉換的Json對象我試圖用angularjs創建一個表。所以這裏的問題是我能夠綁定完整轉換的json對象{{employeeList}}，但未能加載json對象的單個屬性，即{{employee.EmpId}}。最後，從我的觀察，我發現，當轉換後的JSON對象直接分配給如何使用Angularjs創建通過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>

來源

2016-06-24 Lucky

你能顯示'console.log（response）'的輸出嗎？ – Chinni

@Chinni檢查我已經插入圖像頂部作爲控制檯日誌圖片 – Lucky

你能告訴我什麼都顯示，什麼都沒有得到顯示在表中？ – Chinni

確定。問題是，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是更新和工作的plunker。

此外，請注意employee.Phone是一個數組，您需要再次使用ng-repeat才能顯示詳細信息，正如我在其中一個註釋中提到的那樣。

來源

2016-06-24 09:11:06 Chinni

如何使用Angularjs創建通過json對象的表格

回答

相關問題