este es mi html
<form id="upload"> <label for="file">File to upload</label> <input type="file" id="file" accept=".json"> <button>Upload</button> </form> <div id="map"></div>este es el archivo javascript
// Get the form and file field let form = document.querySelector('#upload'); let file = document.querySelector('#file'); // Listen for submit events form.addEventListener('submit', handleSubmit); /** * Handle submit events * @param {Event} event The event object */ function handleSubmit(event) { // Stop the form from reloading the page event.preventDefault(); // If there's no file, do nothing if (!file.value.length) return; // Create a new FileReader() object let reader = new FileReader(); // Setup the callback event to run when the file is read reader.onload = logFile; // Read the file reader.readAsText(file.files[0]); } function logFile(event) { let str = event.target.result; let json = JSON.parse(str); console.log('string', str); console.log('json', json); } var map_init = L.map('map', { center: [9.0820, 8.6753], zoom: 8 }); var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }).addTo(map_init); L.geoJSON(json).addTo(map)Quiero usar la variable json en la segunda función fuera de su función. Estoy tratando de crear una entrada de carga de archivos que pueda leer fácilmente el archivo json en el mapa del folleto
L.geoJSON(json).addTo(map)Primero debe guardarlo en el exterior de la función, let jsonFile = null;
luego, dentro de la función logFile, puede reasignar: jsonFile = JSON.parse(str);