CODEWITHSUNDEEP
javascriptjsonangularjs
e2rabi
e2rabi

Reputation: 4848

How I can extract object from JSON result usinig angularJS

I use this function de read data from a web service 

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

the value in my model $scope.produits is : 

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

I want to show this result with an ng-repeat 

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

but it's not work I want to extract just this information in my model :

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

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

Upvotes: 4

Views: 601

Answers (4)

Danny Fardy Jhonston Berm&#250;dez
Danny Fardy Jhonston Berm&#250;dez

Reputation: 5571

As your data is an object:

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

You can show it in the view, by this way:

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

Upvotes: 1

jmenzel
jmenzel

Reputation: 130

Since you said you have a JSON string, you can use $scope.produits=JSON.parse(data) to get the Object from the JSON string. As the others said, to use it in ngRepeat, it has to be an array:

Example without ng-repeat

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

Then:

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

To use ng-repeat, your JSON string needs to be like this:

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

But you don't need it, to get just reference, destignation and prix

Upvotes: 1

user2118542
user2118542

Reputation:

You can do like this

Declare array scope $scope.produits=[].

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

                });

              };

Create then html from produits array.

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

Upvotes: 1

Alexander Bondar
Alexander Bondar

Reputation: 534

$scope.produits has to be an array. And every time you receive new data, you push it 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 receive new data:

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

Or you can even create an array in ngRepeat: <tr ng-repeat="p in [produits]">

Upvotes: 2

Related Questions