从 URL 解析 JSON 文件的各个部分以与 Mapbox 一起使用

Question

我正在尝试解析 JSON 的一部分以与 Mapbox 一起使用。这是 JSON 文件的示例：

{
  "time":"06:00",
  "location": [
    {
      "device_id": "019823123123123",
      "geometry": {
        "type": "point",
        "coordinates": [
          -4.19635681,
          20.19492493,
          -12.282
        ]
      }
    }
  ]
}

这是代码的一部分：

    async function getLocation(updateSource) {
  try {
    const response = await fetch(
      'http://localhost/data.json', {
        method: 'GET'
      }
    );

    const {
    
      coordinates // <<--- THIS IS MY PROBLEM, HOW DO I FETCH THIS PART OF JSON?
      
      // var longitude = location[1].geometry.coordinates[0] <<--- I ALSO TRIED THIS BUT NOT LUCK
      // var latitude = location[1].geometry.coordinates[1] <<--- I ALSO TRIED THIS BUT NOT LUCK
      
    } = await response.json()


        map.flyTo({
                    center: [longitude, latitude], // <<-- AND CONVERT IT TO THIS FORM?
                    essential: true


                });

如何将坐标数组放入单独的 longitude/latitude？谢谢

Answer 1

您似乎在尝试使用 Destructuring assignment。

location 是一个对象的数组，它有一个 geometry 属性，它有一个坐标属性这是一个数组，你只需要该数组的前两个元素。

const response = {
  "time":"06:00",
  "location": [
    {
      "device_id": "019823123123123",
      "geometry": {
        "type": "point",
        "coordinates": [
          -4.19635681,
          20.19492493,
          -12.282
        ]
      }
    }
  ]
}

const {
  location: [
    {
      geometry: {
        coordinates: [ lat, lng ]
      }
    }
  ]
} = response;

console.log(lat, lng);

Answer 2

也可以将结果保存在一个variable/constant中，然后遍历到coordinates数组：

const response = await fetch('http://localhost/data.json', {method: 'GET'})
const result = await response.json()

const coordinates = result.location[0].geometry.coordinates

此外，您可能需要使用 coordinates 以这种方式获得 latitude 和 longitude：

const [latitude, longitude] = coordinates;
// or
const latitude = coordinates[0]
const loingitude = coordinates[1]

您的响应中的 location 数组可能包含多个具有不同 coordinates 的对象，您将使用 map 函数来执行某些操作结果：

const locations = result.location // get the location array

const newArrayOfLocations = locations.map(location => (
 {
  center: [location.geometry.coordinates[0], location.geometry.coordinates[1]],
  essential: true
 })
)

也可以在map函数中使用数组析构：

locations.map(location => {
 const [latitude, longitude] = location.geometry.coordinates

 return {
  center: [latitude, longitude],
  essential: true
 }}
)

Answer 3

谢谢，但上面 none 的答案有效，我用下面的代码让它工作：

const response = await fetch(
                
                    'http://localhost/data.json', {
                        method: 'GET'
                    })

                const results = await response.json()

                const longitude = results.locations[0].geometry.coordinates[0]
                const latitude = results.locations[0].geometry.coordinates[1]

从 URL 解析 JSON 文件的各个部分以与 Mapbox 一起使用

Parsing various parts of JSON file from URL to use with Mapbox

javascript

arrays

json

mapbox