将 JSON 数据渲染到 html 表 Angularjs答案

【问题标题】：Render JSON data to html table Angularjs将 JSON 数据渲染到 html 表 Angularjs
【发布时间】：2017-08-29 13:20:26
【问题描述】：

我的 get 方法正在响应我想要在表中呈现的 JSON 数据。这是我 console.log 在我的 get 方法中声明的变量时的输出：

这是我的控制器方法：

 $scope.getProdukt = function (searchText, typeVariable) {
        var results = produktService.searchPakninger(searchText, typeVariable);
        angular.forEach(results,
            function (value, key) {
                console.log(key);
                console.log(value);
                console.log(value.status.status + ' her er status.status');
                $scope.searchValue = value; 

            });
    };

我似乎无法正确引用对象来获取我想要的信息。 Bellow 是我想在其中呈现数据的表格。{{searchValue}} 在一个表格单元格中返回整个对象。我还需要一个ng-repeat，因为可以有多个对象。

     <table class="table" id="mixTables">
                <thead>
                    <tr>
                        <th>GTIN</th>
                        <th>EPDNR</th>
                        <th>NAVN</th>
                        <th>Handling</th>
                    </tr>
                </thead>
                <tbody ng-if="!searchEmpty">
                    <tr ng-repeat="obj in searchValue">
                        <td>GTIN: nummer: {{obj.GTIN}}</td>
                        <td>Kategori navn:  {{obj.KategoriNavn}}</td>
                        <td>Kategori kode:  {{obj.KategoriKode}}</td>
                        <td><button class="btn btn-green pull-right" type="button" ng-click="addProdukt()">Velg <span class="fa fa-plus-circle"></span></button></td>
                    </tr>
                </tbody>
            </table>

我已经更新了我的表格，但没有数据是我在表格中呈现的 obj 数据。我不认为 obj.GTIN 是引用 json 对象中数据的正确方法。带有承诺的解决方案在控制器中不起作用。

----------------------------------- - - - -更新 - - - - - - - - - - - - - - - - - - - - - ------------------------------------

我也在尝试在控制器中做出承诺。这是我到目前为止所拥有的：

$scope.getProdukt = function (searchText, typeVariable) {

 var results2 = produktService.searchPakninger(searchText, typeVariable)
            .then(function (response) {
                var object = JSON.stringify(this.response);  
                //$scope.searchValue = response.data;
                //$scope.isEmpty = false;
                console.log('async promise = ' + object); 
            });
}

控制台日志打印出对象变量的未定义。我也一直在尝试 JSON.parse() ，但没有运气。对于有效的 searchText，response.length 为 1 或更多。

【问题讨论】：

使用 angular.forEach 有什么意义？你到底想做什么？
forEach 将遍历从 API 收到的所有结果。我正在尝试在表格的每个单元格中分配不同的值。

标签： javascript html angularjs json

【解决方案1】：

我假设你的 produktService.searchPakninge 返回一个 html 承诺，所以你必须使用 .then 函数。然后，您可以将结果分配给一个变量，并使用 ng-repeat 循环遍历它们：

$scope.getProdukt = function (searchText, typeVariable) {
    produktService.searchPakninger(searchText, typeVariable)
        .then(function(response) {
            $scope.result = response.data;
        });
};

还有观点：

<tbody>
   <tr ng-repeat="item in result">
       <td>{{item.GTIN}}</td>
       <td>{{item.Egenskaper}}</td>
       <td>{{item.Markedsnavn}}</td>
       <td><button class="btn btn-green pull-right" type="button">Velg <span class="fa fa-plus-circle"></span></button></td>
   </tr>
</tbody>

【讨论】：

我在函数参数中使用了数据而不是响应，否则这解决了我的问题

【解决方案2】：

由于您将数据放在一个单元格中，我假设 searchPakninger 不会返回承诺，所以这应该足够了：

<tbody>
   <tr ng-repeat="obj in searchValue">
       <td>{{obj.GTIN}}</td>
       <td>{{obj.Egenskaper}}</td>
       <td>{{obj.Markedsnavn}}</td>
       <td>{{obj.KategoriNavn}}</td>
       <td>{{obj.KategoriKode}}</td>
       <td><button class="btn btn-green pull-right" type="button">Velg <span class="fa fa-plus-circle"></span></button></td>
   </tr>
</tbody>

如果它返回一个承诺，你也应该将你的函数转换为：

$scope.getProdukt = function (searchText, typeVariable) {
    produktService.searchPakninger(searchText, typeVariable)
    .then(function(response) {
        $scope.result = response.data;
    });
};

【讨论】：