I cannot filter array objects using Filter

Question

I am trying to return the objects according to the generos id but an empty array is being returned

var filmes = [
    {
    title: 'Primeiro Filme',
    genres: [
        {
        id: 10
      },
      {
        id: 15
      },
      {
        id: 21
      }
    ]
  },
  {
    title: 'Segundo Filme',
    genres: [
        {
        id: 15
      },
      {
        id: 3
      },
      {
        id: 7
      }
    ]
  }
]



var filmesCategorias = filmes.filter(function(filme){
  return filme.genres.id == 3
})

console.log(filmesCategorias)

Answer 1

Substitute:

return filme.genres.id == 3 

for:

return filme.genres.find(x => x.id == 3)

working code:

var filmes = [
    {
    title: 'Primeiro Filme',
    genres: [
        {
        id: 10
      },
      {
        id: 15
      },
      {
        id: 21
      }
    ]
  },
  {
    title: 'Segundo Filme',
    genres: [
        {
        id: 15
      },
      {
        id: 3
      },
      {
        id: 7
      }
    ]
  }
]



var filmesCategorias = filmes.filter(function(filme){
  return filme.genres.find(x => x.id == 3)
})

console.log(filmesCategorias)

Answer 2

The genres is a array then you need to sweep the positions for the id==3, example:

var filmes = [{
    title: 'Primeiro Filme',
    genres: [{
        id: 10
      },
      {
        id: 15
      },
      {
        id: 21
      }
    ]
  }, {
    title: 'Segundo Filme',
    genres: [{
        id: 10
      },
      {
        id: 3
      },
      {
        id: 21
      }
    ]
  },
  {
    title: 'Terceiro Filme',
    genres: [{
        id: 15
      },
      {
        id: 3
      },
      {
        id: 7
      }
    ]
  }
]



var filmesCategorias = filmes.filter(function(filme) {

  for (i = 0; i < filme.genres.length; i++) {
    if (filme.genres[i].id == 3) {
      return true;
    }
  }
  
  return false;
})

console.log(filmesCategorias)

The command filter has its compatibility below:

_{Source: Array.prototype.filter() - Browser Compatibility}

Already using find may simplify the code, but limit its use in browsers as table displayed just below:

_{Source: Array.prototype.find() - Browser Compatibility}

---

A way without these commands which at some point may limit their use, with two repeating structures can solve the same problem, minimum example:

var filmes = [{
    title: 'Primeiro Filme',
    genres: [{
        id: 10
      },
      {
        id: 15
      },
      {
        id: 21
      }
    ]
  }, {
    title: 'Segundo Filme',
    genres: [{
        id: 10
      },
      {
        id: 3
      },
      {
        id: 21
      }
    ]
  },
  {
    title: 'Terceiro Filme',
    genres: [{
        id: 15
      },
      {
        id: 3
      },
      {
        id: 7
      }
    ]
  }
]

function findFilmeGenresById()
{
    var item = Array();    
    for(i = 0; i < filmes.length; i++)
    {
        for(j = 0; j < filmes[i].genres.length; j++)
        {
          if (filmes[i].genres[j].id == 3)
          {
            item.push(filmes[i]); 
            break;
          }
        }        
    }
    return item;
}

console.log(findFilmeGenresById());