AngularJs:将json字符串转换为html表

时间:2016-09-19 09:58:22

标签: html angularjs json

我是angularjs的绝对新手,过去3天我一直在弄脏手。现在,要求是将json字符串从其余端点转换为表格数据。这是我正在尝试的代码。

 $scope.getDataCatalogue = function(){

       $http.get('http://api.geosvc.com/rest/US/84606/nearby?apikey=485a35b6b9544134b70af52867292071&d=20&pt=PostalCode&format=json')
           .success(function(data, status, headers, config){
                 //do something with your response
                 $scope = data;
           })
           .error(function(error){
                 console.log("not world");
           });
  }

   $scope.getDataCatalogue = function(){
    alert('getDataCatalogue');
   }

现在,我如何将json从数据转换为网格。这是解决问题的正确方法吗?

2 个答案:

答案 0 :(得分:1)

如果您有一个固定的结构,那么您可以简单地使用Alter遍历对象(数据)并将其显示在预先创建的表上。 Fiddle

以下示例:

考虑到这是您分配给ng-repeat变量名称的人的对象。 $scope

$scope.people = data;

在您的控制器中:

[
    {
      id: 1,
      firstName: "Peter",
      lastName: "Jhons"
    },
    {
      id: 2,
      firstName: "David",
      lastName: "Bowie"
    }
]

在您的HTML中:

.success(function(data, status) {
    $scope.people = data;
 });

答案 1 :(得分:0)

要么在视图中自己动手:

<table>
    <thead>
        <tr>
            <th>header 1</th>
            <th>header 2</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="row in data">
            <td>{{row.attribute1}}</td>
            <td>{{row.attribute2}}</td>
        </tr>
    </tbody>
</table>

或者使用像ui-grid这样的库来渲染更高级的表。