In my database, there is a cell called line_items in the orders table that contains data like:
[
{"customer_id":"30","product_id":"10","unit_id":"2","quantity":"1","price":"2700","total_price":"2700"},
{"customer_id":"30","product_id":"43","unit_id":"1","quantity":"5","price":"7","total_price":"35"}
]
Additionally, I have a products table where the product names are stored in a cell called name. The product_id in the data above corresponds to the IDs in the products table.
Now, there is a route set up like:
Route::get('json/{order}', 'ReturnController@json')->name('json');
Below is the json function in the ReturnController:
public function json(Order $order)
{
return response()->json([ 'orders' => $order ]);
}
When accessing the route, the json output is as follows:
{"order":{"id":7,"company_id":1,"order_type":1,"order_no":"12","date":"2019-01-16","status":"1","transaction_raw":[{"amount":"82264","transaction_type":3,"payment_type":1,"owner_type":"App\\Model\\Customer","owner_id":"1"},{"amount":"0","transaction_type":4,"payment_type":1,"owner_type":"App\\Model\\Customer","owner_id":"1","account_head_id":1}],"line_items":[{"customer_id":"1","product_id":"10","unit_id":"2","quantity":"5","price":"2700","total_price":"13500"},{"customer_id":"1","product_id":"43","unit_id":"1","quantity":"52","price":"7","total_price":"364"},{"customer_id":"1","product_id":"9","unit_id":"2","quantity":"18","price":"3800","total_price":"68400"}],"total":82264,"discount":0,"sub_total":82264,"paid":0,"due":82264,"supplier_id":0,"customer_id":1,"others_fin":"{\"transport\":\"0\",\"type\":\"income\"}","created_at":"2019-01-16 19:13:27","updated_at":"2019-01-16 19:13:27"}}
For the vue code, we have:
<tr v-for="order in orders.line_items">
<td><input name="" v-model="order.product_id"></td>
<td><input name="" v-model="PRODUCT NAME"></td>
<td><input name="" v-model="order.quantity"></td>
<td><input name="" v-model="order.price" disabled></td>
<td><input name="" v-model="order.quantity * order.price"></td>
</tr>
To display the product name from the product table where it says PRODUCT NAME, you can use both the Product and Order models available.