I am using laravel backend for vuejs, after passing the values using json
return response() -> json(array('product' =>$product,'product_materials' =>$product_materials));
for /product_details/1
i am getting product:{}, product_materials: [{}] which is what I want
but /product_details/2
etc it is sending values product:{}, product_materials:{"number":{}}
what is the issue here? because of this I cannot do dynamic calculation.
/product_details/1
{
"product": {
"id": 1,
"name": "Wooden Table",
"description": "Dining",
"quantity": 2,
"material_items": 7,
"material_cost": 87.6,
"waste_percentage": 5,
"waste_amount": 4.38,
"labour_percentage": 15,
"labour_amount": 13.796999999999999,
"equipment_cost": "10.000",
"other_percentage": 8,
"other_amount": 9.26216,
"margin_percentage": 10,
"margin_amount": 12.503915999999998,
"sub_total": 137.54307599999999,
"amount": 275.08615199999997,
"created_at": "2022-04-04T20:02:16.000000Z",
"updated_at": "2022-04-09T13:04:44.000000Z",
"created_by": 1,
"updated_by": 1,
"deleted_by": null,
"deleted": 0
},
"product_materials": [
{
"id": 1,
"product_id": 1,
"description": "MDF Sheet",
"quantity": 10,
"rate": "5.000",
"amount": "50.000",
"delete": 0,
"created_at": "2022-04-04T20:03:13.000000Z",
"updated_at": "2022-04-04T20:03:13.000000Z",
"created_by": 1,
"updated_by": null,
"deleted_by": null
},
{
"id": 2,
"product_id": 1,
"description": "Filer",
"quantity": 2,
"rate": "10.000",
"amount": "20.000",
"delete": 0,
"created_at": "2022-04-04T20:03:53.000000Z",
"updated_at": "2022-04-04T20:03:53.000000Z",
"created_by": 1,
"updated_by": null,
"deleted_by": null
},
{
"id": 3,
"product_id": 1,
"description": "Primer",
"quantity": 1,
"rate": "4.000",
"amount": "4.000",
"delete": 0,
"created_at": "2022-04-04T20:04:15.000000Z",
"updated_at": "2022-04-04T20:04:15.000000Z",
"created_by": 1,
"updated_by": null,
"deleted_by": null
},
]
}
and for other example: /product_details/2
"product": {
"id": 2,
"name": "Table",
"description": "1.5m",
"quantity": 1,
"material_items": 1,
"material_cost": 50,
"waste_percentage": 2,
"waste_amount": 1,
"labour_percentage": 2,
"labour_amount": 1.02,
"equipment_cost": "20.000",
"other_percentage": 2,
"other_amount": 1.4404,
"margin_percentage": 2,
"margin_amount": 1.4692079999999998,
"sub_total": 74.929608,
"amount": 74.929608,
"created_at": "2022-04-07T13:15:20.000000Z",
"updated_at": "2022-04-09T13:21:54.000000Z",
"created_by": 1,
"updated_by": 1,
"deleted_by": null,
"deleted": 0
},
"product_materials": {
"11": {
"id": 12,
"product_id": 2,
"description": "Wood",
"quantity": 10,
"rate": "5.000",
"amount": "50.000",
"delete": 0,
"created_at": "2022-04-09T10:27:21.000000Z",
"updated_at": "2022-04-09T10:27:21.000000Z",
"created_by": 1,
"updated_by": null,
"deleted_by": null
}
}
}
$product_materials = product_materials::all()->where('product_id', $product->id);
getting the product materials based on product's id.
$product = product::find($id);
and in Vue.js
data() { return { product: {}, product_materials: [{}] }; },
CodePudding user response:
You are filtering the collection with where()
after you get all the product_materials from the DataBase.
Change it to this and it will solve your issue. aka apply the condition before getting the results from database (way better performance too)
$product_materials = product_materials::where('product_id', $product->id)->get();
CodePudding user response:
this is not related to vuejs, try to return the product_materials as array of objects even for one object
it should be like this
"product_materials": [
{
"id": 12,
"product_id": 2,
"description": "Wood",
"quantity": 10,
"rate": "5.000",
"amount": "50.000",
"delete": 0,
"created_at": "2022-04-09T10:27:21.000000Z",
"updated_at": "2022-04-09T10:27:21.000000Z",
"created_by": 1,
"updated_by": null,
"deleted_by": null
}
]