将JSON数据渲染到html表Angularjs

时间:2017-08-29 13:20:27

标签: javascript html angularjs json

我的get方法正在响应我想在表中呈现的JSON数据。 这是我在console.log中声明我的get-method声明的变量:

这是我的控制器方法:

 $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; 

            });
    };

我似乎无法引用对象correctley来获取我想要的信息。 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对象中数据的正确方法。承诺的解决方案在控制器中不起作用。

----------------------------------------------- ------- UPDATE ------------------------------------------ ------------------------

我也在尝试控制器中的承诺。以下是我到目前为止的情况:

$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); 
            });
}

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

2 个答案:

答案 0 :(得分:2)

我假设你的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>

答案 1 :(得分:0)

由于您在一个单元格中获取数据,我认为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>

如果它返回一个promise,你也应该将你的函数转换为:

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