'How can i pass data forward base upon what the user clicks on?
I've been testing out fetching data from a stock API and I'm displaying the ticker symbol and name on my page, However, I want to expand a bit and when I click on each stock I would like for a page to open and display more data on that stock. So my approach to the problem is to have a function perform a request using the ticker symbol as the argument when the detail page opens. But my question is how do I pass the ticker forward to my function. Can someone help?
// Fetch stock- this function runs on page load
async function fetchTrendingStock() {
fetch(trendUrl)
.then(response => {
if(!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
return response.json();
})
.then(data => {
console.log(data)
let trend = "";
let payload = data.data.all;
for(let i = 0, len = payload.length; i < len; i++) {
trend +=
`
<div class="col-lg-6">
<a class="cardLink" href="details.html">
<div class="newsCard">
<div class="text-container">
<h4 class="cardText">${payload[i].name}</h4>
<h5 class="cardText">${payload[i].ticker}</h5>
</div>
<div class="imgContainer">
<p class="">${payload[i].sentiment_score}</p>
</div>
</div>
</a>
</div>
`
}
document.getElementById("trend-stocks-container").innerHTML = trend;
})
}
fetchTrendingStock()
// fetch stock details- this function will run when the link to the stock is clicked to open the detail page.
async function fetchProfileData(ticker) {
let url = `https://financialmodelingprep.com/api/v3/profile/${ticker}?apikey=0000`;
fetch(url)
.then(response => {
if(!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
return response.json();
})
.then(data => {
console.log(data)
data.forEach(payload => {
console.log(payload.companyName)
console.log(payload.description)
})
})
}
fetchProfileData("eman")
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
