Develop Reference

How can i display next elements in ngfor after click in table row?

I have a nested array of objects , so i am trying to display in table row only first 3 elements in array and after i am displaying remaining elements in array as a count (i.e +2).Now if i click on remain count i need to display all the elements in array on particular row click.
I am attaching the stack blitz URL for reference :- https://stackblitz.com/edit/primeng-chip-demo-agf8ey?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts
Please help me on these issue.
Thanks in advance

try this:
<p-chip
*ngFor="let cc of slice(c); let i = index"
[label]="cc.name"
></p-chip>
in .ts file
onChip(val: any) {
this.chips[val].extand = true;
}
slice(cc: any, index: number) {
if(cc?.extand) {
return cc.values;
}
return cc.values.slice(1,3);
}
also add to every object extand: false
chips = [
{
id: 1,
values: [
{
name: 'one',
},
{
name: 'two',
},
{
name: 'three',
},
{
name: 'four',
},
{
name: 'five',
},
],
extand: false
},]

Create a template variable:
<h5>Basic</h5>
<div class="p-d-flex p-ai-center">
<table>
<tr>
<th>Id</th>
<th>Chips</th>
</tr>
<tr *ngFor="let c of chips; let val = index">
<td>{{ c.id }}</td>
<td #myCell>
<ng-container *ngIf="myCell.showAll">
<p-chip *ngFor="let cc of c.values" [label]="cc.name"></p-chip>
</ng-container>
<ng-container *ngIf="!myCell.showAll">
<p-chip
*ngFor="let cc of c.values | slice: 0:3"
[label]="cc.name"
></p-chip>
<p-chip
styleClass="chipMore"
*ngIf="c.values.length >= 3"
(click)="myCell.showAll = !myCell.showAll"
>+{{ c.values.length - 3 }}</p-chip
>
</ng-container>
</td>
</tr>
</table>
</div>
Play at edited stackblitz: https://stackblitz.com/edit/primeng-chip-demo-ykmg3t?file=src/app/app.component.html

From nested JSON to table with rowspan Angular

I tried to make a table with my nested JSON get from an api. I don't know how to dynamically merge my cells when necessary knowing that my JSON can be nested up to 6 or 7 times.
What I want :
Table I want
What I got :
Table I got
My TS file :
questionnaire = [
{
title : "theme1",
children : [{
title : "theme2",
children : [
{
title : "theme3",
children : []
},
{
title : "theme4",
children : []
},
]
}]
},
{
title : "theme5",
children : [
{
title : "theme6",
children : []
},
{
title : "theme7",
children : []
},
]
},
]
My component.html :
<ng-container *ngFor="let periode of questionnaire">
<br>
<table>
<tr>
<td>{{ periode.title }}</td>
<td *ngFor="let theme of periode.children">
{{ theme.title }}
</td>
</tr>
</table>
</ng-container>

Generating your tables via a recursive function and then setting the restulting HTML via [innerHTML] would be a good call.
The recursive function would need not only return its corresponding HTML part of the table but also how many rows it contains. That way you can utilise the rowspan Attribute whenever there are children.

Dots in bracket to access nested property

Consider the object below:
var item = {
id: 'some-id',
price: 12,
customer: {
id: 'fake-id',
name: 'fake-name'
}
};
We can access the customer name using "dots" or "brackets" as below:
item.customer.name
item['customer'].name
item.customer['name']
item.['customer']['name']
Question
In Javascript or Typescript, is there a way to access customer name like the following?
item['customer.name'] or item[customer.name]
Notes
In angular I created a reusable table component based on the mat-table, which includes pagination, sort filter and bunch of other functions... I use the following for the column definitions:
mytable.component.ts:
export interface MyTableCol {
id: string;
title: string;
// some other settings...
}
mypage.component.ts:
cols: MyTableCol[] = [
{id: 'price', title: 'Total Price'},
{id: 'customer.name', title: 'Customer Name' }
];
mypage.component.html:
<my-table [columns]="cols"></my-table>
mytable.component.html:
<ng-container [matColumnDef]="col.id" *ngFor="let col of columns">
<th mat-header-cell *matHeaderCellDef mat-sort-header>
{{ col.title}}
</th>
<td mat-cell *matCellDef="let element">
{{ element[col.id] }}
</td>
</ng-container>
However, for the nested properties (customer.name) this won't work. I think the reason is the line: element[col.id] converts to element['customer.id'] in case of the customer name column.
How can I resolve this?

