How can I extract an object from a JSON usinig angularJS result

Question

I use this function to read data from a web service

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

value in my model $scope.produits:

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

I want to show this result with ng-repeat

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

but it doesn’t work. I want to extract exactly this information in my model:

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

because I have two objects product(id,designation,prix)and categorie(id,nom)in ManytoOne association, how can I do it using angularJS?

Answer 1

$scope.produitsmust be an array. And every time you get new data, you insert them into this array:

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

Or you create a new array every time you get new data:

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

                });

              };

html produits.

 <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. , 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"}}]

, ,