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>
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
};
});