How to filter through attribute on an object / array

Asked

Viewed 549 times

3

I believe it’s a simple question but I’m not finding a solution to my problem.

Example:

Object: 

{projectId:"1" name:"Projeto A" image:"imagem.jpg"}
{projectId:"2" name:"Projeto B" image:"imagem.jpg"}
{projectId:"3" name:"Projeto C" image:"imagem.jpg"}
{projectId:"4" name:"Projeto D" image:"imagem.jpg"}
{projectId:"5" name:"Projeto E" image:"imagem.jpg"}

I have a menu in which I am already picking up the value of the id and would like to do a search on this object through this id to load the correct image.

$('.btn').on({
    mouseenter: function () {
      $id = ($(this).attr("id"));   
    }
  })

Thank you very much :)

javascript jquery

  • Which property does the ID? filter to find only one or a few within this array?

  • you can use the filter property of the array

  • That, as the value comes in $id, I want to filter that array and identify which node it belongs to.

3 answers

6


If you want to find 1 element then you should use the .find():

$('.btn').on({
    mouseenter: function () {
      const id = this.id;  
      const el = arr.find(obj => obj.projectId == id); 
    }
})
  • 1

    We always have to learn from you, huh. Good answer.

  • 1

    It worked first, thank you very much... thank you all, I did not get to test all the ways to solve, but I believe that all are great alternatives.

  • @Fernandodiasmotta You can mark the answer that helped you the most as correct. Just use the V on the left side of the response.

  • @Fernandodiasmotta if you only want one element o .find() is the most correct to use. There are always several ways, which are adaptations of tools made for other things.

5

It is possible to use the function filter. It takes as parameter one callback that will validate each item in your collection.

Something like 

mouseenter: function () {
    $id = ($(this).attr("id"));
    const filtrado = arr.filter(item => item.projectId == $id);
}

See working.

const arr = [{ projectId:"1", name:"Projeto A", image:"imagem.jpg" },
{projectId:"2", name:"Projeto B", image:"imagem.jpg"},
{projectId:"3", name:"Projeto C", image:"imagem.jpg"},
{projectId:"4", name:"Projeto D", image:"imagem.jpg"},
{projectId:"5", name:"Projeto E", image:"imagem.jpg"}];

const id = 1; // <- Aqui seria a variável que você captura no evento 

const filtrado = arr.filter(item => item.projectId == id);

console.log(filtrado);

1

I believe you should use the jQuery.grep():

var found_names = $.grep(names, function(v) {
    return v.projectId === 1;
});

DEMO

var names = [];

var object = {projectId:"1", name:"Projeto A", image:"imagem.jpg"};
names.push(object);

object = {projectId:"2", name:"Projeto B", image:"imagem.jpg"};
names.push(object);

var found_names = $.grep(names, function(v) {
    return v.projectId === "1";
});

console.log(found_names);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Just look at your browser console.

  • 2

    We always have to learn from you, huh. Good answer.

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.