I am currently working on displaying reviews obtained from a Laravel API, showcasing feedback on various meals. The goal is to create a slideshow of review messages along with additional data as presented in the array of Objects below:
{
"2": {
"reviews": [
{
"id": 2,
"title": "Trop bon !",
"author": 1,
"text": "Trop bon ! 11 Trop bon !Trop bon !Trop bon !Trop bon !",
"picture": "",
"rating": 4.5
},
{
"id": 3,
"title": "Review 2",
"author": 1,
"text": "another review",
"picture": "",
"rating": 3
}
],
"data": {
"restaurant": {
"restaurant_id": 1,
"restaurant_logo": "http://3.bp.blogspot.com/-Oz5XdPqGddQ/ULy9zwbIDXI/AAAAAAAAPio/HZwYtIr7DfE/s1600/22-restaurant-logo-design.jpg",
"restaurant_title": "Resto BenArus",
"restaurant_type": "Fast Food",
"restaurant_lat": "36.7465169",
"restaurant_lng": "10.2171373",
"user_distance": 9.3072696748262
},
"meal": {
"id": 2,
"meal_title": "Spaghetti Bolonaise",
"price": 50,
"meal_description": "Epic !",
"reviews_count": 2,
"overall_rating": 3.75
}
}
},
"3": {
"reviews": [
{
"id": 4,
"title": "Total",
"author": 1,
"text": "cristifant ",
"picture": "https://www.gravatar.com/avatar/d9625431c20a1565a2e06f811a95c36c?s=140&d=retro",
"rating": 3
}
],
"data": {
"restaurant": {
"restaurant_id": 2,
"restaurant_logo": "http://3.bp.blogspot.com/-Oz5XdPqGddQ/ULy9zwbIDXI/AAAAAAAAPio/HZwYtIr7DfE/s1600/22-restaurant-logo-design.jpg",
"restaurant_title": "resto 2",
"restaurant_type": "Fast Food",
"restaurant_lat": "10",
"restaurant_lng": "32",
"user_distance": 3701.7730713836
},
"meal": {
"id": 3,
"meal_title": "Hamburger",
"price": 12,
"meal_description": "",
"reviews_count": 1,
"overall_rating": 3
}
}
}
}
A Pipe was created for iterating through the results:
transform(value, args:string[]):any {
let keys = [];
for (let key in value) {
keys.push({key: key, value: value[key]});
}
return keys;
}
However, the output is not ideal, as it only displays the initial keys from the array:
https://i.sstatic.net/utNdp.png
The way the data is being shown might not be correct:
<ion-content padding>
<ion-list *ngFor="let data of search | keyobject " no-lines>
<ion-list *ngFor="let data2 of data | keyobject " no-lines>
<ion-item>Value: {{ data2.value }} {{ data2.key }}</ion-item>
<ion-list *ngFor="let data3 of data2 | keyobject " no-lines>
<ion-item>Value: {{ data3.value }} {{ data3.key }}</ion-item>
</ion-list>
</ion-list>
</ion-list>
</ion-content>