It won't work automatically to pass a string like that to access the properties, you need to create a getter function like lodash _get and use it to find the value you need. And then write something like:
{{ _getAtr(element, col.id) }}

Populate a table with empty and correct data with ng-repeat angularjs

I'm triying to display some data from an returned array in a $http.get request, but the problem is that some parts of the data is empty that's because for some of the employees are existing records for some others no
something like this
data = [
{'name':'Peter',age:'32',sex:'male'},
{'name':'Josh',age:44}...
]
I tried to create empty array to fill the empty cells but those seens to work
let ordened_list = response.data
$scope.total_list = ordened_list.map(items=>{
return {
name: items.name,
lastname: items.lastname,
age: items.age,
sex: items.sex
})
<tr ng-repeat="(key,valores) in set_array | filter:buscarEmpleado | groupBy : 'nombre' ">
<td class="text-left">{{key}}</td>
<td class="text-right" ng-repeat="ft in valores | filter:{rubro_cod:'1'}">
<table>
<tr>
<td>{{ft.valor|number:2}}</td>
</tr>
</table>
</td>
</tr>

Yajra/Laravel-datatables setting alias for table header

I have list of products under some category and if I click on category sorting then it shows same category and product name. It is happening only with the category sorting. Other sorting are working perfectly. I am stuck here and unable to resolve this also I have no Idea why category.name is being used. If I changes this to category_name then category sorting stops working. I've tried everyhting.
How can I use Alias for category name?? And in which file do I need to make changes.
var table = $('#product-table').DataTable({
processing: true,
serverSide: true,
bStateSave: true,
ordering: true,
dom: 'Bfrtip',
buttons:[],
ajax: '{{ URL::to('/admin/products.data') }}',
order: [[1, 'asc']],
columnDefs: [
{ orderable: false, targets: 0 }
],
columns: [
{data: 'edit', name: '', searchable:false},
{data: 'name', name: 'name'},
{data: 'product_code', name: 'product_code'},
{data: 'category_name', name: 'category.name'},
{data: 'impa_code', name: 'impa_code'},
{data: 'issa_code', name: 'issa_code'},
{data: 'status', name: 'is_active'}
],
"deferRender": true
});
**This is my blade file**
`<div class="row clearfix">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 m-t-50">
<div class="card">
<div class="body">
<table class="table table-striped table-hover dataTable" id="product-table">
<thead>
<tr>
<th class="col-sm-1"></th>
<th>{{ Lang::get('views.name') }}</th>
<th>{{ Lang::get('views.shipskart_code') }}</th>
<th>{{ Lang::get('views.category_name') }}</th>
<th>{{ Lang::get('views.impa_code') }}</th>
<th>{{ Lang::get('views.issa_code') }}</th>
<th>{{ Lang::get('views.status') }}</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>`
This is Controller
` ->editColumn('product_code', function ($product) {
$productCode = $product['product_code'];
return $productCode;
})
->addColumn('category_name', function ($product) {
return empty($product->category) ? 'N/A' : $product->category->name ;
})
->editColumn('impa_code', function ($product) {
$impaCode = $product->impa_code;
return $impaCode;
})
->editColumn('issa_code', function ($product) {
$issaCode = $product->issa_code;
return $issaCode;`

I believe that is Laravel datatable
If it is a naming issue
and you want to change just the header name to be category.name or anything else .. in the blade view that is showing the table, you should find the headers and you can change it from there accordingly.
change this line
<th>{{ Lang::get('views.category_name') }}</th>
to
<th>{{ the new name }}</th>
or if you want it to reflect the language code also, you need to amend your language files.
Go to the Views, in the specific language that you want to change and update the category_name file
like for example, if you want to change the category_name to CAT title in en language .. go to /resources/lang/en or wherever you are saving your lang/en folder and amend the line
'category_name' => 'CAT title'
If it is a data issue
and it is not reflecting the data that you are expecting, always check the link that is producing this issue and in your case
/admin/products.data
from there you can know what exactly are coming through so you can show it in your table accordingly .. you can check the DataTable Manual
so if you are receiving product array which has a key called name .. that is going to be a product.name in the same way JavaScript is reading the the json.