javascript - 如何通过反斜杠拆分数组的字符串？

Question

在我的 Gatsby 项目中，我从我的 WordPress 平台获取以下数据：

[{
    "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.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()
  }  
}))

该对象的映射产生以下内容：

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

我想使用以下代码通过 backslah 拆分坐标数组的元素，但这不起作用：

polygonareas.map(data => ({
  geometry: {
    coordinates: data.geometry.coordinates.map(coord => (  
      coord.split("\\")
    ))
  }  
}))

但是没有结果。如何通过数组的反斜杠分割元素并只保留坐标？

标签： javascriptarraysreactjssplit

Answer 1

您在坐标项目中没有任何反斜杠！这些是转义的双引号。您可以轻松解析它们，然后进行所需的任何修改：

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