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
    }
]