Get data from selected option in <ul> using AJAX result

Question

I'm trying to get data from selected li in AJAX result but I can not think of something to get the data from the current selection, could help me?

The whole process of getting the registry are working perfectly and click the option generated by AJAX are also working only thing I can not do is get the record of the current selection made by the client...

My list in template

<div class="col-xs-12" >
  <ul class="list list-search-address" id="target_ul">
     <li>
        <h3 class="addressStreet">Test</h3>
        <p class="neighborhoodStreet">Test</p>
     </li>
  </ul>
</div>

My AJAX request

$('#sendSearchAddress').click(function() {
    $.ajax({
        type: "GET",
        dataType: "JSON",
        url: "https://***-api.herokuapp.com/api/***-street-last-three-searcheds?access_token=****FH",
        success: function (finalData) {
            // Running test
            console.log(finalData);

            if (finalData) {
                // var dd = JSON.parse(result);
                // addressStreet(finalData[0].addressStreet)
                // name: finalData[0].addressStreet

                // Print Results
                var options = {
                    valueNames: ['addressStreet', 'neighborhoodStreet']
                };

                // Example One
                var values = finalData.map(function(finalDatum) {
                    return {
                        addressStreet: finalDatum.addressStreet,
                        neighborhoodStreet: finalDatum.neighborhoodStreet,
                    };
                });

                var userList = new List('users', options, values);

                $('#target_ul').on('click', 'li', function () {
                    alert('Clicked in ');
                });

                // Example Two
                // userList.add(values);

                // Print Varible Contain Data From Street
                console.log(values);
            }
        }
    }); 
});

Thanks for help!!!

Answer 1

You can use Event delegation for N li inside the ul to set the click event to all li in the ul.

  let app = document.getElementById('target_ul');

// attach event listener to whole container
app.addEventListener('click', function(e) {
  if (e.target && e.target.nodeName === 'LI') {
    let item = e.target;
    alert('you clicked on item: ' + item.innerHTML);
  }
});

here is a short sample of event delegation and 2 more good stuff

Navigate the e.target to see what you have inside in your case it can be e.target.nodeName you will see array of nodes and take the innerHTML in the example you can catch the idea...

In jQuery

 $('#target_ul').on('click', 'li', function (e) {
                alert('Clicked in ', e);
            });

probally you can navigate the e argument and find the nodes, do e.target

e.target in jquery here you will find a example with ul list that will fit what you are looking for usign children() function