I have three sample JSON file that I need to loop through. I was able to do two of them already, but the third one is missing. The idea is to go through it using the same logic as the first two.
Example 1 (Sales header)
Controller
$data1 = '[{
"T": {
"HD": {
"HD01": "1",
"HD06": "20201006033942",
"HD08": "3736803"
}
}
},
{
"T": {
"HD": {
"HD01": "2",
"HD06": "20201006035419",
"HD08": "7523658"
}
}
}]';
$json = json_decode($data1, true);
$head = collect($json)->map(function ($value) {
return $value["T"]["HD"];
});
return view('dashboard.book.index', [
'head' => $head
]);
Blade
<table class="table">
<tr>
<td> HD01</td>
<td> HD02</td>
<td> HD03</td>
<td> HD04</td>
<td> HD05</td>
<td> HD06</td>
</tr>
#foreach ($head as $value)
<tr>
<td>{{ $value['HD01'] }}</td>
<td>{{ $value['HD02'] }}</td>
<td>{{ $value['HD03'] }}</td>
<td>{{ $value['HD04'] }}</td>
<td>{{ $value['HD05'] }}</td>
<td>{{ $value['HD06'] }}</td>
</tr>
#endforeach
</table>
Result
Header
Example 2 (Detail of sale)
Controller
$data2 = '[{
"T": {
"SIEL" : {
"SIE" : [
{
"sequenceNumber" : 0,
"itemId" : "3010",
"itemDescription" : "BAN VACCINE COSTELLET",
"unitAmount" : 29950,
"quantity" : 1,405,
"subTotalAmount" : 42080,
"discountAmount" : 0,
"totalAmount" : 42080
},
{
"sequenceNumber" : 1,
"itemId" : "1010",
"itemDescription" : "CROLETA COOKIE",
"unitAmount" : 4800,
"quantity" : 0.605,
"subTotalAmount" : 2904,
"discountAmount" : 0,
"totalAmount" : 2904
}
]
}
}
},
{
"T": {
"SIEL" : {
"SIE" : [
{
"sequenceNumber" : 0,
"itemId" : "3010",
"itemDescription" : "BAN VACCINE COSTELLET",
"unitAmount" : 29950,
"quantity" : 1,405,
"subTotalAmount" : 42080,
"discountAmount" : 0,
"totalAmount" : 42080
},
{
"sequenceNumber" : 1,
"itemId" : "1010",
"itemDescription" : "CROLETA COOKIE",
"unitAmount" : 4800,
"quantity" : 0.605,
"subTotalAmount" : 2904,
"discountAmount" : 0,
"totalAmount" : 2904
}
]
}
}
}
]';
$json = json_decode($data2, true);
$details = collect($json)->map(function ($value) {
return $value["T"]["SIEL"]["SIE"];
});
return view('dashboard.book.index', [
'details' => $details
]);
Blade
<table class="table">
<tr>
<td> sequenceNumber</td>
<td> itemId</td>
<td> itemDescription</td>
<td> unitAmount</td>
<td> quantity</td>
<td> subTotalAmount</td>
<td> discountAmount </td>
<td> totalAmount </td>
</tr>
#foreach ($details as $items)
#foreach ($items as $key => $value)
<tr>
<td>{{ $value['sequenceNumber'] }}</td>
<td>{{ $value['itemId'] }}</td>
<td>{{ $value['itemDescription'] }}</td>
<td>{{ $value['unitAmount'] }}</td>
<td>{{ $value['quantity'] }}</td>
<td>{{ $value['subTotalAmount'] }}</td>
<td>{{ $value['discountAmount'] }}</td>
<td>{{ $value['totalAmount'] }}</td>
</tr>
#endforeach
#endforeach
</table>
Result
Details
Example 3 (Header more detail)
$data3 = '[
{
"T":{
"HD":{
"HD01":"1",
"HD02":"20201007",
"HD03":"1001",
"HD04":"15",
"HD05":140,
"HD06":"20201007062511",
"HD07":"",
"HD08":"3514401",
"HD09":"PYG",
"HD10":"PYG",
"HD11":"00000 A000005",
"HD12":"",
"HD13":"",
"HD14":"",
"HD15":"",
"HD16":"",
"HD17":"Insufficient Funds",
"HD18":"",
"HD19":"",
"HD20":"",
"HD21":0,
"HD22":"ICAE",
"HD23":false,
"HD24":false,
"HD26":0
},
"SIEL":{
"SIE":[
{
"sequenceNumber":0,
"itemId":"1159",
"itemDescription":"BREAD FOR PANCHO",
"unitAmount":3500,
"quantity":0.001,
"subTotalAmount":4,
"discountAmount":0,
"totalAmount":4
},
{
"sequenceNumber":1,
"itemId":"2098",
"itemDescription":"HAPPY DAY CAKE",
"unitAmount":28950,
"quantity":0.001,
"subTotalAmount":29,
"discountAmount":0,
"totalAmount":29
}
]
}
}
},
{
"T":{
"HD":{
"HD01":"1",
"HD02":"20201007",
"HD03":"1001",
"HD04":"15",
"HD05":141,
"HD06":"20201007063358",
"HD07":"",
"HD08":"3514401",
"HD09":"PYG",
"HD10":"PYG",
"HD11":"0010580000125",
"HD12":"",
"HD13":"",
"HD14":"",
"HD15":"",
"HD16":"",
"HD17":"",
"HD18":"",
"HD19":"",
"HD20":"",
"HD21":16100,
"HD22":"ICAE",
"HD23":false,
"HD24":false,
"HD26":-47
},
"SIEL":{
"SIE":[
{
"sequenceNumber":0,
"itemId":"1110",
"itemDescription":"STICK WITHOUT ANISE",
"unitAmount":9100,
"quantity":1.115,
"subTotalAmount":10147,
"discountAmount":0,
"totalAmount":10147
},
{
"sequenceNumber":1,
"itemId":"7841503001513",
"itemDescription":"TRIPACK CRACKER CLASS",
"unitAmount":6000,
"quantity":1,
"subTotalAmount":6000,
"discountAmount":0,
"totalAmount":6000
}
}
]
}
}
}
]';
$json = json_decode($data3, true);
$tickets = collect($json)->map(function ($value) {
return ????
});
So, I don't know how to put it in the return so that the data is sent and go through it as a single combined table
Example of how it should be:
Table
One possible solution would be to obtain all the keys from the JSON string and store those as a separate variable, then do something similar for the actual data.
So for example, to obtain all the keys from your JSON you could do the following:
$keys =
collect(json_decode($data)[0]->T->HD)
->merge(collect(json_decode($data)[0]->T->SIEL->SIE[0]))
->keys();
What this does is produce an array of just the JSON keys you're interested in making iterating over the keys nice and simple.
#foreach ($keys as $key)
{{ $key }}
#endforeach
As for your data, it would be a similar process but instead we're focusing on the values of the JSON rather than the keys.
$data = collect(json_decode($data))->map(function ($element) {
return collect($element->T->HD)->merge(collect(['SIE' => $element->T->SIEL->SIE]));
});
This results in a (somewhat flattened) collection of your data with all HD prefixed keys at the top level of each collection element and a sub collection of SIE elements.
[
"HD01" => 1,
"HD02" => 2,
...
"SIE" => [
[
"sequenceNumber":0,
"itemId":"1110",
"itemDescription":"STICK WITHOUT ANISE",
...
],
...
]
]
From here it should be a straight forward process of iterating over the data in your blade view to ouput it.
A functional example here.
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>
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!
I have an JSON as mentioned below:
[{
"_id": 1,
"Name": "x",
"Email": "z#epsilon.com ",
"Designation": "Manager",
"Project": "x",
"Skills": [{
"Technology": "Big Data- Hadoop, Hive, HDFS",
"Level": "Theoretical",
"TotalExperience": ""
},
{
"Technology": "Oracle PL/SQL",
"Level": "Intermediate",
"TotalExperience": ""
},
{
"Technology": "Informatica PowerExchange 8.x",
"Level": "Intermediate",
"TotalExperience": ""
},
{
"Technology": "IBM Datastage 7.5",
"Level": "Beginer",
"TotalExperience": ""
},
{
"Technology": "MS Word",
"Level": "Expert",
"TotalExperience": ""
},
{
"Technology": "USnit testing",
"Level": "Expert",
"TotalExperience": ""
}
]
}];
I want to show it as a tabular format in angular as Name, Project, Designation, Skills (Under skills: theoretical, expert, intermediate) and then the data.
I am able to achieve all but only skills which is an inner table am not able loop though correctly
Here, try this:
Template:
<table border="1">
<thead>
<td>Name</td>
<td>Project</td>
<td>Designation</td>
<td>Skills</td>
</thead>
<tbody>
<tr *ngFor="let datum of data">
<td>{{ datum.Name }}</td>
<td>{{ datum.Project }}</td>
<td>{{ datum.Designation }}</td>
<table border="1">
<thead>
<td>Theoritical</td>
<td>Beginer</td>
<td>Intermediate</td>
<td>Expert</td>
</thead>
<tbody>
<tr>
<td>{{ filterSkillBy(datum.Skills, 'Theoretical') }}</td>
<td>{{ filterSkillBy(datum.Skills, 'Beginer') }}</td>
<td>{{ filterSkillBy(datum.Skills, 'Intermediate') }}</td>
<td>{{ filterSkillBy(datum.Skills, 'Expert') }}</td>
</tr>
</tbody>
</table>
</tr>
</tbody>
</table>
Component:
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
name = 'Angular';
data = [...];
filterSkillBy(skills: any[], by) {
return skills.filter(skill => skill.Level === by).map(skill => skill.Technology).toString();
}
}
Here's a Sample StackBlitz for your ref.
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>