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?