{
id: 8,
customerName: "xyz",
customerMobileNumber: "123456789",
customerBillingAddress: "xyz address",
customerShippingAddress: "xyz address",
customerProductPurchasedDate: "2021-11-09T09:07:00.000Z",
customerGstNumber: "xyz",
customerHsnNumber: "xyz",
addedInvoiceProductDetails: "[{"productquantity":"5","productprice":"5","productgst":"5","productname":"xyz","producttotalprice":"26.25","id":"2021-11-13T09:08:20.071Z"}]",
created_at: "2021-11-13T09:08:25.000000Z",
updated_at: "2021-11-13T09:08:25.000000Z"
},

I'm getting above values in one of my project API[http://127.0.0.1:8000/api/invoice_details/8], The issue here im facing is that im unable to map the parameter i.e., addedInvoiceProductDetails the typeof im getting for the parameter addedInvoiceProductDetails is as string. So map wont work for string. Hence how can i convert it to object and map it.

Note: I'm getting the response from API for addedInvoiceProductDetails parameter is as below

[{"productquantity":"1","productprice":"1000","productgst":"18","productname":"Street Light","producttotalprice":"1180","id":"2021-11-18T12:11:31.137Z"},{"productname":"Solar","productquantity":"2","productprice":"50","productgst":"10","producttotalprice":"110","id":"2021-11-18T12:11:43.935Z"}]

The response what im getting from API is parsed one itself, but still when i check its typeof it is giving as string.

it would be really helpful if i have provide with solution, im stuck with this issue from past 2 days.

CodePudding user response：

You need to JSON.parse the value

const response = [{
    id: 8,
    customerName: "xyz",
    customerMobileNumber: "123456789",
    customerBillingAddress: "xyz address",
    customerShippingAddress: "xyz address",
    customerProductPurchasedDate: "2021-11-09T09:07:00.000Z",
    customerGstNumber: "xyz",
    customerHsnNumber: "xyz",
    addedInvoiceProductDetails: "[{\"productquantity\":\"5\",\"productprice\":\"5\",\"productgst\":\"5\",\"productname\":\"xyz\",\"producttotalprice\":\"26.25\",\"id\":\"2021-11-13T09:08:20.071Z\"}]",
    created_at: "2021-11-13T09:08:25.000000Z",
    updated_at: "2021-11-13T09:08:25.000000Z"
  },
  {
    id: 10,
    customerName: "xyz",
    customerMobileNumber: "123456789",
    customerBillingAddress: "xyz",
    customerShippingAddress: "xyz",
    customerProductPurchasedDate: "2021-11-11T09:26:00.000Z",
    customerGstNumber: "xyz",
    customerHsnNumber: "xyz",
    addedInvoiceProductDetails: "[{\"productquantity\":\"5\",\"productprice\":\"5\",\"productgst\":\"5\",\"productname\":\"gggg\",\"producttotalprice\":\"26.25\",\"id\":\"2021-11-13T09:27:17.639Z\"}]",
    created_at: "2021-11-13T09:27:20.000000Z",
    updated_at: "2021-11-13T09:27:20.000000Z"
  },
]

response.forEach(({addedInvoiceProductDetails})=> console.log(JSON.parse(addedInvoiceProductDetails)))

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You need to JSON.parse the addedInvoiceProductDetails attribute of the response. Ex:

let response = {
    id: 8,
    customerName: "xyz",
    customerMobileNumber: "123456789",
    customerBillingAddress: "xyz address",
    customerShippingAddress: "xyz address",
    customerProductPurchasedDate: "2021-11-09T09:07:00.000Z",
    customerGstNumber: "xyz",
    customerHsnNumber: "xyz",
    addedInvoiceProductDetails: "[{\"productquantity\":\"5\",\"productprice\":\"5\",\"productgst\":\"5\",\"productname\":\"xyz\",\"producttotalprice\":\"26.25\",\"id\":\"2021-11-13T09:08:20.071Z\"}]",
    created_at: "2021-11-13T09:08:25.000000Z",
    updated_at: "2021-11-13T09:08:25.000000Z"
}

// without JSON.parse the value of addedInvoiceProductDetails is a string
console.log(typeof response.addedInvoiceProductDetails)
// string

// with JSON.parse the value of addedInvoiceProductDetails is a object
console.log(typeof JSON.parse(response.addedInvoiceProductDetails))
// object

// if you parse and then log you'll see it's an object with accessable properties
console.log(JSON.parse(response.addedInvoiceProductDetails))
/* [ { productquantity: '5',
productprice: '5',
productgst: '5',
productname: 'xyz',
producttotalprice: '26.25',
id: '2021-11-13T09:08:20.071Z' } ] */