issues with JSON Parse, Error about unexpected white space detected

Question

I have an object like below, and orderItems are stored as string[] in appwriteDB (appwrite supports only string[]). I am trying to display the value using *ngFor, but it is failing. I tried to convert the orderItems using JSON.parse(), but it is failing with unexpected white space detected.

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

I have tried JSON.parse, but it is failing. what is the best way to convert the particular orderItems object.

method:1

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

method:2

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

Please guide me what is the best approach to fix my issue.

Answer 1

The issue is being caused because you are trying JSON.parse(el.orderItems)} but orderItems is a list of strings. Instead, you need to map through the orderItems to stringify individual string. This is how you can achieve this:

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

Answer 2

Actually, you just need to parse the array of objects on orderItems using JSON.parse(data). So, the code will be like this

    const parsing = data.map(item => {
      return {
        ...item,
        orderItems: [item.orderItems.map(order => JSON.parse(order))]
      }
    })

Here is the code snippet if you want to try on the sandbox https://jsfiddle.net/50vrpLmy/