如何我可以從JSON結果usinig 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重複

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

，但它不能正常工作 我WA NT在我的模型只提取這樣的信息：

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

，因爲我有兩個實體product(id,designation,prix)和協會多對一categorie(id,nom)我怎麼能做到這一點使用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字符串獲取對象。作爲 別人說，要在ngRepeat使用它，它必須是一個數組：

實施例沒有NG-重複

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

要使用納克 - 重複，你的JSON字符串需要像這樣：

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

但是你不需要它，只需引用，de stigation and prix