Estoy tratando de usar mi archivo json, busesNotArrived.json y poner su contenido en un <p> , sin embargo, no funciona y los datos en el archivo JSON no se muestran, aquí está mi código:
<p>Buses Not Arrived:<br><br><span id="output"></p> <script> const fs = require('fs') fs.readFile('json/busesNotArrived.json', 'utf8', (err, jsonString) => { if (err) { alert('Error reading Database:', err) return } try { const bus = JSON.parse(jsonString) alert("Bus address is:", bus.busNumber) document.getElementById('output').innerHTML = bus.BusNumber; } catch(err) { alert('Error parsing JSON string:', err) } }) </script>Dentro de mi archivo JSON, esto es lo que está almacenado:
{ "busRoute": 123123, "busNumber": 123123 }Bueno, finalmente lo descubrí, así que, como dijo @Ronnel, no puede usar require() porque es node.js y no javascript, por lo que tendría que usar la API fetch() para obtener el archivo .json .
Para quien quiera ver el código, aquí está:
<div id="myData" class='absolute1' onclick='notArrived()'><strong><u>Not Yet Arrived</u></strong><br><br></div> <script> fetch('json/busesNotArrived.json') .then(function (response) { return response.json(); }) .then(function (data) { appendData(data); }) .catch(function (err) { console.log('error: ' + err); }); function appendData(data) { var mainContainer = document.getElementById("myData"); for (var i = 0; i < data.length; i++) { var div = document.createElement("div"); div.innerHTML = 'Bus Number: ' + data[i].busNumber + "<br>" + 'Bus Route:' + ' ' + data[i].busRoute + "<br><br>"; mainContainer.appendChild(div); } } </script>|| Perdón por las sangrías :P ||
Y también, esto es lo que había en el archivo .json para que pueda trabajar con él:
[ { "id": "1", "busNumber": "4024", "busRoute": "44444" }, { "id": "2", "busNumber": "4044", "busRoute": "4444" }, { "id": "3", "busNumber": "5024", "busRoute": "55555" } ]¡Buena suerte usando esto!
Si desea más explicación, aquí es de donde obtuve el código:
( https://howtocreateapps.com/fetch-and-display-json-html-javascript/ )
Javascript no es lo mismo que node.js require() no es parte del estándar de JavaScript y no es compatible con los navegadores listos para usar, es el sistema de módulos de node.js.
Es posible que deba incluir directamente los módulos; Es posible que algunos de los módulos no funcionen en el contexto de espacio aislado del navegador.
Además, herramientas como http://browserify.org/ pueden ser útiles.
Y por favor ponga el mensaje de error también.