$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:
Related
Can I use an ngFor instead of repeating <table> two times?
NB: I thought to combine all the items into objects as items of a single array of mapping(each object contains a variable, label and value) but it does not work for me)
....
this.maxValueTable.push(selectedData.res.maxValue);
this.minValueTable.push(selectedData.res.minValue);
...
<div style="display: flex;">
<table style="width:100%;">
<thead>
<tr>
<th>Max</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let maxValue of maxValueTable">
<td> {{ maxValue | numberFormatter: (getUnit() | async)}}</td>
</tr>
</tbody>
</table>
<table style="width:100%;">
<thead>
<tr>
<th>Min</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let maxValue of minValueTable">
<td> {{ MinValue| numberFormatter: (getUnit() | async)}}</td>
</tr>
</tbody>
</table>
</div>
Another way:
<!--create an array directly in the .html: you can also use
a variable in your .ts-->
<table *ngFor="let table of [{head:'Max',data:maxValueTable},
{head:'Max',data:maxValueTable}]
style="width:100%;">
<thead>
<tr>
<!--use table.head-->
<th>{{table.head}}</th>
</tr>
</thead>
<tbody>
<!--see how iterate over table.data-->
<tr *ngFor="let maxValue of table.data">
<td> {{ maxValue | numberFormatter: (getUnit() | async)}}</td>
</tr>
</tbody>
</table>
If your arrays has the same length and only want a table, iterate over one array ans use the index to get the value of the another one
<table style="width:100%;">
<thead>
<tr>
<th>Max</th>
<th>Min</th>
</tr>
</thead>
<tbody>
<!--see the "let i=index"-->
<tr *ngFor="let maxValue of maxValueTable;let i=index">
<td> {{ maxValue | numberFormatter: (getUnit() | async)}}</td>
<!--use the "index" "i" to get the element of the another array-->
<td>
{{ minValueTable[i] | numberFormatter: (getUnit() | async)}}
</td>
</tr>
</tbody>
</table>
in this case you can also use map to create a new Array
minMax=this.minValueTable.map((x,index)=>({
min:x,
max:this.maxValueTable[index]
}))
And use {{value.min}} and {{value.max}}
You can create a function that will combine min and max values into an array like that:
mergeIntoArray(maxValue: Array<number>, minValue: Array<number>): IMergedObj[] {
let mergedArray = [];
maxValue.forEach((value, index) => {
let tempObj = {};
tempObj['maxValue'] = value;
tempObj['minValue'] = minValue[index];
mergedArray.push(tempObj);
});
return mergedArray;
}
and call this function like that:
let minAndMax = [];
this.minAndMax = this.mergeIntoArray(this.maxValueTable, this.minValueTable);
after that, use this variable (minAndMax) in your HTML template. This way you do not need to use ngFor twice.
<table style="width:100%;">
<thead>
<tr>
<th>Max</th>
<th>Min</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of minAndMax">
<td>{{ item.maxValue }}</td>
<td>{{ item.minValue }}</td>
</tr>
</tbody>
</table>
Here is the stackblitz link created for you. Hope that might help you.
You can use *ngTemplateOutlet for this case:
<div style="display: flex;">
<ng-container *ngTemplateOutlet="tableTemplate; context: {$implicit: maxValueTable, header: 'Max'}"></ng-container>
<ng-container *ngTemplateOutlet="tableTemplate; context: {$implicit: minValueTable, header: 'Min'}"></ng-container>
</div>
<ng-template #tableTemplate let-values, let-header="header">
<table style="width:100%;">
<thead>
<tr>
<th>{{ header }}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let value of values">
<td> {{ value | numberFormatter: (getUnit() | async) }}</td>
</tr>
</tbody>
</table>
</ng-template>
And you will get the same table rendered twice - for Max and Min values.
As you can see, the arguments are passed as a second argument inside ngTemplateOutlet:
context: {$implicit: valuesArgument, header: headerArgument}
Later you could use this template to create infinite amount of tables:
<div *ngFor="let table of tables">
<ng-container *ngTemplateOutlet="tableTemplate; context: {$implicit: table.values, header: table.header}"></ng-container>
</div>
Assuming your tables property will look like
export class C {
tables: Table[] = [{header: 'Min', values: [1, 2, 3]}, {header: 'Max', values: [4, 5, 6]}, {header: 'Other', values: [0, -1, -2]}]
}
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 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 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
I have an array booksArr of objects of class book.
book.ts class
export class Book{
bookId:number;
bookName:string;
cost:number;
quantity:number;
constructor(bookId, bookType, cost, quantity){
this.cost=cost;
this.bookId=bookId;
this.bookName=bookName;
this.quantity=quantity;
}}
booksArr in books-list.component.ts
booksArr: book[] = [
new book(100, "The Alchemist", 20, 1),
new book(101, "Rich Dad Poor Dad", 50, 2),
new book(102, "Charolett's Web", 10, 1),
new book(103, "Harry Potter", 70, 4),
new book(104, "Gone Girl", 150, 3),
];
I want to create a table in html to display the details of these books.
books-list.component.html
<table border="1" *ngIf="bName">
<thead>
<tr>
<th>book ID</th>
<th>book Name</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let b of booksArr">
<td *ngIf="b.//WHAT SHOULD I PUT HERE"</td>
</tr>
</tbody>
</table>
You are already iterating through the booksArr.just need to use interpolation to display the data. Try like this
<table border="1" *ngIf="bName">
<thead>
<tr>
<th>book ID</th>
<th>book Name</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let b of booksArr">
<td>{{b.bookId}}</td>
<td>{{b.bookName}}</td>
</tr>
</tbody>
</table>
You are already iterating the array of books with *ngFor="let b of booksArr".
You want to now interpolate the values from each book in the array. When you are inside the array, you have access to the loop variable you declare in *ngFor. In this case the loop variable is b. You can now bind to the properties on b using curly brace interpolation. {{b.bookId}}.
<table border="1" *ngIf="bName">
<thead>
<tr>
<th>book ID</th>
<th>book Name</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let b of booksArr">
<td>{{b.bookId}}</td>
<td>{{b.bookName}}</td>
</tr>
</tbody>
</table>
Try:
<td> {{ b.bookId }} </td>
<td> {{ b.bookName }} </td>
No *ngIf is required in this case. Just try the following
<tbody>
<tr *ngFor="let b of booksArr">
<td>{{b.bookId}}</td>
<td>{{b.bookName}}</td>
</tr>
</tbody>
And in your .ts file you should either change
constructor(bookId, bookName, cost, quantity)
Or
this.bookName=bookType;
inside your constructor