How to generate dynamic table columns on view - mysql

I need to generate this kind of table from a database table.
this is an output collection from my query
[{delivery_date: "2019-01-09", delivery_count: "5", price: "190.00", total_price: "950.00"}
{delivery_date: "2019-01-10", delivery_count: "45", price: "170.00", total_price: "7650.00"}
{delivery_date: "2019-01-10", delivery_count: "2", price: "50.00", total_price: "100.00"}
{delivery_date: "2019-01-10", delivery_count: "3", price: "60.00", total_price: "180.00"}
{delivery_date: "2019-01-10", delivery_count: "3", price: "185.00", total_price: "555.00"}
{delivery_date: "2019-01-16", delivery_count: "6", price: "50.00", total_price: "300.00"}]
and this is how I query the table
$deliveries = DB::table('deliveries')
->where('user_id',Auth::id())
->groupBy('price','delivery_date')
->orderBy('delivery_date')
->select('delivery_date',DB::raw('SUM(number) as delivery_count'),'price', DB::raw('SUM(number*price) as total_price'))
->get();
and this is how I display the data
<table class="display table table-condensed table-bordered">
<thead>
<th>Date</th>
#foreach($deliveries as $delivery)
<th>{{$delivery->price}}</th>
#endforeach
</thead>
<tbody>
#foreach($deliveries as $delivery)
<tr>
<td>{{ $delivery->delivery_date }}</td>
#if($delivery->price = $deliveries[$i]->price)
<td>{{ $delivery->delivery_count }}</td>
#else
<td>0</td>
#endif
</tr>
#endforeach
</tbody>
</table>
this is what I get from my view
I am stuck here and still trying to figure out how to do it.. Please help.
Thanks guys!

Related

Iterate over object and display it in table Angular (array in array)

I have an api that returns this json.
Student = [
{"name": "Maha",
"age": "18",
"sibling": []
},
{"name": "Jensen",
"age": "19",
"sibling": [{"age": "22", "name": "JensenBrotherName"}]
},
{"name": "Matteo ",
"age": "19",
"sibling": [{"age": "27", "name": "MatteoBrotherName"}]
},
{"name": "Sumayya",
"age": "18",
"sibling": [{"age": "22", "name": "SumayyaBrotherName"}, {"age": "24", "name": "SumayyaBrotherName2"}]
},
{"name": "Caris",
"age": "18",
"sibling": [{"age": "22", "name": "CarisBrotherName"}, {"age": "24", "name": "CarisBrotherName2"}]
}
]
I am trying to display this data in a grid like this image
For the sibling column, I am trying to only display the names without age.
Things that I tried -
Student.sibling showed [object] [object]
And,
nested ngFor like
<div *ngFor ="let item of Student">
<div *ngFor ="let name of item.sibling">
{{name.name}}
</div>
</div>
and it displays all the siblings names for every student like
How can I do this in Angular?
The data provided won't produce the output you've specified.
I'm not sure what you mean by an "Angular" way of iterating through the data, but here's one example:
<table>
<caption>
Students
</caption>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Sibling</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let student of students">
<td>{{ student.name }}</td>
<td>{{ student.age }}</td>
<td>
<ng-container *ngFor="let sibling of student.sibling; let last = last">
{{ sibling.name }} ({{ sibling.age }})<ng-container *ngIf="!last"
>,
</ng-container>
</ng-container>
</td>
</tr>
</tbody>
</table>
Which produces the output visible in this Stackblitz

Nothing displayed in *ngFor angular

