sIn my Gatsby project, I am picking up the following data from my WordPress platform:
[{
"geometry": {
"type": "Polygon",
"coordinates": "[\"0|55.852081917669,11.704305226785\",\"1|55.851551628025,11.706345689048\",\"2|55.853209224226,11.712709159294\",\"3|55.851748029256,11.713342357427\",\"4|55.845937703792,11.720414588428\",\"5|55.845051483877,11.713738293486\",\"6|55.846069367192,11.711604417263\",\"7|55.846239161586,11.71001852885\",\"8|55.845765045803,11.709506210798\",\"9|55.844532089093,11.709164766166\",\"10|55.84419438921,11.705722332566\",\"11|55.847328748169,11.704214635447\",\"12|55.848990718611,11.703850761782\",\"13|55.850086606046,11.704294408103\",\"14|55.850086606046,11.704294408103\"]"
},
"properties": {
"title": "Area 1",
"slug": "area-1"
}
}]
I am processing the coordinates string by splitting it up by pipe (|) and shifting away the first element of the array. See below:
const polygonareas = data.allWpArea.nodes.map(area => ({
geometry: {
type: "Polygon",
coordinates: area.coordinates.split("|")
},
properties: {
title: area.title,
slug: area.slug
}
}))
polygonareas.map(data => ({
geometry: {
coordinates: data.geometry.coordinates.shift()
}
}))
That mapping of the object is producing the following:
{
"geometry":
"type": "Polygon",
"coordinates": [
"55.852081917669,11.704305226785\",\"1",
"55.851551628025,11.706345689048\",\"2",
"55.853209224226,11.712709159294\",\"3"
]
},
"properties": {
"title": "Area 1",
"slug": "area-1"
}
}
I would like to split the elements of the coordinates array by backslah using following code, which does not work:
polygonareas.map(data => ({
geometry: {
coordinates: data.geometry.coordinates.map(coord => (
coord.split("\\")
))
}
}))
But with no result. How can I split the elements by backslah of the array and only keep the coordinates?
You don't have any backslashes in coordinate items! Those are scaped double quotations. You can easily parse them and then make any modifications you need:
const data = [{
"geometry": {
"type": "Polygon",
"coordinates": "[\"0|55.852081917669,11.704305226785\",\"1|55.851551628025,11.706345689048\",\"2|55.853209224226,11.712709159294\",\"3|55.851748029256,11.713342357427\",\"4|55.845937703792,11.720414588428\",\"5|55.845051483877,11.713738293486\",\"6|55.846069367192,11.711604417263\",\"7|55.846239161586,11.71001852885\",\"8|55.845765045803,11.709506210798\",\"9|55.844532089093,11.709164766166\",\"10|55.84419438921,11.705722332566\",\"11|55.847328748169,11.704214635447\",\"12|55.848990718611,11.703850761782\",\"13|55.850086606046,11.704294408103\",\"14|55.850086606046,11.704294408103\"]"
},
"properties": {
"title": "Area 1",
"slug": "area-1"
}
}];
const polygonareas = data.map(area => ({
geometry: {
type: "Polygon",
coordinates: JSON.parse(area.geometry.coordinates)
},
properties: {
title: area.properties.title,
slug: area.properties.slug
}
}));
console.log(polygonareas);Thank you for the help. That did the trick. I ended up with the following solution to solve my problem:
// Building the base geojson object
const areasdata = {
'type': 'FeatureCollection',
'features': []
}
const polygons = data.allWpArea.nodes.map(area => ({
geometry: {
type: "Polygon",
coordinates: JSON.parse(area.coordinates)
},
properties: {
title: area.title,
slug: area.slug
}
}))
const areas = polygons.map(data => ({
geometry: {
coordinates: data.geometry.coordinates.map(coord => coord.split("|").pop())
}
}))
areasdata.features = areas
Code above are producing following output:
{
"type": "FeatureCollection",
"features": [
{
"geometry": {
"type": "Polygon",
"coordinates": [
"55.7091,11.842046",
"55.708983,11.841894",
"55.708738,11.84157"
]
},
"properties": {
"title": "Area 2",
"slug": "area-2"
}
}
]
}