CODEWITHSUNDEEP
javascriptfilterlodash
Devesh Agrawal
Devesh Agrawal

Reputation: 9212

How to filter data of an object array with lodash

var brands = [];
brands = [null, {
  "id": "1",
  "image": "/images/brands/surf_excel.png",
  "name": "Surf Excel",
  "productCount": "6"
}, {
  "id": "2",
  "image": "/images/brands/rin.png",
  "name": "Rin",
  "productCount": "5"
}, {
  "id": "3",
  "image": "/images/brands/ariel.png",
  "name": "Ariel",
  "productCount": "4"
}];

Now i want to get the name where id = 3. I tried 

var data = _.filter(brands, { 'id': 3 });
console.log(data.name);

But its giving error can't read property of undefined. Assuing there will be only one record for id =3, Can anyne help me on this. How to get name from given id in the above structure.

If there is any better way to get the same result that is also appreciated.

Upvotes: 3

Views: 2583

Answers (3)

Adam Boduch
Adam Boduch

Reputation: 11211

Aside from using filter() instead of find(), you're actually pretty close. The reason you're not seeing any results is because the object predicates that you can pass to find()/filter() perform strict equality comparisons. Meaning, 3 === '3' will evaluate to false.

Upvotes: 0

Pranav C Balan
Pranav C Balan

Reputation: 115222

Use native JavaScript Array#find method.

var brands = [];
brands = [null, {
  "id": "1",
  "image": "/images/brands/surf_excel.png",
  "name": "Surf Excel",
  "productCount": "6"
}, {
  "id": "2",
  "image": "/images/brands/rin.png",
  "name": "Rin",
  "productCount": "5"
}, {
  "id": "3",
  "image": "/images/brands/ariel.png",
  "name": "Ariel",
  "productCount": "4"
}];

var data = brands.find(function(v) {
  return v && v.id == "3";
});

console.log(data.name);

Check polyfill option for find method for older browser.

If you want to filter out the array then use Array#filter method.

var brands = [];
brands = [null, {
  "id": "1",
  "image": "/images/brands/surf_excel.png",
  "name": "Surf Excel",
  "productCount": "6"
}, {
  "id": "2",
  "image": "/images/brands/rin.png",
  "name": "Rin",
  "productCount": "5"
}, {
  "id": "3",
  "image": "/images/brands/ariel.png",
  "name": "Ariel",
  "productCount": "4"
}];

var data = brands.filter(function(v) {
  return v && v.id == "3";
});

console.log(data[0].name);

UPDATE : You are provided an object as the second argument as per documentation which uses _.matches for property value comparison. In your array id property holds a string value but you were provided as a number in the filter just change it to string will make it work or use callback function as in @Satpal answer. 

var brands = [];
brands = [null, {
  "id": "1",
  "image": "/images/brands/surf_excel.png",
  "name": "Surf Excel",
  "productCount": "6"
}, {
  "id": "2",
  "image": "/images/brands/rin.png",
  "name": "Rin",
  "productCount": "5"
}, {
  "id": "3",
  "image": "/images/brands/ariel.png",
  "name": "Ariel",
  "productCount": "4"
}];
var data = _.filter(brands, {
  'id': "3"
});
console.log(data);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.js"></script>

Upvotes: 6

Satpal
Satpal

Reputation: 133403

As you have specified and using it's _.filter() method. You can use pass predicate which can a function which will be invoke per iteration. As note it will return you an array.

var data = _.filter(brands, function(brand){
   return brand != null && brand.id == 3;
});
console.log(data[0].name);

if you want only one element the use _.find()

var data = _.find(brands, function(brand){
   return brand != null && brand.id == 3;
});
console.log(data.name);

Upvotes: 6

Related Questions