I have been working with a stock api for the past day or two, and I'm trying to make a search engine for it with a filter method. It works, but it can be slow because the initial api fetch response is an array that is about 28,000 indeces. Is there a way to limit the response I get? I looked in the documentation and there doesn't seem to be a solution through the link itself. Any help would be appreciated!
input.addEventListener('keyup', (e) => {
const searchString = e.target.value.toLowerCase();
const filteredCompanies = stockCompanies.filter((company) => {
return (
company.description.toLowerCase().includes(searchString) ||
company.displaySymbol.toLowerCase().includes(searchString)
);
});
displayCompanies(filteredCompanies);
});
const loadCompanies = async () => {
try {
const res = await fetch(`https://finnhub.io/api/v1/stock/symbol?exchange=US&token=${apiKey}`);
stockCompanies = await res.json();
displayCompanies(stockCompanies);
}catch (err) {
console.error(err);
}
};
const displayCompanies = (data) => {
var dynamic = [];
for (var i = 0; i < data.length; i++){
dynamic.push(`
<div class="listings_card">
<h1>${data[i].description}</h1>
<p>${data[i].displaySymbol}</p>
</div>`);
}
document.querySelector('.listings').innerHTML = dynamic.join('');
};
loadCompanies();
If api doesn't support the feature you can not. But you can eliminate the list after you receive the response. Try this way:
const loadCompanies = async () => {
try {
const res = await fetch(`https://finnhub.io/api/v1/stock/symbol?exchange=US&token=${apiKey}`);
const res_data = await res.json();
stockCompanies = res_data.slice(0, 50)
displayCompanies(stockCompanies);
} catch (err) {
console.error(err);
}
};