- Joined
- Sep 17, 2022
- Messages
- 1
- Reaction score
- 0
First, the bird's-eye view: I'm trying to write a Wordle mock for my fantasy basketball league. I'm trying to do it using Vanilla Javascript, since I know almost nothing about frameworks etc.
My basic problem is this: I need to authenticate that the word the user inputs is a valid English word. The way I'm doing this is using a dictionary API called wordsAPI. The basic scheme is
i create a boolean variable isWord, true by default
user inputs word
I look that word up in wordsAPI
if wordsAPI returns 404 status on that word, I set isWord to false
I only do the rest of my program if isWord is true
Now, I have figured out how to do all this using XMLHttpRequest. However, it seems that method is deprecated and I might want to be using fetch. I'm told this is simpler, but so far it hasn't been, for this use-case anyway.
Here is the XMLHttpRequest code that is currently doing what I want:
So my question is how can I do this same thing using fetch? Most of the code above was copied directly from wordsAPI's entry on rapidAPI. I did the same with the fetch code they offer, but I can't figure out how to get the status of the response so I can use it as a condition to change my isWord variable.
For reference, here's the generic fetch code from rapidAPI:
But nothing along these lines is working so far. I just can't find a way to represent the status in a way that I can use it to change my variable.
My basic problem is this: I need to authenticate that the word the user inputs is a valid English word. The way I'm doing this is using a dictionary API called wordsAPI. The basic scheme is
i create a boolean variable isWord, true by default
user inputs word
I look that word up in wordsAPI
if wordsAPI returns 404 status on that word, I set isWord to false
I only do the rest of my program if isWord is true
Now, I have figured out how to do all this using XMLHttpRequest. However, it seems that method is deprecated and I might want to be using fetch. I'm told this is simpler, but so far it hasn't been, for this use-case anyway.
Here is the XMLHttpRequest code that is currently doing what I want:
JavaScript:
let testWordString = prompt("Enter a word");
let isWord = true;
const data = null;
const xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.addEventListener("readystatechange", function () {
if (this.readyState === this.DONE) {
if(this.status === 404 &&
!supplementalWordList.includes(testWordString.toUpperCase())){
isWord = false;
}
}
});
xhr.open("GET", `https://wordsapiv1.p.rapidapi.com/words/${testWordString}`,
false);
xhr.setRequestHeader("X-RapidAPI-Key", "key-goes-here");
xhr.setRequestHeader("X-RapidAPI-Host", "wordsapiv1.p.rapidapi.com");
xhr.send(data);
if(isWord === true){
execute rest of program
}
So my question is how can I do this same thing using fetch? Most of the code above was copied directly from wordsAPI's entry on rapidAPI. I did the same with the fetch code they offer, but I can't figure out how to get the status of the response so I can use it as a condition to change my isWord variable.
For reference, here's the generic fetch code from rapidAPI:
JavaScript:
const options = {
method: 'GET',
headers: {
'X-RapidAPI-Key': 'key-goes-here',
'X-RapidAPI-Host': 'wordsapiv1.p.rapidapi.com'
}
};
fetch('https://wordsapiv1.p.rapidapi.com/words/hatchback/typeOf', options)
.then(response => response.json())
.then(response => console.log(response))
.catch(err => console.error(err));
I've tried things along the lines of this:
const options = {
method: 'GET',
headers: {
'X-RapidAPI-Key': 'key-goes-here',
'X-RapidAPI-Host': 'wordsapiv1.p.rapidapi.com'
}
};
fetch('https://wordsapiv1.p.rapidapi.com/words/hatchback/typeOf', options)
.then(response => response.json())
.then(response => {
if(response.status === 404){
isWord = false;
}))
.catch(err => console.error(err));
But nothing along these lines is working so far. I just can't find a way to represent the status in a way that I can use it to change my variable.