Estoy tratando de obtener y mostrar datos de un archivo JSON usando el método getJSON() de JQuery.
Los datos se obtienen mediante getJSON y cada sección de datos se muestra como una nueva fila en una tabla html.
El problema es que los datos no se obtienen ni se muestran en absoluto.
Las URL del script están bien.
¿Podría ayudarme a detectar el problema en el código?
¡Gracias por adelantado!
índice.html:
<html lang="en"> <head> <title>Displaying JSON Data with Ajax</title> <script src="jquery.js"></script> </head> <body> <section> <h1>Displaying JSON Data with Ajax</h1> <table id='table' width='100%'> <tr> <th>Network</th> <th>power</th> <th>Members</th> <th>Status</th> </tr> <script> $(document).ready(function () { $.getJSON('example.json', function (data) { var rows = ''; $.each(data, function (key, value) { rows += ` <tr> <td> ${data[key].items.key} </td> <td> ${data[key].items.value} </td> <td> ${Object.keys(data[key].items).length} </td> <td> ${Object.keys(data[key].obj).length} </td> </tr> `; }); $('#table').append(rows); }); }); </script> </table> </section> </body> </html>ejemplo.json:
{ "items": [ { "key": "First", "value": 100 }, { "key": "Second", "value": false }, { "key": "Last", "value": "Mixed" } ], "obj": { "number": 1.2345e-6, "enabled": true }, "message": "Strings have to be in double-quotes." }Resulta que $getJSON solo acepta direcciones URL de API válidas.
Creé una URL api para los datos.
Luego cambió 'example.json' en $getJSON a 'http://localhost:3000/apiURL'.
¡Funcionó!
Aquí está el código de trabajo:
índice.html:
<html lang="en"> <head> <title>Displaying JSON Data with Ajax</title> <script src="jquery.js"></script> </head> <body> <section> <h1>Displaying JSON Data with Ajax</h1> <table id='table' width='100%'> <tr> <th>Network</th> <th>power</th> <th>Members</th> <th>Status</th> </tr> <script> $(document).ready(function () { $.getJSON('http://localhost:3000/apiURL', function (data) { var rows = ''; $.each(data, function (key, value) { rows += ` <tr> <td> ${data[key].items.key} </td> <td> ${data[key].items.value} </td> <td> ${Object.keys(data[key].items).length} </td> <td> ${Object.keys(data[key].obj).length} </td> </tr> `; }); $('#table').append(rows); }); }); </script> </table> </section> </body> </html>También se agregó [] al archivo json para que sea iterable.
ejemplo.json:
[{ "items": [ { "key": "First", "value": 100 }, { "key": "Second", "value": false }, { "key": "Last", "value": "Mixed" } ], "obj": { "number": 1.2345e-6, "enabled": true }, "message": "Strings have to be in double-quotes." }]