KPC
Kevin Powell - Community•2y ago
Dovah

How to fetch JSON data into HTML?

 <div class="chart-container">
                    <div class="chart-spendings">
                        <p>$<span class="daily-amount">17.45</span></p>
                    </div>
                    <div class="chart-body">

                    </div>
                    <div class="chart-day">
                        <p class="day-name">mon</p>
                    </div>
                    x7 of same divs
</div>
 <div class="chart-container">
                    <div class="chart-spendings">
                        <p>$<span class="daily-amount">17.45</span></p>
                    </div>
                    <div class="chart-body">

                    </div>
                    <div class="chart-day">
                        <p class="day-name">mon</p>
                    </div>
                    x7 of same divs
</div>
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.
19 Replies
Jochem
Jochem•2y ago
you can import your javascript using type="module": 
<script type="module" src="index.js"></script>
<script type="module" src="index.js"></script>
And then import your JSON in javascript: 
import data from './data.json' assert {type: 'json'};
import data from './data.json' assert {type: 'json'};
and then go from there you'll have to loop over data and update your HTML accordingly
Dovah
Dovah•2y ago
I did that it is just that it is not working I will send you my JS code 
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(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);
    }
})
whoops I did something like this and few other versions none worked
Jochem
Jochem•2y ago
make a codepen, then I can take a look I don't see anything immediately wrong with that atm
Dovah
Dovah•2y ago
Sec Let me figure out how to do it
Dovah
Dovah•2y ago
Dovah
Dovah•2y ago
Does it work? Wait forgot the JSON xD But don't know how to do it
Jochem
Jochem•2y ago
yeah, I didn't quite think about the json... what's the contents of the json file? can you paste it here?
Dovah
Dovah•2y ago
Sure! [ { "day": "mon", "amount": 50.45 }, { "day": "tue", "amount": 100.91 }, { "day": "wed", "amount": 52.36 }, { "day": "thu", "amount": 31.07 }, { "day": "fri", "amount": 23.39 }, { "day": "sat", "amount": 43.28 }, { "day": "sun", "amount": 25.48 } ]
Jochem
Jochem•2y ago
I've set it up in a codesandbox, you can add more files in there. I see the logic flaw now, you're fetching chartDailyAmount once, and then assigning stuff to it, but you're assigning to the nodelist / array, not to a specific element in the array
Dovah
Dovah•2y ago
I did put them through for loop but it was still the same I'm still confused. Usually it would work with chartDailyAmount[i].innerHTML
Jochem
Jochem•2y ago
that wasn't in the code you shared though, and the [i] wouldn't be available in a for...of
Dovah
Dovah•2y ago
I made another for loop inside of it Kinda stupid, but I thought it would still work Do you maybe have a proper for loop? THat would work?
Jochem
Jochem•2y ago
is there a reason you pre-fill the data in the HTML?
Dovah
Dovah•2y ago
I was just practicing HTML/CSS and basic JS, did not plan on doing anything with JSON. However it really does not look like something hard to execute. Maybe it is?
Jochem
Jochem•2y ago
Want results from more Discord servers?
Add your server