Kevin Powell - Community•2y ago

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•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

DovahOP•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•2y ago

make a codepen, then I can take a look I don't see anything immediately wrong with that atm

DovahOP•2y ago

Sec Let me figure out how to do it

DovahOP•2y ago

https://codepen.io/DovahTheKiin/pen/dyjNMBB

DovahTheKiin

CodePen

JSONproblem

...

DovahOP•2y ago

Does it work? Wait forgot the JSON xD But don't know how to do it

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?

DovahOP•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•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

DovahOP•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•2y ago

that wasn't in the code you shared though, and the [i] wouldn't be available in a for...of

DovahOP•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•2y ago

is there a reason you pre-fill the data in the HTML?

DovahOP•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•2y ago

this works: https://codesandbox.io/s/jovial-mcclintock-rd762t?file=/index.js

jochem

CodeSandbox

jovial-mcclintock-rd762t - CodeSandbox

jovial-mcclintock-rd762t by jochem

MarkBoots•2y ago

And instead of prefilling the html. you could do this

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

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

DovahOP•2y ago

Nice! Thanks for the help! Yeah saw people do it that way instead but was just wondering if it could be done even with pre-written HTML. Either way thanks for help as well!

Jochem•2y ago

I wouldn't necessarily recommend my solution btw, it's very dependent on the order the data appears in and the data having the same number of records as the pre-populated HTML, which isn't generally something you should rely on. It's just the closest to what you had that works, Mark's solution is more robust and easier to work with / reason about

DovahOP•2y ago

@jochemm Now I have the problem of data showing when I inspect the elements in browser, but not showing in console when I request them with console.log on page load. It is a graph where it will be shown depending on data, now its just an empty graph. xD Will have to try different methods tomorrow

Gaming

Programming

How to fetch JSON data into HTML?