Soy nuevo en la codificación y tengo problemas con este archivo JSON anidado.
Quiero mostrar las estaciones de carga de vehículos eléctricos en Suiza en una página web creada con HTML, CSS y JavaScript. Para los datos, tengo un archivo JSON externo al que quiero acceder con JavaScript.
Este es el archivo JSON externo "ladestationen_schweiz.json" y quiero acceder a Google GeoCoordinates "46.68459 7.86187" con JavaScript.
{ "EVSEDataRecord":[ { "Address":{ "City":"Interlaken", "Country":"CHE", "HouseNum":"16", "PostalCode":"3800", "Street":"Alpenstrasse", "Floor":null, "Region":null, "Timezone":null }, "IsOpen24Hours":false, "ChargingStationId":"CH*BVS*E001*0001", "GeoCoordinates":{ "Google":"46.68459 7.86187" } } ] }¿Alguien podría ayudarme?
Sí, el json que está obteniendo es una matriz EVSEDataRecord , por lo que debe asignar esto para obtener el objeto único y luego cualquier campo dentro del objeto al que pueda acceder.
A continuación, en el código, hice lo mismo o haga clic aquí para obtener una demostración
import React from 'react'; import MyData from './ladestationen_schweiz.json'; export default function App() { return ( <div> <h1>JSON!</h1> {MyData.EVSEDataRecord.map((item) => { return <div>Google: {item.GeoCoordinates.Google}</div>; })} </div> ); }Uso del acceso de propiedad de corchetes, acceso de propiedad de punto y desestructuración de objeto/matriz
const jsonData = { "EVSEDataRecord": [{ "Address": { "City": "Interlaken", "Country": "CHE", "HouseNum": "16", "PostalCode": "3800", "Street": "Alpenstrasse", "Floor": null, "Region": null, "Timezone": null }, "IsOpen24Hours": !1, "ChargingStationId": "CH*BVS*E001*0001", "GeoCoordinates": { "Google": "46.68459 7.86187" } }] } // Using Square brackets property accessor console.log(jsonData['EVSEDataRecord'][0]['GeoCoordinates']['Google']); // Using Dot property accessor console.log(jsonData.EVSEDataRecord[0].GeoCoordinates.Google); // using Object destructuring const { EVSEDataRecord: [{ GeoCoordinates: { Google } }] } = jsonData; console.log(Google);Suponiendo que no esté utilizando un preprocesador como Babel, deberá obtener el json mediante la API de búsqueda porque la implementación actual de ES no admite importaciones de json ampliamente directas.
Un ejemplo de importación usando fetch:
fetch("./path/to/your/data.json") .then((r) => r.json()) .then((obj) => console.log(obj));La variable obj contendrá el contenido de su archivo json.