Consider my scenario, I have 2 lists coming from the service call, one list will be used as the table headings and another list will be used as the table data.
Something like this---
List 1 - [Name, Age]
List 2 - [Shubham, 25]
Table should look like -
Name Shubham
Age 25
Another example...
List 1 - [DOC1, DOC2]
List 2 - [Pending, Approved]
DOC1 Pending
DOC2 Approved
Can anyone help?
Try like this:
Working Demo
<table>
<ng-container *ngFor="let item of list1;let i = index">
<tr>
<td> {{list1[i]}}</td>
<td> {{list2[i]}}</td>
</tr>
</ng-container>
</table>
Related
I've used [row] attribute but still not working and when the data reflects on UI I want it in descending order. Can anyone please let me know how it is done without adding sorting Icon?
More
{{col.header}}
{{rowData[col.field]}}
</tr>
</ng-template>-->
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr [pSelectableRow]="rowData">
<td style="width:300px">{{rowData.atomName}} </td>
<td style="width:300px" (click)="show(rowData.message,op2.show($event))" pTooltip="View" tooltipPosition="top" tooltipStyleClass="custom-tooltip">
{{rowData.processName}}<!--</td>-->
<!--<td style="width:20px">-->
</td>
<td style="width:20px">
<!--{{rowData.executionTime}}-->
{{rowData.executionTime | date :'MM/dd/yyyy' }} ({{rowData.executionTime | date :'h:mm:ss a' }})
</td>
</tr>
</ng-template>
</p-table>
</p-panel>
</div>
It looks more like Angular Js than Angular 8 but if referring to Angular 8 -
Only possible solution to this is sort in the TS file using Array Sort (refer link - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort). and then display only 5 top results using *ngFor and index inside *ngFor.
I am working on a project using spring and angularJS.I am trying to view the data of a table on UI.
My problem is that I have array inside the array.So,I would like to binding data using angularJS . I have an array inside my output as the above example:
GET request:
{
id:"1",
fullName:"Name",
courses: [{
id:1,
title:"test"
}]}
}
If i use the {{customer.courses}} I get in my table this : {id:1, title:"test"}
But I would like to view only the title?
<tr ng-repeat="customer in customers">
<td>{{ customer.fullname}}</td>->fullName
<td>{{ customer.courses}}</td>->{id:1, title:"test"}
<tr>
I am trying making another ng-repeat =course in courses. But as a result I get all the title at each customer. How can I get the customer's course in order to view the data correctly?
I try also customer.courses[0] this but the result is the same and also customer.courses[1] but nothing appears...
If you want something like that :
FullName | Course1| Course 2
You can do :
<tr ng-repeat="customer in customers">
<td>{{ customer.fullname}}</td>
<td ng-repeat="course in customer.courses">{{course}}</td>
</tr>
If I have to print something like this --
Reason : reason number 1
reason number 2
reason number 3
Code : code number
Remarks : remark
So Reason, Code, and Remarks are headings, and thus I have them in tag, rest of the things such as - reason number 1, reason number 2, code number and remark are the values.
Now, If I use for the heading, the value automatically goes to a new line, What if I want to print them as key-values in a single line. How can I do so.
Preferably without float.
Try like this:
Working Demo
.html
<table border="1">
<ng-container *ngFor="let item of list1;let i = index">
<tr>
<td> {{list1[i]}}</td>
<td *ngIf="list2[i].length > 1">
<li *ngFor="let li of list2[i]">
{{li}}
</li>
</td>
<td *ngIf="list2[i].length <= 1">
{{list2[i]}}
</td>
</tr>
</ng-container>
</table>
.ts
list1 = ["Instructions ", "Reason Code "];
list2 = [["inst 1 ", "inst 2 "], ["Reason code is so and so"]];
Trying to format a table using Angular where:
If the day of the month changes, then you insert a new row which just contains the date (but also displays the data for that index value immediately below). If the day of the week is the same as before continue inserting the rows.
1) Clearly my code for accessing previous value in index is wrong but I can't seem to find anything clearly which helps.
2) I realise that my current code would compare the full datetime value and not just the day of the month (or week) but I am unsure how to do this in this scenario.
3) when the day changes and I try and insert the date line, I cannot get an additional new row formatted correctly which includes the data for that index value. I have tried playing around with various and combinations.
Please could someone help correct this code or point me in the right direction
Thanks
<table class="table-striped">
<thead>
<tr>
<td>day</td>
<td>time</td>
<td>region</td>
<td>event</td>
<td>period</td>
</tr>
</thead>
<tbody>
<tr *ngFor="let eco of eco_r ; let i = index">
<template [ngIf]="eco.date != eco[i-1].date">
<td colspan="5">{{eco.datetime| date:'longDate' }}</td>
<tr>
<td>{{eco.datetime | date:'EE'}}</td>
<td>{{eco.datetime | date:'shortTime'}}</td>
<td>{{eco.region}}</td>
<td>{{eco.event}}</td>
<td>{{eco.period}}</td>
</tr>
</template>
<template [ngIf]="eco.date == eco[i-1].date">
<td>{{eco.datetime | date:'EE'}}</td>
<td>{{eco.datetime | date:'shortTime'}}</td>
<td>{{eco.region}}</td>
<td>{{eco.event}}</td>
<td>{{eco.period}}</td>
</template>
</tr>
</tbody>
</table>
------------UPDATE ---------------
Following #Iancovici comments I have revised the following
i) corrected to reference eco_r[i-1].date
ii) Changed sql source to provide eco.day_of_month and eco.week_of_year to make it easier to reference and check conditions
iii) updated code to only check previous value when i > 0
I am still unable to get it to display a new line with the date AND also include the data for that value of i on a separate row where it formats correctly. Utilising as in my revised code puts all 5 values into the first column of the next row and messes put the table format. How should I resolve this please?
Thanks
<template [ngIf]="i >0 && eco.day_of_month != eco_r[i-1].day_of_month">
<tr><td colspan="5">{{eco.datetime| date:'longDate' }}</td>
</tr>
<tr> <td>{{eco.datetime | date:'EE'}}</td>
<td>{{eco.datetime | date:'shortTime'}}</td>
<td> {{eco.region}} </td>
<td>{{eco.event}}</td>
<td>{{eco.period}}</td>
</tr>
</template>
Should probbly be *ngIf not [ngIf] in general. But I see in your case it’s ok because you’re using an ng template which means instead of directive *ngIf it’s not a bonded property [ngIf]
Also you're accesing the same instance, should access index of array instead so..
change from
*ngIf="eco.date == eco[i-1].date">
to
*ngIf="eco.date == eco_r[i-1].date">
Update: Two more notes
Make sure you create a table, with tag
Don't be afraid to use paranthesis if conditonal expressions become more complex, so you can distinguish the two conditions.
Try this without the filters, then integrate the filters in.
<table>
<div *ngFor="let eco of eco_r; let i = index">
<div *ngIf="(i > 0) && (eco.day_of_month != eco_r[i-1].day_of_month)">
<tr>
<td colspan="5">{{eco.datetime }}</td>
</tr>
<tr>
<td>{{eco.datetime }}</td>
<td>{{eco.datetime }}</td>
<td> {{eco.region}} </td>
<td>{{eco.event}}</td>
<td>{{eco.period}}</td>
</tr>
</div>
</div>
</table>
The JSON I am getting back from the API is nested FIRST by field (i.e. table columns), THEN by record(i.e. table rows). So, the JSON looks like this:
myJSON = {
'data':{
'id': [1,2,3],
'groks':['a','b','c']
}
}
I'm trying to use angular to display them correctly in my table. This is how they're supposed to look:
id groks
1 a
2 b
3 c
It's not as simple as
<tbody ng-repeat="x in myJSON.data">
<tr>
<td>{{x[0]}}</td>
<td>{{x[1]}}</td>
</tr>
</tbody>
Because I'll end up with this, or somesuch:
id groks
a b
1 2
So, how do I tell the ng-repeat to FIRST iterate through the inner rows, THEN through the outer columns?
The long way is to pre-manipulate the JSON into a format that can be iterated. i.e. I need to manipulate the data until it looks like this:
myJSON = {
'data':{
['id': 1,'groks':'a'],
['id': 2,'groks':'b'],
['id': 3,'groks':'c']
}
}
And then I can do this:
<tbody ng-repeat="x in myJSON.data">
<tr>
<td>{{x.id}}</td>
<td>{{x.groks}}</td>
</tr>
</tbody>
But do I have any alternate options?
You can just iterate over one of the arrays and use $index to get the corresponding elements in any other arrays:
<tbody ng-repeat="id in myJSON.data.id">
<tr>
<td>{{id}}</td>
<td>{{myJSON.data.gorks[$index]}}</td>
</tr>
</tbody>