I need to get filtered response of RestApi. For example, I want to get "id", "name" and "coordinates" fields from the response.
fetch(url, options)
.then(res => res.text())
.then(data => {
console.log(data);
})
.catch(error => {
console.log('error fetching', error)
});
I do not know how can I do it?
[
{
"id":22,
"visible":true,
"name":"Distance",
"note":"",
"color":"#1979E4",
"point_of_view":{
"image_id":2961484116667333,
"scs_orientation":null,
"fov":null,
"scs_location":[
10.069071420248019,
-3.4315537915724224,
1.1707962178213307
]
},
"type":"DISTANCE_VERTICAL_MEASUREMENT",
"scs_geometry":{
"type":"LineString",
"coordinates":[
[
4.592703919368196,
-4.053005766962444,
-0.9250943789482116
],
[
4.592703919368196,
-4.053005766962444,
9.206785308182239
]
]
},
"created_date":1651137546590,
"measurement_group":6
},
{
"id":23,
"visible":true,
"name":"Distance",
"note":"",
"color":"#1979E4",
"point_of_view":{
"image_id":2961484116667333,
"scs_orientation":null,
"fov":null,
"scs_location":[
10.069071420248019,
-3.4315537915724224,
1.1707962178213307
]
},
"type":"DISTANCE_HORIZONTAL_MEASUREMENT",
"scs_geometry":{
"type":"LineString",
"coordinates":[
[
12.092187102599642,
-6.594044278306256,
-0.9200943837165831
],
[
12.941293176077313,
-2.77877760536178,
-0.9200943837165831
]
]
},
"created_date":1651137602618,
"measurement_group":6
}
]
It's basic programming. Just map you array and pick up needed fields
// URL to api
const url: string = "some url"
// Request options
const options: RequestInit = {
headers: {'Accept': 'application/json'}
}
// Request
fetch(url, options)
.then((response) => response.json())
.then((data) => {
// Check that response data is array
if (Array.isArray(data)) {
// Construct new array with items
return data.map(item => {
return {
id: item?.id,
name: item?.name,
coordinates: item?.scs_geometry?.coordinates
}
})
} else {
// Throw error because of bad data
throw new Error('bad data')
}
})
.catch((error) => {
// Catch both response errors and our error
console.log("error fetching", error);
})
// Async version of same request
const makeRequest = async () => {
try {
const response = await fetch(url, options)
const data = await response.json()
if (Array.isArray(data)) {
// Construct new array with items
return data.map(item => {
return {
id: item?.id,
name: item?.name,
coordinates: item?.scs_geometry?.coordinates
}
})
} else {
// Throw error because of bad data
throw new Error('bad data')
}
} catch (error) {
console.log("error fetching", error)
}
return null
}
makeRequest()