i have this json file :
{
"id": 1276,
"etabName": "YAssineDev",
"etabType": "OUR_SCHOOL",
"users": [
{
"id": 12,
"username": "YassineDev",
"firstName": "yassine",
"lastName": "messaoud",
"active": true,
"payant": false,
"creatdateTime": "2021-06-08",
"roles": [
{
"id": 2,
"roleName": "ADMIN_USER",
"description": "admin user"
}
]
}
]
},
i want to display the username of the users tab in the html,
i have tried with *ngFor:
<tbody>
<tr *ngFor="let t of tabs.users">
<td>{{ t.username }}</td>
</tr>
</tbody>
getMethod
dataEtabUser() {
this.cr.getdataEtab().subscribe(data=> {
this.tabs = data
})
}
ngOnInit
this.dataEtabUser()
but nothing displayed
Assuming the dataEtabUser() works correctly
<div *ngFor="let t of tabs">
<tbody *ngFor="let user of t.users">
<tr *ngFor="let data of user">
<td>{{ data.username }}</td>
</tr>
</tbody>
</div>

How to create Nested Table in Angular?

I am creating a dynamic table with the data array
let data = [{
"criterialimitId": "3",
"criteriaName": "Test",
"criteriaId": "1",
"criteria": "Max Wager",
"type": "DAILY",
"oprLimit": "2.5",
"status": "1",
"action": "SALE_HOLD",
"plrLimitAllowed": "YES",
"createdAt": "2020-09-22 13:30:02.0",
"updatedAt": "2020-09-22 13:30:02.0",
"attributes": [{
"serviceId": "1",
"serviceName": "Draw Game",
"providers": [{
"providerId": "1",
"providerName": "IGT",
"games": [{
"gameId": "1",
"gameName": "LOTTO"
},
{
"gameId": "2",
"gameName": "LOTTO2"
}
]
},
{
"providerId": "2",
"providerName": "ABC",
"games": [{
"gameId": "2",
"gameName": "AB1"
},
{
"gameId": "23",
"gameName": "AB2"
}
]
}
],
"type": "DAILY",
"status": "1",
"createdAt": "2020-09-22 13:30:03.0",
"updatedAt": "2020-09-22 13:30:03.0"
}]
}]
console.log(data)
I want a table like this:
But I am getting the output like this:
Should I use nested table? How to achieve this?
This is my code so far.
.................
....................
..........................
............................
I don't know what more to explain. #stackoverflow is not letting me post my question because "It looks like your post is mostly code; please add some more details." what more details are required? If anybody can assist, it would be helpful.
<table style="table-layout: fixed;" class="table table-bordered">
<thead>
<tr>
<th class="text-center align-middle">Service Name</th>
<th class="text-center align-middle">Provider Name</th>
<th class="text-center align-middle">Game Name</th>
</tr>
</thead>
<tbody>
<ng-container *ngFor="let attribute of data.attributes">
<tr>
<td>{{attribute.serviceName}}</td>
<td>
<tr *ngFor="let provider of attribute.providers">
<td>
{{provider.providerName}}
</td>
</tr>
</td>
<td>
<tr *ngFor="let provider of attribute.providers">
<td *ngFor="let game of provider.games">
{{game.gameName}} <br>
</td>
</tr>
</td>
</tr>
</ng-container>
</tbody>
</table>
I solved it like this :
<table style="table-layout: fixed;" class="table table-bordered">
<thead>
<tr>
<th class="text-center align-middle">{{'criteriaLimit.serviceName' | translate}}</th>
<th class="text-center align-middle">{{'criteriaLimit.providerName' | translate}}</th>
<th class="text-center align-middle">{{'criteriaLimit.gameName' | translate}}</th>
</tr>
</thead>
<tbody>
<ng-container *ngFor="let attribute of data.attributes; let i = index;">
<ng-container *ngFor="let provider of attribute.providers; let j = index">
<ng-container *ngFor="let game of provider.games; let k = index">
<tr>
<td class="text-center align-middle" *ngIf="j==0 && k==0" [attr.rowspan]="calculateSpan(i)">{{attribute.serviceName}}</td>
<td class="text-center align-middle" *ngIf="k==0" [attr.rowspan]="provider.games.length">{{provider.providerName}}</td>
<td class="text-center align-middle" >{{game.gameName}}</td>
</tr>
</ng-container>
</ng-container>
</ng-container>
</tbody>
</table>

