Este es el JavaScript en cuestión.

 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(); }

Este es el archivo JSON que creé:

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

Aquí está la sección HTML a la que se hace referencia:

 <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>

Cuando presiono el botón ENCONTRAR TODO en mi HTML, envía una solicitud a fakeData.json y recibe algo de vuelta. La ventana muestra:

Aquí están los DATOS

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

Como puede ver, cuando trato de establecer esa respuesta en una variable, también dice indefinido. const data = JSON.parse(this.responseText) y me da un token inesperado en la posición 1. De acuerdo con la documentación, esto es lo que debería suceder ya que estoy pasando un objeto y no una cadena. Pero sé que no es un objeto porque cuando trato de hacer this.responseText.testName1 vuelve indefinido. Actúa como una matriz o cadena porque si hago this.responseText[index#] devuelve el carácter en ese índice. ¿Qué está pasando y cómo lo soluciono?