0

This is the JavaScript in question

if (button === "find all") {
        request.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                const data = this.responseText
                document.querySelector(".form3").innerHTML = this.responseText + data.testName1

            }
        };
        request.open("GET", "fakeData.json", true);
        request.send();
    }

This is the JSON file I created:

{ "testName1": "test", "testRating1": "test", "testPrice1": "test" }

Here is the HTML section that gets referenced:

<div class="window__output">FIND or FIND ALL
    <div class="form form2">
         <p>
             To find a specific game please enter the name of the game.
         </p>
         <p>
             To find all games hit FIND ALL.
         </p>
         <div class="label">
             <label>Name:
                 <input id="output_name" type="text" required />
             </label>
         </div>
         <button class="button find">FIND</button>
         <button class="button findall">FIND ALL</button>
    </div>
</div>
<div class="window__data">Here be the DATA
    <div class="form form3">
       This is the data.
    </div>
</div>

When I press the FIND ALL button in my HTML it sends a request to fakeData.json and receives something back. The window displays:

Here be the DATA

{ "testName1": "test", "testRating1": "test", "testPrice1": "test" }undefined

As you can see, when I try to set that response to a variable it also says undefined. I have tried const data = JSON.parse(this.responseText) and it gives me an unexpected token at position 1. According to the documentation, this is what should happen since I am passing an object and not a string. But I know it's not an object because when I try to do this.responseText.testName1 it comes back undefined. It acts like an array or string cause if I do this.responseText[index#] it returns the character at that index. What is going on and how do I fix it?

Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
Bryan Petko
  • 21
  • 4
  • `As you can see, when I try to set that response to a variable it also says undefined` actually no, we can't, where does that happen? Where are you trying to assign the response to a variable and it says "undefined" ? I think that's the key line, and you didn't put it here. I suspect a duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call) – Jeremy Thille Oct 29 '21 at 13:51
  • You misspelled responseText here -> `const data = this.reponseText` – James Oct 29 '21 at 13:57
  • @james, thanks I missed the spelling mistake. At least now It is showing up. Its still not acting like an object though. I should be able to do data.testName1 and it should show test but it shows undefined. – Bryan Petko Oct 29 '21 at 14:09
  • You should JSON.parse it too! It's coming through as text. – James Oct 29 '21 at 14:11
  • @JeremyThille actually I did put it in there it was const data = this.responseText. I did misspell the word response which caused the initial undefined. but the data is not acting like an object. I should be able to do data.testName1 and come back with test but instead it says undefined. – Bryan Petko Oct 29 '21 at 14:12
  • Thanks @James apparently i'm an idiot :) – Bryan Petko Oct 29 '21 at 14:13
  • Use `this.responseJSON` to get the parsed JSON. – Barmar Oct 29 '21 at 14:24
  • Why would a property named `response`**`Text`** be anything other than text, i.e., a string? Please post the result of `console.log(this.responseText)` and `console.log([...this.responseText])`. You might not be getting what you think you're getting... – Heretic Monkey Oct 29 '21 at 14:31

0 Answers0