You mentioned nodejs in this comment
But you are not using nodejs here. So, it’s a bit confusing why you are talking about nodejs.
You’re right @pkdvalis. Because these are all new to me.
I referenced Nodejs because of the below comment from a generous personality.
Rather than taking on NodeJS to handle the CORS issue you’re having, maybe try another approach like creating your own JSON file to consume via fetch().
Here’s a post someone made on FCC that might help you get started, but I suggest researching everything you can find on this before you make a decision.
How do I add the local JSON file in fetch API in CodePen? - JavaScript - The freeCodeCamp Forum
Greetings
I left from here approximately 17 days ago to learned the fundamental of JSON, and GitHub in order to create an API for my project. To admit, the courses were rewarding. However, I held back to my project to apply some of the knowledge gained. Fortunately and Unfortunately, all of the test requirement passed, but the Quote and the Author are not displaying. Undefined kept displaying on different attempts and update I have applied. Below is a screenshot of the project. Can someone please take a quick look and suggest a hint? Thanks in advance
This looks like an issue with your JSON file structure.
Debug your code by logging data.length just inside randomIndex. Is that the value you expect? Also, log index. Do you notice that it’s always the same?
Please try to get into the habit of logging variables as you write your code, so you know exactly what you’re working with and you’re not coding blindly.
1 Like
good job, but you could solve this one with an object in the JS file that contains quotes
1 Like
I am currently reconstructing a new JSON file to perform another experiment that I have gained some knowledge about. The first Two JSON files that I created, both had “id“ which I‘m somehow sure that they are not the problem; but this new approach will incorporate your suggestion and most importantly upskill my view.
I do not mean a JSON file, I literally mean adding an array with objects with the quotes in your JS code without importing anything
Thanks for the follow up. I do sincerely appreciate your generosity. I have actually gone about to execute the announced plan .
But I ended up with numerous of arrays on the display screen, as you can see below:
In a concise manner, this is the first project that has introduced me to an in depth lessons about JSON File and Fetch(). These introductory lessons are great, and I sacrificing the time needed to walk me through it. Because of this reason, I have suspended the ‘current project‘ to read through these lessons, and to practice some of the examples therein.
Here is my question. I have seen and work with some arrays that appeared to be JSON Files through the prior lessons, but fetch() was seldomly used. From this perspective, will fetch() still be used to fetch the data from the internal array stored in JavaScript? I just created array of objects containing quotes and authors based on this instruction but I got 404 error
What do you think might has been the cause?
Your JSON file structure is now good. But there are other issues with your code.
const response2 = response1.clone();
const resultOne = await response1.json();
const resultTwo = await response2.json();
data.push(resultOne, resultTwo);
Why are you doing this?
Also, would you please include a link to this fCC challenge in the curriculum…I don’t see it.
This is the link to the current challenge
These formats are performed to make copy of the retrieve JSON File in order to allow the users to reread each data to be fetched. I used data.push(resultOne, resultTwo) to store the data retrieved from the API
Sure. I know what it’s doing. But why are you doing it? It’s just duplicating the data in your JSON file and borking the final data structure. Don’t you expect to see 7 objects in your JSON array? Inside randomIndex(), log the length of data (console.log("data length:", data.length)). What do you see?
That is exactly the expectation, because the JSON file contain seven objects. when the length of the “data“ is logged to the console, ‘data length‘ is ‘undefined‘. But when I deleted the response2 and resultTwo variables, the ‘data length‘ displayed random numbers exceeding the number of objects in the JSON file
let data = [];
Here you’re creating an array in the global space.
data.push(resultOne);
And here you’re pushing another array inside it, so the length of data is 1, not 7.
fetch(url)
.then(function(response) {
response.json();
})
.then(function(data) {
this.data = data;
randomIndex();
})
.catch(function(error) {
console.error(error.message)
})
I changed the fetch() method in order to halt pushing array into the global array. The length of the data is 0 and undefined on the user-interface
Please slow down and think about what you’re doing and why you’re doing it. Take it one step at a time. And test by using console.log() to make sure your code is generating the values you expect.
The syntax you were using to fetch the data was fine the way you had it. But the code you are writing now is dated, and you don’t seem to understand it.
I was trying to nudge you to understand that your global variable is the issue.
await response1.json() returns an array. That’s the array you want. So, now all you have to do is assign it to a variable. How about data? 
Then the only other place that variable is used is in the randomIndex() function, right? So how can you send the variable to that function?
EDIT: The syntax you were using to fetch the data was fine the way you had it without cloning the response.
no, you use fetch to get external resources
1 Like
Greetings dhess;
First and foremost, thanks to you and the rest of the distinct generous administrative Team of this generous Platform. Thanks for the guidance and the relentless efforts that have continued to impart Participants of the freeCodeCamp Program.
Haven’t said that, I am taking my time to comprehend my engagement. I am exhausting ample amount of time to digest each new phase. This course derived from my own determination to undertake it. From the outset, I knew there would’ve been some challenges that I could have encountered, but that thought was recognized as the tendency to every new course outside the circumference of awareness and it was further applied to this course. This project has been one of the challenges. I have been learning from both the lessons and outside of the lessons in order to absorb profound understanding of the Topics to be covered, and it has been helping with in depth narrative outside of the lessons covered in the Curricula. It is very important to note that, some of these thoughts and suggestions have emerged from the lessons compiled in the Curricula. Because of this route, I burns more times on each Topic to get a vivid understanding of it than an expert would. I usually do some research outside of the Topics to get extensible explanation on the particular Topic and its methods. This has also been the case with this “Random Quote Machine“ project. I have paused the project on numeral of occasions in order to do some research. I spent approximately a week or so on fetch() and its applications. This course, of course, has enabled me to learned different methods of fetching data from the API , as I demonstrated in this particular project.
//The first method developed from my research.
async function data () {
try {
const res = fetch("https://type.fit/api/quotes");
if (!res.ok) {
throw new Error(`Response status: ${res.status}`)
}
} catch (error) {
console.error(error.message)
}
}
//The second method developed from my research.
let data;
const someFuncton = () => {}
fetch("https://type.fit/api/quotes")
.then(function(res) {
res.json()
})
.then(function(data) {
this.data = data;
someFunction();
})
.catch (function(error) {
console.error(error.message);
})
Now, some of these methods and methods of declaration, like “var“ might be dated for some new beginners and as well as some old-hands but they can play a significant role in constructing a solid foundation for others, which I will include myself. I haven’t been around coding long enough to differential between dated declarations and methods. In this regard, I have been steadily learning from the enormous hints that has continued to be afforded.
Once again, Thanks
That was also my initial thought and a feedback I got from the application of it. But I will still try to apply the method you recommended to my practice work. Thanks