我想從一個角資源加載數據的一個子集

Question

我的JSON數據是這樣的，幷包含在一個名爲「parks.json」文件：

{ 
    "description": "Farnborough features a good amount of green space and is indeed surrounded by plenty more. Our Parks section aims to tell you, not only where they all are but a little bit about the history behind them and the people who look after them today.", 
    "id": "parks", 
    "name": "Parks", 
    "locations": [ 
     { 
      "name": "Queen Elizabeth Park", 
      "lat": 51.29692, 
      "lng": -0.76080000000000003, 
      "synopsis": "Once part of Windsor Great Park" 
     }, 
     { 
      ... 
     } 
    ] 
} 

以下$資源的查詢將檢索上述數據的片段：

return $resource('locations/:categoryId.json', {}, { 
    query: {method:'GET', params:{categoryId:'categories'}, isArray:true} 
    }); 

的的categoryId在被傳遞是「公園」，因此上面的代碼將檢索我的整個Parks.jsonfile並將其加載到一個對象。這很好，但是，我想只將它的一部分提取到數組或對象中。

我的問題是我怎麼能適應上述提取的位置？我對lat和lng值特別感興趣。我已經有了其他各種各樣的工作，並且需要將這種行爲歸類，因爲我不太熟悉如何做到這一點。

乾杯！

Answer 1

有幾件事情：

• 這可能不是$resource物盡其用。 $http會在這種情況下更受歡迎，因爲您並未真正處理RESTful Web服務。你顯然在處理.json文件上的GET。使用$resource將實例化一堆額外的功能和開銷，你不需要和不能使用。
• 篩選結果的最佳位置是在服務器上。我知道你不能用.json文件來做到這一點，但值得一提的是。
• 對於$ resource甚至Angular來說，這確實不是問題，因爲它是JavaScript的問題，您想要做的是從數組中獲取對象的子集。

所有這一切說......如果你必須做到這一點使用$資源，你可以不喜歡下面的僞代碼：

// a factory to create your Park resource service. 
app.factory('Park', ['ngResource', function($resource) { 
    //your Park resource constructor. 
    var Park = $resource('locations/:categoryId.json', {}, { 
     query: {method:'GET', params:{categoryId:'categories'}, isArray:true} 
     }); 

    //a "static" function on Park to filter results. 
    Park.filter = function(parks, predicate) { 
     var results = []; 
     for(var i = 0; i < parks.length; i++) { 
      var park = parks[i]; 
      if(predicate(park)) { 
       results.push(angular.copy(park)); 
      } 
     } 
     return results; 
    }; 

    //return the constructor 
    return Park; 
}]); 

// a controller example to consume your service. 
app.controller('MainCtrl', function($scope, Park) { 
    // get all parks in category 123 
    var allParks = Park.query({categoryId: 123}); 

    // filter the parks down to the ones named "Hooterville Park" 
    $scope.parks = Park.filter(allParks, function(park) { 
     return park.name === 'Hooterville Park'; 
    }); 
}); 

的事情是，$資源由用一個RESTful資源可以使用像這樣：

// create a basic resource. 
var Foo = $resource('/Foo/:id'); 

// get and update one item. 
var foo = Foo.get(123, function() { 
    foo.name = 'Test'; 
    foo.email = 'blah@sample.com'; 
    foo.$save(); 
}); 

// create a new item. 
var foo2 = new Foo(); 
foo2.name = 'New guy'; 
foo2.email = 'new@guy.com'; 
foo.$save(); 

// get and update a bunch of items. 
var foos = Foo.query(); 
for(var i = 0; i < foos.length; i++) { 
    var fooItem = foos[i]; 
    fooItem.name = 'Foo ' + i; 
    fooItem.$save(); 
} 

所以，除非你打算做的東西，我會說去前進，只需使用$ HTTP。