I have a JSON file named components.json containing information about various board spaces:
{"components": {
"boardSpaces": [
{"name":"GO!", "price":0, "position":0, "type":"go"},
{"name":"Mediterranean Avenue", "type": "property", "price":60, "position":1},
{"name":"Community Chest", "price":0, "position":2, "type":"communityChest"},
{"name":"Baltic Avenue", "price":60, "position":3, "type":"property"},
{"name":"Income Tax", "price":0, "type":"incomeTax", "position":4},
{"name":"Reading Railroad", "price":200, "position":5, "type":"railroad"},
{"name":"Oriental Avenue", "price":100, "position":6, "type":"property"},
{"name":"Chance", "price":0, "position":7, "type":"chance"},
{"name":"Vermont Avenue", "price":100, "position":8, "type":"property"},
{"name":"Connecticut Avenue", "price":120, "position":9, "type":"property"},
{"name":"Jail", "price":0, "position":10, "type":"jail"}]
}}
I am trying to extract objects from the boardSpaces array in the JSON file and store them in an array called self.board, but only if their price is not equal to 0. Essentially, I want to filter out objects with a price of 0.
Below is my AngularJS code for achieving this:
self.board = [];
$http.get('components/components.json').then(function(response) {
for(space in response.data.components.boardSpaces) {
if(response.data.components.boardSpaces[space].price !== 0) {
self.board.push(space);
};
};
});
However, when attempting to display this filtered array using ng-repeat in my HTML page, it does not seem to work. The loop works fine without the condition, but integrating the if statement causes issues.