How to avoid Escape char backslash on string[] response - Angular 17

Service.ts
getOrder() {
async getOrders():Promise {
return await this.database.listDocuments(apiConfig.DB_ID, apiConfig.ORDERS_ID);
}
}

Component.ts
this.backendService.getOrders().then((res) => {
this.orders=res.documents;
}

I am using *ngFor to display database reply

Are you stringifying the order items before insert into the database?

If so you'll need to json parse them before you can use the items in that object.

yes, i am doing strinfify when inserting the data

for (let i=0; i <items1.length; i++) {
console.log("for loop", items1[i]);
let value:string = JSON.stringify(items1[i]);
itemsofstring.push(value);
}

I don't know how efficient this is, but you can do something like

let orderItems = OrderItems.map(x => JSON.parse(x));

parse is not working because of the escape char

orders = ["{\"test\":\"test\"}"];
newOrders: any = [];

constructor() {
  this.newOrders = this.orders.map(order => JSON.parse(order));
}

<p *ngFor="let item of newOrders">{{ item.test }}</p>

This worked just fine for me

But for your model, you'll probably want to extent Models.Document from appwrite. So you have access to the default attributes like $database, $createdAt, etc.

Do neither of these work?

they didnt work

You wouldn't wrap it in curly braces, if you do wrap it you have to say you're returning JSON.parse(el2)

Maybe try something like this?

this.backendService.getOrders().then((res) => {

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

Nope it didnt work.

This is my orderItems as sub object of response.

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

component.html

in the UI, -- not getting the values
Qty:, Price: ,Name:

Qty:, Price: ,Name:

why the *ngFor is not showing the values. but it loops twice.

It's probably because you're not properly parsing the json in order items. So qty, price, details do not exist. What do you see if you do something like {{ item3 | json }} or even just {{ item3 }}

Getting empty values

but orderItems displays value.

when i do {{item3 | json }}, getting empty

What about if you just do item3?

what does {{order['orderItems'] | json}} shows in your UI?

I am getting empty

I dont know why JSON.parse not working and complaining unexpected white space