How can I split strings of an array by backslash?

Question

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?

Answer 1

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

Answer 2

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"
        }
    }
 ]
}