我如何从JSON结果中提取对象，使用angularJS

Question

我使用此函数从Web服务读取数据

$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做到这一点？

Answer 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]">

Answer 2

由于您的数据是一个对象：

{
    "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>

Answer 3

你可以这样做

声明数组范围$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>

Answer 4

既然你说你有一个JSON字符串，你可以使用$scope.produits=JSON.parse(data)从JSON字符串中获取Object。 正如其他人所说，要在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"}}]

但你不需要它，只需要参考，destignation和prix