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

Question

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 += '' + businesses[i].rating.toFixed(1) + "/5\u2606  " + businesses[i].name + '';
            }
            $('#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] + '
';
                }
                $('#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);
                        }
                    });
                }
            });
        });

    
        Business Search: 
        
    

    
        Businesses:
        
    

    
        Info:

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!

user_519413 · Answer

The main issue in your code is because valid HTML div elements should not have a value attribute to be read through jQuery's val() method. The easy fix for this would be to use data attribute to store the index or id of the related array entity within the HTML.

Also note that there's some other optimisations you can make to the logic to improve it:

Use Array.map() and string interpolation to build the HTML more succinctly
Use a single delegated event handler for all dynamic content
Use Object.entries() to retrieve an array-like object containing the key/value pairs within a given object.
Put CSS rules in an external CSS stylesheet, not inline in HTML

With that said, this should work for you:

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]) => `${k}: ${v}`)); 
  });
  
  // update the DOM based on the AJAX response:
  let display_results = businesses => $businesses.html(businesses.map((b, i) => `${b.rating.toFixed(1)}/5\u2606 ${b.name}`))
  
  // 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;
}



  Business Search:
  


  Businesses:
  


  Info:

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

1 Answers