Obtengo datos JSON (empresas) de la API de yelp. Recorro los datos para mostrar los negocios y quiero mostrar más información sobre el negocio cuando se hace clic en otro div. Hasta ahora tengo:
function display_results(businesses) { var options = ''; for (var i = 0; i < businesses.length; i++) { options += '<div class="optbtn" value="' + i + '">' + businesses[i].rating.toFixed(1) + "/5\u2606 " + businesses[i].name + '</div>'; } $('#businesses').html(options); $('.optbtn').click(function () { // index problems var index = $(this).val(); console.log("index: " + index); var details = businesses[index]; var info = ''; for (key in details) { info += key + ': ' + details[key] + '<br>'; } $('#info').html(info); }); } $(function () { $("#search_bar").autocomplete({ source: "/autocomplete", minLength: 3, select: function (event, ui) { $.ajax({ url: "/business_search", type: "GET", data: { term: ui.item.value }, success: function (result) { display_results(JSON.parse(result).businesses); } }); } }); }); <div class="ui-widget"> <label for="search_bar">Business Search: </label> <input id="search_bar" style="width: 400px;"> </div> <div class="ui-widget"> Businesses: <div id="businesses" style="height: 400px; width: 600px; overflow: auto; white-space: pre;" class="ui-widget-content" /> </div> <div class="ui-widget"> Info: <div id="info" style="height: 400px; width: 600px; overflow: auto; white-space: pre;" class="ui-widget-content" /> </div> Mi plan era establecer un valor de índice para cada div que contenga un negocio y luego, al hacer clic, usar ese valor para mostrar el resto de la información. Mi problema es que parece que no puedo obtener el valor del índice usando var index = $(this).val(); . ¡Soy nuevo en todo esto y me encantaría recibir orientación sobre dónde me equivoqué!
El problema principal en su código es que los elementos div de HTML válidos no deben tener un atributo de value para ser leídos a través del método val() de jQuery. La solución fácil para esto sería usar el atributo de data para almacenar el índice o la identificación de la entidad de matriz relacionada dentro del HTML.
También tenga en cuenta que hay algunas otras optimizaciones que puede hacer a la lógica para mejorarla:
Array.map() y la interpolación de cadenas para construir el HTML de manera más sucintaObject.entries() para recuperar un objeto similar a una matriz que contiene los pares clave/valor dentro de un objeto determinado.Dicho esto, esto debería funcionar para usted:
jQuery($ => { let $businesses = $('#businesses'); // handle click on the business rating $businesses.on('click', '.optbtn', e => { let index = $(e.currentTarget).data('index'); let business = $businesses.data('response')[index]; $('#info').html(Object.entries(business).map(([k, v]) => `<p>${k}: ${v}</p>`)); }); // update the DOM based on the AJAX response: let display_results = businesses => $businesses.html(businesses.map((b, i) => `<div class="optbtn" data-index="${i}">${b.rating.toFixed(1)}/5\u2606 ${b.name}</div>`)) // make your Autocomplete/AJAX call here. // mock AJAX response handler: let ajaxResponse = [{ rating: 1.11, name: 'Foo', address: '123 Any Street' },{ rating: 2.22, name: 'Bar', address: '456 Any Town' },{ rating: 4.44, name: 'Fizz', address: '789 Any City' },{ rating: 5.00, name: 'Buzz', address: '123 Any Avenue' }]; display_results(ajaxResponse); // build the UI from the dataset $businesses.data('response', ajaxResponse); // store the response for later use }); #search_bar { width: 400px; } .ui-widget-content { width: 600px; overflow: auto; margin-bottom: 10px; } .ui-widget-content p { margin: 0 0 5px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div class="ui-widget"> <label for="search_bar">Business Search:</label> <input id="search_bar" /> </div> <div class="ui-widget"> Businesses: <div id="businesses" class="ui-widget-content"></div> </div> <div class="ui-widget"> Info: <div id="info" class="ui-widget-content"></div> </div>