Search code examples
javascripthtmlajaxlist.js

How to expand single statement for multiple statements in success function


I'm trying to turn the results of a route from my API into a searchable list the whole process of obtaining data via AJAX is completed, I can print data on my front end but only 1 result from my list in JSON is available to the client, how can I expand this list using statement?

Jquery

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

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

                // Print Results
                var options = {
                    valueNames: ['name', 'born']
                };

                // Example One
                var values = [{
                    name: finalData[0].addressStreet
                }];
                var userList = new List('users', options, values);

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

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

Html

<div id="users">
    <input class="search" placeholder="Search" />
    <button class="sort" data-sort="name">
      Sort by name
    </button>
    <button id="sendSearchAddress">
        Atualizar
    </button>

    <ul class="list">
        <li>
          <h3 class="name">Jonny Stromberg</h3>
          <p class="born">1986</p>
        </li>
        <li>
          <h3 class="name">Jonas Arnklint</h3>
          <p class="born">1985</p>
        </li>
    </ul>
</div>

My JSON Result

enter image description here

enter image description here


Solution

  • I'm not sure I fully understand what you're trying to do but as best as I can tell it looks like you need to change

    var values = [{
        name: finalData[0].addressStreet
    }];
    

    to

    var values = finalData.map(function(finalDatum) {
        return {
            name: finalDatum.addressStreet
        };
    });