如何使用 angularJS 从 JSON 结果中提取对象答案

【问题标题】：How I can extract object from JSON result usinig angularJS如何使用 angularJS 从 JSON 结果中提取对象
【发布时间】：2015-11-02 14:49:15
【问题描述】：

我使用这个函数从网络服务中读取数据

$scope.getProduitByCatID = function () {
    $http.get("/getProduitByCategorieID?id=" + $scope.categorie.id).success(function (data) {
        $scope.produits = data;
    });
};

我的模型$scope.produits 中的值是：

{
    "reference": 1,
    "designation": "sony",
    "prix": 5100,
    "categorie": {
        "id": 1,
        "nom": "serveur"
    }
}

我想用 ng-repeat 显示这个结果

<tr ng-repeat="p in produits">
    <td>{{p.reference}}</td>
    <td>{{p.designation}}</td>
    <td>{{p.prix}}</td>
</tr>

但这行不通我想在我的模型中提取这些信息：

{
    "reference": 1,
    "designation": "sony",
    "prix": 5100
}

因为我有两个实体 product(id,designation,prix) 和 categorie(id,nom) 在关联 ManytoOne 我如何使用 angularJS 做到这一点？

【问题讨论】：

ng-repeat 需要数组，你的 $scope.produits 对象不是数组？

标签： javascript json angularjs

【解决方案1】：

$scope.produits 必须是一个数组。并且每次收到新数据时，都会将其推送到这个数组中：

$scope.produits = [];
$scope.getProduitByCatID = function () {
    $http.get("/getProduitByCategorieID?id=" + $scope.categorie.id)
        .then(function successCb(res) {
            $scope.produits.push(res.data);
        }, function errorCb() {
        })
    ;
};

或者你每次收到新数据时创建一个新数组：

$scope.getProduitByCatID = function () {
    $http.get("/getProduitByCategorieID?id=" + $scope.categorie.id)
        .then(function successCb(res) {
            $scope.produits = [res.data];
        }, function errorCb() {
        })
    ;
};

或者你甚至可以在ngRepeat 中创建一个数组： <tr ng-repeat="p in [produits]">

【讨论】：

【解决方案2】：

你可以这样做

声明数组范围$scope.produits=[]。

$scope.getProduitByCatID=function(){
              $http.get("/getProduitByCategorieID?id="+$scope.categorie.id)
                .success(function(data){
                    $scope.produits.push(data) ;   

                });

              };

然后从 produits 数组创建 html。

 <tr ng-repeat="p in produits">
     <td>{{p.reference}}</td>
     <td>{{p.designation}}</td>
     <td>{{p.prix}}</td>
     <td valign="top">
                <table>
                    <tr ng-repeat="c in p.categorie">
                        <td>{{c.id}}</td>
                        <td>{{c.nom}}</td>
                    </tr>
                </table>
            </td>
 </tr>

【讨论】：

【解决方案3】：

既然你说你有一个 JSON 字符串，你可以使用 $scope.produits=JSON.parse(data) 从 JSON 字符串中获取对象。作为其他人说，要在 ngRepeat 中使用它，它必须是一个数组：

没有 ng-repeat 的示例

$http.get("/getProduitByCategorieID?id="+$scope.categorie.id)
            .success(function(data){
                $scope.produits=JSON.parse(data);
            });

然后：

<tr">
  <td>{{produits.reference}}</td>
  <td>{{produits.designation}}</td>
  <td>{{produits.prix}}</td>
</tr>

要使用 ng-repeat，您的 JSON 字符串需要如下所示：

[{"reference":1,"designation":"sony","prix":5100.0,"categorie":{"id":1,"nom":"serveur"}}]

但你不需要它，只需要参考、目的地和价格

【讨论】：

【解决方案4】：

因为你的数据是一个对象：

{
    "reference": 1,
    "designation": "sony",
    "prix": 5100,
    "categorie": {
        "id": 1,
        "nom": "serveur"
    }
}

您可以通过这种方式在视图中显示它：

<table border="1">
    <tbody>
        <tr>
            <td>{{produits.reference}}</td>
            <td>{{produits.designation}}</td>
            <td>{{produits.prix}}</td>
        </tr>
        <!-- To show categorie data. -->
        <tr>
            <td colspan="3">
                <table border="1">
                    <thead>
                        <tr>
                            <td colspan="2">categorie</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>id:</td>
                            <td>{{produits.categorie.id}}</td>
                        </tr>
                        <tr>
                            <td>nom:</td>
                            <td>{{produits.categorie.nom}}</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        <!-- End to show categorie data. -->
    </tbody>
</table>

【讨论】：