Estoy tratando de obtener la información que está en la URL, pero JavaScript vuelve a la tabla HTML "indefinida". Alguien tiene idea de que error puedo estar cometiendo.
Si alguien sabe como solucionar el problema que me lo diga.
Obtenga datos que están en JSON pero no en la tabla/HTML
<!DOCTYPE html> <html lang="en"> <link rel="stylesheet" href="Request.css"> <h2>Query</h2> <form id="form" method="GET"> <label for="Year">Year:</label><br> <input type="text" id="year" name="year" autocomplete="off" required><br> <input type="submit" value="submit"> </form> <table> <thead> <tr> <td>Year</td> <td>Data</td> </tr> </thead> <tbody id="movie-table-body"> </tbody> </table>DESDE AQUÍ Java-script
<script> var form = document.getElementById("form") document.getElementById('form').addEventListener('submit', function (evt) { evt.preventDefault(); var year = document.getElementById("year").value let params = { "year": year, } let query = Object.keys(params) .map(k => encodeURIComponent(k) + '=' + encodeURIComponent(params[k])) .join('&'); let url = 'https://facebook.com=54s' + query; fetch(url) .then(data => data.text()) .then((text) => { console.log('successful', text) let = tableHTML = "" for (let i = 0; i < text.length; i++) { tableHTML += "<tr>"; tableHTML += "<td>" + text[i]["year"] + "</td>"; tableHTML += "<td>" + text[i]["data"] + "</td>"; tableHTML += "</tr>"; }; document.getElementById("movie-table-body").innerHTML = tableHTML; }) .catch((error) => { alert(error); }) }) </script> </body> </html>Recibe un texto, debe convertir a JSON data.json() . La respuesta de la solicitud es un objeto, por lo que no puede iterar el objeto, debe iterar una matriz
let tableToHtml = "" text[data].map(d => {tableToHtml += json.stringify(d)} )Si desea agregar todas las claves en el objeto, use for...in
for (b in data) { tableToHtml += b; }