Question

我有一个叫做components.json的JSON：

{"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"}]
}}

我想在angularjs上创建一个数组，用于保存boardSpaces下的每个对象，但前提是price不等于0.简而言之，我想要一个名为self.board的数组只要boardSpaces等于price，就会将0中的每个对象保存到数组中。

这是我的angularjs文件：

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);
        };
    };
});

出于某种原因，当我尝试使用ng-repeat在html页面中循环播放时，它不想工作。我在没有条件的情况下尝试了这个并且确实有效，但由于某种原因，它不能与if语句一起使用。

Answer 1

如何使用forEach来完成数组？我认为语法更容易理解：

response.data.components.boardSpaces.forEach(function (element,index) {
    if(element.price !== 0) { // if not zero ...
        self.board.push(index); //or element, not sure what you are trying to store
    };
});

Answer 2

这个怎么样？

$http.get('components/components.json').then(function(response) {
    self.board = response.data.components.boardSpaces.
      filter(function(space) {
        return space.price === 0;
      });
});

或者在工作代码段中使用普通的javascript：

＆＃13;

var data = {"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"}]
}};

function getData() {
  return data.components.boardSpaces.filter(function(space) {
    return space.price === 0;
  });
}

var terminal = document.getElementById('terminal');

getData().forEach(function(space) {
  terminal.innerHTML += space.name + ' - ' + space.price + '\n';
});

＆＃13;

pre {
  border: 1px solid gray;
  background: lightgray;
  padding: 15px;
  margin: 32px;
}

＆＃13;

<pre id="terminal"></pre>

＆＃13;

Answer 3

问题是您使用的是for ... in，您应该使用forEach：

  response.data.components.boardSpaces.forEach(function (space) {
      if(space.price === 0) {
          self.board.push(space);
      };
  });

https://plnkr.co/edit/ZakpSlMrIvl0sKRpxyT9?p=preview

我只想在AngularJS

3 个答案: