Hello all. I’m trying to build the Random Quote Machine project from the Front-End Libraries certificate. I know this is going to sound stupid, but how do you import a JSON file in React?
I’ve been googling it and I can’t seem to find a straight-forward way to do it. Right now I’ve got the HTML skeleton ready, but when I add the Import line it stops everything from loading. I’ve been having trouble understanding React and I’m sure it’s something obvious.
imports are used locally, try using fetch or XMLHttpRequest instead.
If you want the JSON as soon as the app loads, you can add your fetch request to the constructor or componentDidMount methods on your app component.
I don’t believe github hosted JSON files are proper JSON mime type so you may see an error when attempting to fetch it as JSON. See if you can host it somewhere else.
You also don’t appear to be using valid React CDN links in your codepen, try these instead.
Make sure you use ReactDOM.render, not React.render as well.
Hi @adam-weiler if you want to import a JSON file is good idea to check the life cycle of React. Remember that the method componentDidMount() is used to access the DOM, set Timers and make AJAX request.
I hope so this approach can help you.
I think it’s connected properly now. When I console log “this.state.quotes” an object appears, and the HTML isn’t disappearing any more.
I think (?) the next step is to load all of the quotes into an array. And then use a random number generator to pick one to display.
@CMCCormack:
-OH! Import only works if the file is in the same place as the React file. I switched it out with a fetch command.
-That’s weird that GitHub won’t let you access JSON files. I changed it to the JSON file to the GistHub one used in the example.
-I was having trouble getting React to work so I had forked an example page. I “think” I’m use the valid React CDN now.
@Yamitrvg12:
Okay, so I’ll need to put the fetch command into “componentDidMount()” right after the constructor.
I dug into this a little more and created this codepen to test.
Using the raw JSON you will get a content-type of text/plain, while using the API will get a content-type of application/json.
I remember having issues in the past accessing the former, so it’s probably best to use the latter when hosting JSON on a github gist.
I’ve run into 2 additional problems:
-At the end of componentDidMount() I’ve called a function called getRandomQuote() that I want to pick a random number between 1 and the number of records in the object quotes. But when I do a console log (line 28), the object seems to be blank. Is it calling the function too early, before the JSON request is made?
-I’m having trouble figuring out the dot notation. When I use stringify and this.state.quotes[1] I get the entire 1th object (line 35). But I can’t seem to access the quote or the author separately. I’ve tried this.state.quotes[1][“quote”], and this.state.quotes[1].quote, with and without stringify, but it doesn’t seem to be working. Is this the wrong way to access inside the object?