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
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);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
}}
)
Thank you but none of the above answers worked, I got it to work with the following code:
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]