How to fetch JSON data into HTML?
JSON file is called data.json and has "day" and "amount" data that I want to put into
class="day-name" and class="daily-amount" elements.
data and update your HTML accordinglytype="module"chartDailyAmount<script type="module" src="index.js"></script>import data from './data.json' assert {type: 'json'};fetch("./data.json")
.then(function(resposne){
return resposne.json();
})
.then(function(data){
for(let info of data){
chartDailyAmount.innerHTML = info.amount.toString();
dayName.innerHTML = info.day.toString();
console.log(chartDailyAmount);
}
})fetch("./data.json")
.then(function(response){
return response.json();
}).then(function(data){
for(let info of data){
const chartContainerEl = document.createElement("div");
chartContainerEl.classList.add("chart-container")
chartContainerEl.innerHTML = `
<div class="chart-container">
<div class="chart-spendings">
<p>$<span class="daily-amount">${info.amount}</span></p>
</div>
<div class="chart-body">
</div>
<div class="chart-day">
<p class="day-name">${info.day}</p>
</div>
</div>
`;
document.body.append(chartContainerEl)
}
})