How I can extract object from JSON result usinig angularJS

Question

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?

ng-repeat requires array, your $scope.produits object is not array? — Furkan Başaran
– Furkan Başaran, Commented Nov 2, 2015 at 14:53

Alexander Bondar · Accepted Answer · 2015-11-02 14:55:59Z

2

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

answered Nov 2, 2015 at 14:55

Alexander Bondar

5444 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user2118542 · Accepted Answer · 2015-11-02 14:58:59Z

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>

jmenzel · Accepted Answer · 2015-11-02 15:14:23Z

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

Danny Fardy Jhonston Bermúdez · Accepted Answer · 2015-11-02 15:46:05Z

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>

Collectives™ on Stack Overflow

How I can extract object from JSON result usinig angularJS

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related