how to filter on a JavaScript object based on its attributes

Question

I have a JavaScript object

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

}

I need to filter out based on the complete attribute when I click on the complete button or when I click on all button it show show me all the entries.

How can I do this in the same function

I have this function which takes the list DOM element and creates the entries accordingly. I am wondering how could I write this function such that it could filter on the complete status or print all the entries in the redraw function itself.

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

}

drawTodo in redraw method is a typo , it should be draw()

user3873833
– user3873833

2014-07-28 14:30:26 +00:00
Commented Jul 28, 2014 at 14:30 — user3873833
– user3873833, Commented Jul 28, 2014 at 14:30

Andy · Accepted Answer · 2014-07-28 14:40:55Z

1

Add a new function called filterItems that accepts the items array and key and value parameters and returns a filtered array based on those parameters. Then, just call it from redraw with the correct arguments.

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

answered Jul 28, 2014 at 14:40

Andy

63.6k13 gold badges72 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user3873833 Over a year ago

thanks , but when i use this, i see an error at filterItems i.e uncaught type error: undefined is not a function here is how i am doing it

user3873833 Over a year ago

Andy Over a year ago

Because you're passing model.todos instead of items? status should be quoted. I'm not sure what items = model.todos is meant to be doing... Was there something wrong with redraw in my answer? Based on your question all you need to do is filter the items and them loop over the filtered array like you were doing...

Joseph Spens · Accepted Answer · 2014-07-28 14:39:30Z

1

If you're using Underscore, this is pretty simple

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

Otherwise you could write it by hand

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

answered Jul 28, 2014 at 14:39

Joseph Spens

6627 silver badges12 bronze badges

Comments

Prabhu Murthy · Accepted Answer · 2014-07-28 14:47:40Z

1

var result = [];

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

you can use this to filter out the items based on the complete attribute.

demo

edited Jul 28, 2014 at 14:47

answered Jul 28, 2014 at 14:38

Prabhu Murthy

9,2865 gold badges32 silver badges37 bronze badges

Collectives™ on Stack Overflow

how to filter on a JavaScript object based on its attributes

3 Answers 3

3 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Related