Laravel selecting decoded json variables from multiple with

Say I retrieved the following from the database by using Eloquent 'with'.
Something like Debitur::find(7)->with('teleponDebitur')->first();
Here is how the data is structured:
{
"id": 7,
"user_id": 26,
"nama": "Mr. Zachery Wisoky",
"alamat": "44967 Anissa Parkways Apt. 262\nSelmerland, MS 41916-7633",
"tanggal_lahir": "1997-04-19",
"tempat_lahir": "51697 Jakubowski Freeway Apt. 414\nLake Sydneeshire, OR 11599",
"no_ktp": "41",
"created_at": "2018-07-16 02:49:34",
"updated_at": "2018-07-16 02:49:34",
"telepon_debitur": [
{
"id": 21,
"debitur_id": 7,
"no_telepon": "6",
"created_at": "2018-07-16 02:51:17",
"updated_at": "2018-07-16 02:51:17"
},
{
"id": 32,
"debitur_id": 7,
"no_telepon": "8701",
"created_at": "2018-07-16 02:51:18",
"updated_at": "2018-07-16 02:51:18"
}
]
}
Then I decode the json:
$value = json_decode($data);
#foreach($value->data as $var)
<tr>
<td>{{ $var->id }}</td>
<td>{{ $var->nama }}</td>
<td>{{ $var->alamat }}</td>
<td>{{ $var->telepon_debitur[0]->no_telepon }}</td> ????
</tr>
It was fine, but I have no idea how to access the value 'no_telepon' inside 'telepon_debitur'?
write another loop..seems like telepon_debitur define as hasMany relation in your Debitur model
#foreach($value->data as $var)
<tr>
<td>{{ $var->id }}</td>
<td>{{ $var->nama }}</td>
<td>{{ $var->alamat }}</td>
#foreach($var->telepon_debitur as telepon)
<td>{{ $telepon->no_telepon }}</td>
</tr>
I found the solution to access without foreach by going through $var->telepon_debitur[0]->no_telepon

ng-repeat with a big JSON

I have an AngularJS variable var vm = this; which contains a big JSON format data:
vm.data = {
"sites": [{
"siteName": "A",
"countries": [{
"country": "DE",
"servers": [{
"serverType": "master",
"URL": ""
},{
"serverType": "slave",
"URL": ""
}]
}]
},{
"siteName": "B",
"countries": [{
"country": "IT",
"servers": [{
"serverType": "master",
"URL": ""
},{
"serverType": "slave",
"URL": ""
}]
},{
"country": "NL",
"servers": [{
"serverType": "master",
"URL": ""
},{
"serverType": "slave",
"URL": ""
}]
}]
}]
};
I want to put this data in a table
I use "c" because of the the "controller (which is the name of my controller) as c".
<tr ng-repeat="site in c.data.sites">
<td>{{ site.siteName }}</td>
<td>{{ site.countries }}</td>
<td>{{ site.countries.name }}</td>
</tr>
The first td works perfectly, the second displays everything that is contained in the countries set, and the last doesn’t display anything.
I tried to declare vm.data.sites.countries, but it failed.
Can you shed some light on this?
Your countries is an array, so if you want to list every country you can access every name of the country objects (your name attribute for a country object is country) with a new loop (ng-repeat).
<tr ng-repeat="site in c.data.sites">
<td>{{ site.siteName }}</td>
<td>{{ site.countries }}</td>
<td>
<span ng-repeat="country in site.countries>
{{country.country}}
<span ng-if="!$last">, </span>
</span>
</td>
</tr>
Well you're not really referencing your keys appropriately.
<tr ng-repeat="site in c.data.sites">
<td>{{ site.siteName }}</td>
<td>
<span ng-repeat="country in site.countries">
{{ country.country }}
<span ng-hide="$last">, </span>
</span>
</td>
</tr>