I'm getting some errors while passing data to the frontend, but when I return this $order then it shows a JSON data like this
[
{
"id": 1,
"customer_id": 3446467182106354,
"products": {
"1": {
"'name'": "Soap",
"'quantity'": "1"
},
"2": {
"'name'": "Shampoo",
"'quantity'": "1"
}
},
"total_amount": 798,
"status": "pending",
"created_at": "2020-10-21T08:51:15.000000Z",
"updated_at": "2020-10-21T08:51:15.000000Z"
}
]
But when I pass It to the front end it says like this
Property [products] does not exist on this collection instance. (View: C:\xampp\htdocs\blog\resources\views\customer\orders.blade.php)
by the way I've a json data in my database
looking at the json data u have mentioned in the question, Products is array of products and its in side main array.
you can access products this way...
make another foreach loop for products
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">Products</th>
<th scope="col">Total</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
#foreach ($orders as $order)
<tr>
#foreach{{$order->products as $product}}
<th>{{ $product->name }}</th>
#endforeach
<td>{{ $order->total }}</td>
<td>{{ $order->status }}</td>
</tr>
#endforeach
</tbody>
you need to loop over you cannot print collcetion so you need to update your controller and blade file like this
Controller
public function customerOrders($id)
{
$orders = Order::where('customer_id', $id)->get();
return view('customer.orders', compact('orders'));
}
blade
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">Products</th>
<th scope="col">Total</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
#foreach ($orders as $order)
<tr>
<th>
#foreach ($order->products as $product)
{{ $product['name'] }}
#endforeach
</th>
<td>{{ $order->total }}</td>
<td>{{ $order->status }}</td>
</tr>
#endforeach
</tbody>
</table>
like this you will get all the data
Before using this data you should use json_decode() function
Related
Im using the Jquery for pagination of my data tables and it is working great. However, when i add some AJAX script to load data without page refresh, the pagination function is not working anymore. Can anyone point out my mistake? my code is as below:
My table:
<table id="data-table" class="table table-striped border " style="width:100%">
<thead>
<tr>
<th>No</th>
<th>License Plate</th>
<th>Status</th>
<th>Time</th>
<th>Date</th>
</tr>
</thead>
<tbody>
#foreach($bg_records as $bg_record)
#if($bg_record -> status == 1)
<tr id="">
<th scope="row">{{ $loop->iteration }}</th>
<td>{{ $bg_record -> lp}}</td>
<td> PASS</td>
<td>{{ Carbon\Carbon::parse($bg_record->timestamp)->format('h:i:s')}}</td>
<td>{{ Carbon\Carbon::parse($bg_record->timestamp)->format('d-m-Y')}}</td>
</tr>
#else
<tr id="">
<th scope="row">{{ $loop->iteration }}</th>
<td>{{ $bg_record -> lp}}</td>
<td> FAILED</td>
<td>{{ Carbon\Carbon::parse($bg_record->timestamp)->format('h:i:s')}}</td>
<td>{{ Carbon\Carbon::parse($bg_record->timestamp)->format('d-m-Y')}}</td>
</tr>
#endif
#endforeach
</tbody>
</table>
My AJAX script to load the table without page refresh
<script type="text/javascript">
var delay = 1000;
var refreshId = setInterval(function () {
$('#data-table').load(' #data-table');
}, delay);
</script>
JQuery pagination script
<script>
$(document).ready(function () {
$('#data-table').DataTable();
});
</script>
I have a problem with laravel and vue about displaying the result from database table find method. What I don't quite understand is why the v-for directive parsing the json result incorrectly.
Here is the Vue code :
<template>
<table class="table table-hover">
<thead>
<tr>
<th>Class</th>
<th>Amount of Students</th>
<th>Teacher</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr v-for="classroom in classrooms" :key="classroom.id">
<td>{{ classroom.class_no }}•{{ classroom.field }}•{{ classroom.room_no }}</td>
<td>{{ classroom.amount_students }}</td>
<td>{{ classroom.teacher }}</td>
<td>
<a href="#">
<i class="fa fa-edit blue"></i>
</a>
</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
data () {
return {
classrooms : {
"success": true,
"data": { "id": 1, "class_no": 1, "field": "Architecture", "room_no": 4, "amount_students": 40, "teacher": "Bobby Fisher" },
"message": "Find Classroom Detail"
}
}
}
}
</script>
The json classrooms itself is actually the result from the controller :
public function show($level)
{
$classrooms = ClassRoom::where('class_no', $level)->firstOrFail();
return $this->sendResponse($classrooms , 'Find Classroom Detail');
}
And here is screenshot of the wrong result :
The result should be only a single row
Please help me to solve this problem.
Actually, as you are iterating over the classrooms which is an object having three keys, so the for loop is iterating over each key once.
If you only want to iterate over the data key then just return the data from the backend.
You can use a v-if condition to check whether the current key contains a class_no and if yes then display the row otherwise not.
<tr v-for="classroom in classrooms" :key="classroom.id" v-if="classroom.class_no">
<td>{{ classroom.class_no }}•{{ classroom.field }}•{{ classroom.room_no }}</td>
<td>{{ classroom.amount_students }}</td>
<td>{{ classroom.teacher }}</td>
<td>
<a href="#">
<i class="fa fa-edit blue"></i>
</a>
</td>
</tr>
Looking at your Vue data attribute, you want to use v-for="classroom in classrooms.data".
And if you are getting the data from API then you don't want to assign the full response to your classroom data attribute but assign response.data to classroom, so you can do
v-for="classroom in classrooms".
This will work unless your API returns data in a different format.
you can check on JsFiddle
https://jsfiddle.net/JManish/9qjvdy8n/2/
Make some changes in your classroom's data attribute.
<table class="table">
<thead>
<tr>
<th>Class</th>
<th>Amount of Students</th>
<th>Teacher</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr v-for="(classroom, index) in classrooms.data" :key="index">
<td>{{ classroom.class_no }}•{{ classroom.field }}•{{ classroom.room_no }}</td>
<td>{{ classroom.amount_students }}</td>
<td>{{ classroom.teacher }}</td>
<td>
<a href="#">
<i class="fa fa-edit blue"></i>
</a>
</td>
</tr>
</tbody>
</table>
new Vue({
el: '#app',
data() {
return {
classrooms: {
"success": true,
"data":[
{
"id": 1,
"class_no": 1,
"field": "Architecture",
"room_no": 4,
"amount_students": 40,
"teacher": "Bobby Fisher"
}
],
"message": "Find Classroom Detail"
}
}
}
})
Hope this will resolve your parsing issue.
I want to make a table in html with json data using laravel excel, the data looks like this
4 => {
+"id": 5
+"date": "2020-1-3"
+"grade": "7"
+"nama": "["bryan","anderson"]"
+"status": "["active","active"]"
}
the excel file output i was hoping for is
this. Status fill the column based on dates and if there is no data in particular date the column will filled with "-". I tried a foreach loop I found here, but did not have any luck.
I call the data with $reports, for example $reports->status will return ["active","active"] and so on.
This is the code i am working on
<table>
<thead>
<tr>
<th>No.</th>
<th>Name</th>
#for ($i = 1; $i < 32; $i++)
<th>{{ $i }}</th>
#endfor
</tr>
</thead>
<tbody>
#foreach ($reports as $rp)
<tr>
<td>{{ $loop->iteration }}</td>
<!--INSERT DATA HERE-->
<td></td>
</tr>
#endforeach
</tbody>
</table>
dd($reports) return =
array:2 [▼
0 => {#455 ▼
+"id": 17
+"date": "2021-01-03"
+"grade": "7"
+"nama": "["bryan","anderson"]"
+"status": "["active","active"]"
+"created_at": "2021-01-23 05:33:27"
+"updated_at": "2021-01-23 05:33:27"
}
1 => {#1414 ▶}
]
Try this following code;
<table border=1>
<thead>
<tr>
<th>No.</th>
<th>Name</th>
<th>Status</th>
</tr>
</thead>
<tbody>
#php $index=1; #endphp
#foreach ($reports as $rp)
#foreach ($rp->nama as $key => $val)
<tr>
<td>{{ $index }}</td>
<td>{{ $val }}</td>
<td>{{ optional($rp->status)[$key] }}</td>
</tr>
#php $index++; #endphp
#endforeach
#endforeach
</tbody>
</table>
I'm trying to add an image to a specific row. I have numerous of images that I'm trying to add to a table and this Google image keeps popping up in every row instead of just one. I have a snippet of the code where I'm adding the image and the parameters for each row. I was trying to add the image by doing {{link.img}} like the website, URL, and description but that didn't work either. Below is a snippet of the code that has a screenshot of what's printing out. I would like to get {{link.img}} working if possible so I can be consistent with all the other parameters, but if that's not feasible that's fine. Any assistance will be greatly appreciated. Thanks
image of table
LINKS = [
{
'id': uuid.uuid4().hex,
'img': "../assets/ipts.png",
},
{
'id': uuid.uuid4().hex,
'img': "../assets/express.png",
}
]
<table class="table table-hover">
<thead>
<tr>
<th scope="col"></th>
<th scope="col">Website</th>
<th scope="col">URL</th>
<th scope="col">Description</th>
<th></th>
</tr>
</thead>
<tbody>
<tr v-for="(link, index) in links" :key="index">
<!--<td>{{ link.img }}</td>-->
<td>
<img v-bind:src="link.img" width="21" height="21">
<img src = "../assets/google-logo.png" width="21" height="21">
</td>
<!--<td>{{ link.website }} </td>-->
<td>{{ link.website }}</td>
<td>{{ link.URL }}</td>
<td>{{ link.description }}</td>
<td></td>
</tr>
</tbody>
</table>
Use the object data keys without qoute sign as follows :
'id'=> id and ........
links = [
{
id: uuid.uuid4().hex,
img: "../assets/ipts.png",
},
{
id: uuid.uuid4().hex,
img: "../assets/express.png",
}
]
$matrix = \Matrix::instance();
$cal = $matrix->calendar('2014-06', 1);
I can not work out how to use data in $cal & get it to display in view
The calendar() method returns an array of weeks.
Here's a basic example:
index.php
$f3=require('lib/base.php');
$f3->route('GET /cal/#year/#month',function($f3,$params){
$f3->cal=Matrix::instance()->calendar($params['year'].'-'.$params['month'],1);
$f3->title=date('F Y',mktime(0,0,0,$params['month'],1,$params['year']));
echo Template::instance()->render('cal.html');
});
$f3->run();
cal.html
<h1>{{ #title }}</h1>
<table>
<thead>
<tr>
<th>Mo</th>
<th>Tu</th>
<th>We</th>
<th>Th</th>
<th>Fr</th>
<th>Sa</th>
<th>Su</th>
</tr>
</thead>
<tbody>
<repeat group="#cal" value="#week">
<tr>
<loop from="$d=0" to="$d<7" step="$d++">
<td>{{ ##week[ #d ] }}</td>
</loop>
</tr>
</repeat>
</tbody>
</table>
Now GET /cal/2014/06 should return something like: