使用 Fetch 獲取 API 響應，使用 JSON.stringify()，然后...？

Question

從周日開始，我已經搜索了這九種方式，但是我在這里缺少一些東西，我不知道它是什么。

我正在使用 fetch 從 Mapbox 中獲取一些數據：

var response = fetch(myURL)

.then(response => response.json())
.then (data => console.log(JSON.stringify(data)))

當我運行它並查看控制台時，我可以看到我確實抓取了數據，因為它被記錄了。 （我將記錄的內容放在最后，因為它很多。）

問題是我不知道如何將信息轉換為我可以使用的格式。 我想要的只是緯度/經度，但我不知道如何得到它。 我嘗試將字符串化數據推送到一個數組中，我嘗試編寫一個將字符串化數據分配給變量的函數，但我沒有得到它。

我錯過了一些很明顯的東西。 如果你能揭開我的雙眼，我一定會很感激的。

這是控制台日志中顯示的內容。

"type":"FeatureCollection","query":["1600","pennsylvania","avenue","washington","dc"],"features":[{"id":"address.1048737153875776", "type":"Feature","place_type":["address"],"relevance":0.90963,"properties":{"accuracy":"rooftop"},"text":"Pennsylvania Avenue Southeast","place_name ":"1600 Pennsylvania Avenue Southeast, Washington, District of Columbia 20003, United States","matching_place_name":"1600 Pennsylvania Avenue Southeast, Washington, DC 20003, United States","center":[-76.982015,38.879235],"幾何":{"type":"Point","坐標":[-76.982015,38.879235]},"address":"1600","context":[{"id":"neighborhood.2918372884011750","text ":"國會山"},{"id":"postcode.12587193810898840","text":"20003"},{"id":"place.2915387490246050","wikidata":"Q61","text" :"Washington"},{"id":"region.14064402149979320","short_code":"US-DC","wikidata":"Q3551781","text":"哥倫比亞特區"},{"id" :"country.14135384517372290","wikidata":"Q30","short_code":"us","text":"United States"}]}],"attribution":"注意： © 2022 Mapbox 及其供應商。 版權所有。 使用此數據受 Mapbox 服務條款 ( https://www.mapbox.com/about/maps/ ) 的約束。 此回復及其包含的信息可能不會保留。 由 Foursquare 提供的 POI。"}

Answer 1

data是一個對象。 假設您想要coordinates數組中的lat/lng信息，您可以像這樣導航它。

 const data={type:"FeatureCollection",query:["1600","pennsylvania","avenue","washington","dc"],features:[{id:"address.1048737153875776",type:"Feature",place_type:["address"],relevance:.90963,properties:{accuracy:"rooftop"},text:"Pennsylvania Avenue Southeast",place_name:"1600 Pennsylvania Avenue Southeast, Washington, District of Columbia 20003, United States",matching_place_name:"1600 Pennsylvania Avenue Southeast, Washington, DC 20003, United States",center:[-76.982015,38.879235],geometry:{type:"Point",coordinates:[-76.982015,38.879235]},address:"1600",context:[{id:"neighborhood.2918372884011750",text:"Capitol Hill"},{id:"postcode.12587193810898840",text:"20003"},{id:"place.2915387490246050",wikidata:"Q61",text:"Washington"},{id:"region.14064402149979320",short_code:"US-DC",wikidata:"Q3551781",text:"District of Columbia"},{id:"country.14135384517372290",wikidata:"Q30",short_code:"us",text:"United States"}]}]}; // Access the first element of the `features` array and // find the `geometry` property. Destructure the `coordinates` // property (also and array) from it. const { coordinates } = data.features[0].geometry; // And then destructure the `lat/lng` values from // that array const [lat, lng] = coordinates; console.log(lat, lng);

附加文件

• 解構賦值

Answer 2

response.json() 是一個 JavaScript 對象。 所以像這樣的東西應該適合你。 我只是在這里登錄到控制台，但是您可以通過 ajax 調用將數據保存到數據庫中，或者動態創建一個 html 表來查看詳細信息。

var response = fetch(myURL)
    .then(response => {
        responseObject = response.json();
        let features = responseObject.features;        
        for (let i = 0; i < features.length; i++)
        {
            let coords = responseObject.features[i].geometry.coordinates;
            console.log(`${features.id} Lat = ${coords[0]} Long = ${coords[1]}`);
        }
    });