in

Selecting item in list and displaying the selected item’s information in another div


I am getting JSON data (businesses) from the yelp API. I loop through the data to display the businesses, and want to display more information about the business when clicked on in another div. So far I have:

        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) + "/5u2606  " + 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>

My plan was to set an index value for each div containing a business and then upon click use that value to get the rest of the information to display. My problem is that I seem to not be able to actually get the index value using var index = $(this).val();. I am new to all of this and would love some guidance on where I went wrong!



Source: https://stackoverflow.com/questions/70631792/selecting-item-in-list-and-displaying-the-selected-items-information-in-another

5 Tiny Yet Useful Features I Would Like to See in GNOME in 2022

A Python package for downloading / archiving all available episodes from a podcast RSS feed