我是編碼新手，并且在使用這個嵌套的 JSON 檔案時遇到了麻煩。
我想在使用 HTML、CSS 和 JavaScript 構建的網頁上顯示瑞士的電動汽車充電站。對于資料，我有一個要使用 JavaScript 訪問的外部 JSON 檔案。
這是外部 JSON 檔案“ladestationen_schweiz.json”，我想使用 JavaScript 訪問 Google 地理坐標“46.68459 7.86187”。
{
"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"
}
}
]
}
有人可以幫助我嗎？
這是我的專案概述的圖片
uj5u.com熱心網友回復：
是的，您獲得的 json 是一個陣列EVSEDataRecord，因此您需要映射它以獲取單個物件，然后是您可以訪問的物件內的任何欄位。
在代碼下面我做了同樣的事情或單擊此處進行演示
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>
);
}
uj5u.com熱心網友回復：
假設您沒有使用像 Babel 這樣的前處理器，您將需要使用fetch api獲取 json，因為當前的 ES 實作不支持廣泛的直接 json 匯入。
使用 fetch 匯入的示例：
fetch("./path/to/your/data.json")
.then((r) => r.json())
.then((obj) => console.log(obj));
變數 obj 將保存您的 json 檔案的內容。
uj5u.com熱心網友回復：
使用方括號屬性訪問器、點屬性訪問器和物件/陣列解構
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);轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/310032.html
標籤：javascript json
上一篇：禁用W3.CSS懸停下拉選單
下一篇：如何從json陣列中獲取值