How can I split strings of an array by backslash?

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

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