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

I'm trying to Parse a part of the JSON to use with Mapbox. Here is an example of a JSON file:

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

and here is a part of the code:

    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


                });

How do I put an array of coordinates into separate longitude/latitude? Thank you

CodePudding user response：

It looks like you're trying to use Destructuring assignment.

location is an array of one object which has a geometry property, which has a co-ordinates property which is an array, and you just need the first two elements of that array.

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

CodePudding user response：

You can also save the result in a variable/constant and then traverse to the coordinates array:

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

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

Also, you may need to use the coordinates to get latitude and longitude in this ways:

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

the location array in your response may contain several objects with different coordinates and you will use map function to do something with the result:

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

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

You can also use array destruction in the map function:

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

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