2

el código anda perfecto, el único problema es que cuando quiero pasar por parámetros los ids a otra función(mostrar un modal), me los tira undefined.

$(document).ready(() => {
    const key = '98430029';
    
    $('#form').on('submit', (e) => {
        e.preventDefault();
        
        const input = $('#search').val();

        if(input === ''){
            $('#error').html('No se encontraron resultados'); 
        } else {
            $('#error').html(''); 

            getMovies(input)
        }
    })

    function getMovies(movie){

        axios.get(`http://www.omdbapi.com/?apikey=${key}&s=${movie}`)
            .then(response => {
                const movies = response.data.Search;
                let template = '';

                $.each(movies, (i, info) => {
                    
                    template += `
                        <div class="card col-12 col-md-4">
                            <img data-id="${info.imdbID}" class="card-img-top" src="${info.Poster === 'N/A' ? '': info.Poster}">
                            <div class="card-body text-center">
                                <h5 class="card-title">${info.Title}</h5>
                                <a id="detail" class="btn btn-success w-100" data-toggle="modal" data-target="#modal-details">
                                    Ver más
                                </a>
                            </div>
                        </div>                              
                    `;
                    
                })
               
                $('#content').html(template);
                
                  const listaId = $("img").map(function(){
                    return $(this).attr("data-id");
                  }).get();

                $('#detail').on('click', showDetails(listaId))
               
            })
            .catch(err => console.log(err))
    }
    function showDetails(id) {
        
        axios.get(`http://www.omdbapi.com/?apikey=${key}&i=${id}`)
        .then(response => {
            const info = response.data;
            console.log(info)
            let template = `
                <div class="modal fade" id="modal-details" tabindex="-1" role="dialog" aria-labelledby="modal-details" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="modal-details">${info.Title}</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                  <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <p>Description: ${info.Plot}</p>
                                <p><strong>Actors: ${info.Actors}</strong></p>
                                <p><i>Genre: ${info.Genre}</i></p>
                                <p><small>Year: ${info.Year}</small></p>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
             `;
            $("body").append(template);
        })
    }
})
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Buscador de Peliculas</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
    
    <div class="container">
        <h1 class="display-4 text-center py-4">Encuentra tu película</h1>
        <form class="text-center" id="form">
            <div class="form-group">
                <input type="text" 
                       class="form-control " 
                       id="search" aria-describedby="textSearch" 
                       placeholder="Nombre de tu película"
                >
            </div>
            <button type="submit" 
                    class="btn btn-success w-100" 
                    id="btn-search">
                    Buscar
            </button>
        </form>
        <div class="text-danger text-left py-2" id="error"></div>  
    </div>
    
    <div class="container">
        <div id="content" class="row"></div>   
    </div>
    


    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="js/app.js"></script>

</body>
</html>

Este el ui de app Este es el ui de la app

2
  • Hola Juan, bienvenido al sitio, Si desea obtener todos los ids, no debería hacer otra selección , solo crea un array antes del $.each y en cada iteración del each, has un push del id.
    – Dev. Joel
    Commented el 30 sept. 2018 a las 19:07
  • Hola Joel, gracias por la rapidez, lo probaré. Commented el 30 sept. 2018 a las 19:29

1 respuesta 1

1

Efectivamente como lo estas haciendo siempre te mostrará el primero, debes recorrer cada elemento y obtener su atribuo data-id y almacenarlo en una variable:

var lista = $("img").map(function(){
              return $(this).attr("data-id");
            }).get();

console.log(lista);
.item{
  border:1px solid red;
  display:inline-block;
  height:60px;
  width:60px;
}

.item:hover{
  cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img data-id="1" class="item" src="..." alt="imagen1">
<img data-id="2" class="item" src="..." alt="imagen2">
<img data-id="3" class="item" src="..." alt="imagen3">
<img data-id="4" class="item" src="..." alt="imagen4">

UPDATE

Para tu código sugiero que le coloques una clase y no lo invoques por el id ya que muchos botones tendrán el mismo id y te va a dar problemas, según mi sugerencia quedaría así:

$.each(movies, (i, info) => {

                    template += `
                        <div class="card col-12 col-md-4">
                            <img class="card-img-top" src="${info.Poster === 'N/A' ? '': info.Poster}">
                            <div class="card-body text-center">
                                <h5 class="card-title">${info.Title}</h5>
                                <a id="detail" class="detail btn btn-success w-100" data-target="#modal-details" data-id="${info.imdbID}">
                                    Ver más
                                </a>
                            </div>
                        </div>                              
                    `;

                })

Como le agregué la clase detail, la idea de todo esto es hacer un evento click donde puedas obtener dicho id y el atributo data-id lo movi para el dicho botón, ahora hagamos el evento click:

$(".detail").click(function(){

  let id = $(this).attr("data-id");
  showDetails(id);

});

Si te fijas al darle click obtengo el id de uno de sus atributos llamado data-id y luego se lo paso a la función showDetails()

Espero te sirva.

8
  • Hola David, perfecto, pero si quiero pasar por parámetro esos id para mostrar un modal, me tira undefined, ya está editado. Commented el 30 sept. 2018 a las 19:47
  • y cuando pasas el id por parametros? me imagino que le das click a la imagen, un div o un botón para capturar el id y luego abrir la modal cierto? Commented el 30 sept. 2018 a las 20:06
  • Fíjate ahí, está en el código no esta completamente editado, es por eso que no lo veías, fue mi error. Efectivamente cuando doy click en "Ver más", el modal anda todo perfecto, pero me tira que no encontró el id, entonces esa información que ves en el modal, esta undefined. Commented el 30 sept. 2018 a las 20:13
  • Ok en el botón ver más colocale una clase la puedes llamar detail, es porque con el id te va a dar error, ya edito mi respuesta para que te fijes como queda el botón y el evento click para llamar a la modal Commented el 30 sept. 2018 a las 20:20
  • Veo que el botón ver más llama a la modal, tienes el evento cuando la modal se abre? es decir tienes algún evento que captura cuando la ventana modal se abre? Commented el 30 sept. 2018 a las 20:26

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.