使用 angular 和 ng-repeat 从 Ajax JSON 加载表

Posted 2023-05-09

【中文标题】使用 angular 和 ng-repeat 从 Ajax JSON 加载表

【英文标题】：Load table from Ajax JSON with angular and ng-repeat

【发布时间】：2017-11-05 15:51:12

【问题描述】：

我尝试使用 Angular 和 ng-repeat 从 Ajax json 加载 html 表格。 我的问题是 JSON 有点复杂，我不知道如何访问“informationstyp”，这是我想在表格中显示的内容。 JSON（“值”）的根是一个列表。下一级（“informationstyper”）也是一个列表。

如何将“informationstyp”放入表格中？ 我应该在我的 html 中写什么而不是 data.arendeslagId？

我想要的表格是：

FK1002

FK1003

FK1004

感谢您的帮助。

我的html：

        <table class="table table-hover">
            <thead>
            <tr>
                <th>Arendeslagid</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="data in infotyper">
                <td>data.arendeslagId</td>
            </tr>
            </tbody>
        </table>

我的 javascript：

    $scope.infotyper = "";

    $scope.invoke = function() 
        $.ajax(
               "cache": false,
               "async": true,
               "crossDomain": true,
               "url": url",
               "method": "POST",
               "headers": 
                   "cache-control": "no-cache",
               ,
            success: function (response) 
                   $scope.infotyper= response;
               
           );
        ;

我的 JSON 响应：

【问题讨论】：

你可以在 Angular 中使用 $http 服务方法而不是 jquery ajax。

@hasan 谢谢，我现在改成$http

【参考方案1】：

尝试改变这一点：

success: function (response) 
  $scope.infotyper= response;

到这里：

success: function (response) 
  $scope.infotyper= response.values;
  $scope.$apply();

如果您使用 AngularJS，我强烈建议您使用 $http 服务而不是 jQuery 来处理 AJAX 请求

【讨论】：

这也不行。如何进入 JSON 的下一个级别（“informationstyper”）？

该字段是一个数组。所以你需要另一个 ng-repeat 来在这些元素中循环。例如：<tr ng-repeat="data in infotyper"> <td>data.arendeslagId</td> <td ng-repeat="typer in data.informationstyper">typer.informationstyp</td> </tr>

谢谢，这正是我所需要的！