Question

我有一个JavaScript对象

 var items = { ids : [
  {
    label: "red",
    complete: true
  },
  {
    label: "green",
    complete: false
  },
  {
    label: "blue",
    complete: true
  }
]

}

当我点击完整按钮或点击所有按钮时，我需要根据完整属性过滤掉它，显示所有条目。

如何在同一个功能中执行此操作

我有这个函数，它接受列表DOM元素并相应地创建条目。我想知道如何编写此函数，以便它可以过滤完整状态或打印重绘函数本身中的所有条目。

 var redraw = function(items) {
     list.innerHTML='';
     for (var id in items) {
       draw(model.todos[id], list);
     }
 };

  var draw = function(Obj, container) {
      var el = Template.cloneNode(true);
      el.setAttribute('data-id', Obj.id);
      container.appendChild(el);
       update(Obj);
});

}

Answer 1

var result = [];

for(var item in items.ids){
  if(items.ids[item].hasOwnProperty("complete") && 
     items.ids[item].complete === true){
    result.push(item);
  }
}

您可以使用此功能根据完整属性过滤掉项目。

demo

Answer 2

如果你正在使用Underscore，这很简单

var completedItems = {
  ids: _.filter(items.ids, function (id) { return id.complete; })
};

否则你可以手工编写

var completedItems = {
  ids: (function (ids) {
    var arr = [];
    ids.forEach(function (id) {
      if (id.complete) arr.push(id);
    });
    return arr;
  })(items.ids)
};

Answer 3

添加一个名为filterItems的新函数，该函数接受items数组和key和value参数，并根据这些参数返回已过滤的数组。然后，只需使用正确的参数从redraw调用它。

function filterItems(items, key, value) {
  return items.ids.filter(function (el) {
    return el[key] === value;
  });
}

var redraw = function(items) {
  list.innerHTML='';
  items = filterItems(items, 'complete', true);
  for (var id in items) {
    draw(model.todos[id], list);
  }
};

DEMO

如何基于JavaScript属性的属性过滤JavaScript对象

3 个答案: