Анализ различных частей файла JSON с URL-адреса для использования с Mapbox

#javascript #arrays #json #mapbox

Вопрос:

Я пытаюсь разобрать часть 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


                });
 

Как мне поместить массив координат в отдельную долготу/широту?
Спасибо

Ответ №1:

Похоже, вы пытаетесь использовать назначение деструктурирования.

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); 

Ответ №2:

Вы также можете сохранить результат в переменной/константе, а затем перейти к 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
 }}
)
 

Ответ №3:

Спасибо, но ни один из вышеперечисленных ответов не сработал, я заставил его работать со следующим кодом:

 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]