JSON 解析问题，检测到意外空白的错误

Question

我有一个如下所示的对象，orderItems 以 string[] 形式存储在 appwriteDB 中（appwrite 仅支持 string[]）。我尝试使用 *ngFor 显示该值，但失败了。我尝试使用 JSON.parse() 转换 orderItems，但由于检测到意外的空白而失败。

[
  {
    "orderStatus": "New",
    "orderPayment": "Paid",
    "orderItems": [
      "{\"productName\":\"Nokia Windows mobile\",\"productPrice\":299,\"productDetails\":\"Nokia windows 10 mobile\",\"productAvailable\":true,\"qty\":1,\"$id\":\"65f21c5cdd3449f30f68\",\"$createdAt\":\"2024-03-13T21:36:28.906+00:00\",\"$updatedAt\":\"2024-03-13T21:36:28.906+00:00\",\"$permissions\":[],\"$databaseId\":\"smartCartDB\",\"$collectionId\":\"Products\"}"
    ],
    "$id": "65f6fcc4e65c46fc6e97",
    "$createdAt": "2024-03-17T14:23:00.944+00:00",
    "$updatedAt": "2024-03-17T14:23:00.944+00:00",
    "$permissions": [],
    "products": [],
    "$databaseId": "smartCartDB",
    "$collectionId": "Orders"
  },
  {
    "orderStatus": "New",
    "orderPayment": "Paid",
    "orderItems": [
      "{\"productName\":\"Samsung s25\",\"productPrice\":1499,\"productDetails\":\"Samsung mobile, 1TB\",\"productAvailable\":true,\"qty\":1,\"$id\":\"65f21c2d5ded54bcacf3\",\"$createdAt\":\"2024-03-13T21:35:41.385+00:00\",\"$updatedAt\":\"2024-03-13T21:35:41.385+00:00\",\"$permissions\":[],\"$databaseId\":\"smartCartDB\",\"$collectionId\":\"Products\"}",
      "{\"productName\":\"Apple Iphone\",\"productPrice\":1299,\"productDetails\":\"Apple Iphone 256GB\",\"productAvailable\":true,\"qty\":1,\"$id\":\"65f0f3c878c1a95a63fe\",\"$createdAt\":\"2024-03-13T00:31:04.495+00:00\",\"$updatedAt\":\"2024-03-13T00:31:04.495+00:00\",\"$permissions\":[],\"$databaseId\":\"smartCartDB\",\"$collectionId\":\"Products\"}"
    ],
    "$id": "65f79c39d27f2846a512",
    "$createdAt": "2024-03-18T01:43:21.907+00:00",
    "$updatedAt": "2024-03-18T01:43:21.907+00:00",
    "$permissions": [],
    "products": [],
    "$databaseId": "smartCartDB",
    "$collectionId": "Orders"
  },
  {
    "orderStatus": "New",
    "orderPayment": "Paid",
    "orderItems": [
      "{\"productName\":\"Nokia Windows mobile\",\"productPrice\":299,\"productDetails\":\"Nokia windows 10 mobile\",\"productAvailable\":true,\"qty\":1,\"$id\":\"65f21c5cdd3449f30f68\",\"$createdAt\":\"2024-03-13T21:36:28.906+00:00\",\"$updatedAt\":\"2024-03-13T21:36:28.906+00:00\",\"$permissions\":[],\"$databaseId\":\"smartCartDB\",\"$collectionId\":\"Products\"}",
      "{\"productName\":\"Moto Edge 40 Neo\",\"productPrice\":799,\"productDetails\":\"Moto Edge 40 Neo 256GB\",\"productAvailable\":true,\"qty\":1,\"$id\":\"65f21c437b6056836618\",\"$createdAt\":\"2024-03-13T21:36:03.506+00:00\",\"$updatedAt\":\"2024-03-13T21:36:03.506+00:00\",\"$permissions\":[],\"$databaseId\":\"smartCartDB\",\"$collectionId\":\"Products\"}"
    ],
    "$id": "65f79d9eb083ae49c565",
    "$createdAt": "2024-03-18T01:49:18.723+00:00",
    "$updatedAt": "2024-03-18T01:49:18.723+00:00",
    "$permissions": [],
    "products": [],
    "$databaseId": "smartCartDB",
    "$collectionId": "Orders"
  },
  {
    "orderStatus": "New",
    "orderPayment": "Paid",
    "orderItems": [
      "{\"productName\":\"Samsung s25\",\"productPrice\":1499,\"productDetails\":\"Samsung mobile, 1TB\",\"qty\":4}",
      "{\"productName\":\"Apple Iphone\",\"productPrice\":1299,\"productDetails\":\"Apple Iphone 256GB\",\"qty\":5}"
    ],
    "$id": "65f7a621020a4525e698",
    "$createdAt": "2024-03-18T02:25:37.009+00:00",
    "$updatedAt": "2024-03-18T02:25:37.009+00:00",
    "$permissions": [],
    "products": [],
    "$databaseId": "smartCartDB",
    "$collectionId": "Orders"
  }
]

我尝试过 JSON.parse，但失败了。转换特定 orderItems 对象的最佳方法是什么？

方法：1 res.documents.map((el:any) => {return JSON.parse(el.orderItems)} ));

方法：2 res.documents.map((el:any) => { return el.orderItems.map((el2:any) => {return JSON.parse(el2)})})

请指导我解决问题的最佳方法是什么。

Answer 1

导致此问题的原因是您正在尝试

JSON.parse(el.orderItems)}

，但 orderItems 是一个 字符串列表。相反，您需要通过

orderItems

映射到 stringify 单个字符串。这是实现这一目标的方法：

const result =  data.map((order) => {
    return order.orderItems.map((item) => {
        return JSON.parse(item)
    })
})