Js file not showing any output

JavaScript
1

Tell us what’s happening:
Why isnt my js file not showing results in the html file? Im not using codepen because I want to learn doing it in the real world framework.

Your code so far
My code is available at https://github.com/galdiatorocks/krishna/tree/master/projects/data%20visualisation%20with%20bar%20chart

My js file looks like this

const projectName = 'bar-chart';
//coded by @gladiatorocks

fetch('https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js')
    .then(response => response.json())
    .then(data => {console.log(data);})
    .then(document.getElementById('Graph').innerText = "Text Item");

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.149 Safari/537.36.

Challenge: Visualize Data with a Bar Chart

Link to the challenge:

2

The file you are fetching isn’t a JSON object, so you can’t use response.json() to get the data. You should be seeing an error in the dev console, something like:

SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

Your options are:

3

Why are you fetching the test script?

4

Here is the error I am getting on my chrome console. (Access to XMLHttpRequest at ‘file:///…js-bar-chart.js’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

5

Ok… that was a mistake… I have corrected that now & getting the actual json file with data… still the above error holds… here is what it looks like now…

const projectName = 'bar-chart';
//coded by @gladiatorocks

fetch('https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json')
    .then(response => response.json())
    .then(data => {console.log(data);})
    .then(document.getElementById('Graph').innerText = "Text Item");
6

I’m assuming you are opening the html file in your browser and running it locally on your computer. In order to grab a file using fetch you have to be running the html through an actual web server. Do you have a web server installed on your computer? If so, fire it up and then load the page using the server. If not then install one. Or you’ll need to load the page from whatever server you are going to use to host the project.

7

Thanks! I set it up on github & now that part is resolved for.

Its almost impossible to figure out what I am doing wrong, console also doesn’t help. please help.

Codepen:

Github:
https://github.com/galdiatorocks/projects/tree/master/projects/bar-chart

8

When I run your code this is the error I get in the console:

TypeError: can't convert undefined to object d3.min.js:3:23819

This may not seem like it helps, but it is telling you that d3 is expecting an object but is getting undefined instead. So basically it’s telling you that d3 doesn’t like what you are passing or is trying to do work on something that isn’t defined yet.

You’ve got a bunch of calls to d3 following the fetch. I don’t know which one is actually complaining about the undefined object but in this case I don’t need to know because I can see where the problem is occurring without having to know anything about d3 (which I don’t).

I can see that dataset plays an important role with d3. You are initializing dataset after you get the json file using fetch. Fetch returns a promise because it may take a while to get that file from the server. When a function returns a promise it basically tells your code to move on with whatever else it needs to do and it will get back to you when it finally has your data. The then methods you tack on to the fetch function are executed when fetch finally has your data. That is when dataset will finally be initialized to the json data. In the meantime, the rest of your code runs as normal, not knowing that you have code waiting for fetch to return.

So while you are waiting for fetch to initialize dataset, all of your calls below to d3 are running and they are using the initial value you set dataset to instead of the json data you are waiting for. So you need to fix your code so that all of the stuff below the fetch function doesn’t execute until after you set dataset to the json data.

9

Thank you! It took me sometime to figure out how to do this, ofcourse the problem was relatively simple. Here is the completed project.

https://galdiatorocks.github.io/projects/projects/bar-chart/bar-chart.html

Thanks for all the help :slight_smile: