In a table I want to display the following items in a single Row. Can someone help me out loop the JSON so I can rearrange the items as shown below.
StudentId | CourseTitle | TextbookName
23 | Biology | Biology Today
JSON
{
"studentId": 23,
"course": [{
"courseTitle": "Biology",
"textBook": 1,
"TextBooks": {
"textbookId": 1,
"textbookName": "Biology Today"
}
}, ... ]
}
CODE
<table class="table">
<tbody>
<tr *ngFor="let student of this.listOfStudents">
<td >{{student ?.studentId}}</td>
</tr>
</tbody>
</table>
If I got it right, try following:
<table class="table">
<tbody>
<ng-container *ngFor="let student of this.listOfStudents">
<tr *ngFor="let course of student.course">
<td>{{ student.studentId }} | {{ course.courseTitle }} | {{ course.TextBooks.textbookName }}</td>
</tr>
</ng-container>
</tbody>
</table>
Related
I am developing an application with angular and I need to display some data that has the following structure:
{
"id": 33,
"arg": 7,
"date": "2022-01-31",
"User": {
"Name": "Cristian",
"Group": {
"NGroup": "Group 1"
}
},
"Sport": {
"NSport": "Sport 1"
}
},
The information should be displayed in this way
id | arg | date | Name (User) | NGroup (Group) | NSport (Sport)
For this I was trying to use keyvalue, the problem with this is that when it brings the User object, it shows me an "item" called [object Object] that corresponds to group and there is no way to hide it. This is the current code:
<tbody>
<tr *ngFor="let item of listItems">
<td><div>{{ item.id }}</div></td>
<td><div>{{ item.arg}}</div></td>
<td><div>{{ item.date }}</div></td>
<td *ngFor="let key of item.User | keyvalue "><div>{{ key.value }}</div></td>
<td *ngFor="let key of item.User | keyvalue"><div *ngFor="let key2 of key.value | keyvalue" >{{ key2.value }}</div></td>
<td *ngFor="let kv of item.Sports | keyvalue"><div>{{kv.value}}</div></td>
</tr>
</tbody>
The output of this is:
id | arg | date | [Object,Object] | Name(User) | NGroup (Group) | NSport(sport)
The question is : How could I show only some items of the object and not all the content
Thanks!!
You can filter out the items to display using something like this:
<table>
<tr *ngFor="let item of listItems">
<td><div>{{ item.id }}</div></td>
<td><div>{{ item.arg}}</div></td>
<td><div>{{ item.date }}</div></td>
<ng-container *ngFor="let key of item.User | keyvalue ">
<td *ngIf="isInteresting(key.value)">{{ key.value }}</td>
</ng-container>
<td *ngFor="let key of item.User | keyvalue"><div *ngFor="let key2 of
key.value | keyvalue" >{{ key2.value }}</div></td>
<td *ngFor="let kv of item.Sport | keyvalue"><div>{{kv.value}}</div></td>
</tr>
</table>
and in the component:
isInteresting(val): boolean { return typeof val !== 'object'; }
This may be dodging the question, but typically I try to keep component template files simple. It helps keep business logic contained inside your TS file which also enables for better testing scenarios.
Since you know the desired output id | arg | date | Name (User) | NGroup (Group) | NSport (Sport) you should use the component's TS file to create that interface for the view. A simple .map() should do the job.
this.viewItems = this.listItems.map(item=>{
const { id, arg, date, User, Sport } = item;
const name = User.Name;
const nGroup = User.Group.NGroup;
const nSport = Sport.NSport;
return { id, arg, date, name, nGroup, nSport };
});
Now you only need one *ngFor loop for rendering your data.
<tbody>
<tr *ngFor="let item of viewItems">
<td><div>{{ item.id }}</div></td>
<td><div>{{ item.arg}}</div></td>
<td><div>{{ item.date }}</div></td>
<td><div>{{ key.name }}</div></td>
<td><div>{{ key.nGroup }}</div></td>
<td><div>{{ key.nSport }}</div></td>
</tr>
</tbody>
Note: While it's already defined in your source data, I would avoid naming objects with uppercase letters (User and Sport). This naming style should be reserved for defining classes.
simple question: How do I show a list of records that have todays date?
my HTML:
<table class='table hovertable'>
<tbody class="mytable">
<tr *ngFor="let timeRecord of timeRecords">
<th>
{{timeRecord.date | date:'dd.\u00A0'}}{{timeRecord.date | date:'MMMM' | convertToSlovakMonthsPipe}}
</th>
<td>
{{timeRecord.duration}} h
</td>
<td>
{{timeRecord.allocation}}
</td>
<td>
{{timeRecord.comment}}
</td>
</tr>
</tbody>
</table>
and my typescript that gets all records:
getTimeRecords() {
this.timeRecordService.getTimeRecords()
.subscribe(
(time: ITimeRecord[]) => {
this.timeRecords = time;
}
)
}
this.timeRecords = time.filter(t => t.getTime() == Date.now().getTime() );
How can I set the table tag like this?
col1 col2 col3 col4
_____ _____ _____ _____
row1 | |_____|_____| |
row2 | |_____|_____| |
row3 | |_____|_____| |
row4 |_____|_____|_____|_____|
I know use the attribute rowspanto let the layout like this
as following my code:
<table>
<tr>
<th>number</th>
<th>type</th>
<th>quantity</th>
<th>amount</th>
</tr>
<tr>
<td rowspan="5">a</td>
<td>b</td>
<td>c</td>
<td rowspan="5">d</td>
</tr>
<tr>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>b</td>
<td>c</td>
</tr>
</table>
But in my case, the code is in the iterator of ruby each do method.
the items of col1 are all same, but items of col2 and col3 are all dynamic and col4 is the result of col3 calculating(sum).
I used to stupid way to layout the col1 by repeating the same value from row1 to row4 like this:
<table>
<tr>
<th>number</th>
<th>type</th>
<th>quantity</th>
<th>amount</th>
</tr>
<%#deals.each do |staff, deals|%>
<%if staff%>
<% #total_deal_type = deals.group_by(&:type).count%>
<%deals.group_by(&:type).each do |type, deals|%>
<tr>
<td><%=staff.number%></td>
<%case type%>
<%when "service1"%>
<%#d=staff.service1*deals.count%>
<td><%=type%></td>
<td><%= deals.count%></td>
<%when "service2"%>
<%#d2=staff.service2*deals.count%>
<td><%=type%></td>
<td><%= deals.count%></td>
<%when "service3"%>
<%#nc=staff.service3*deals.count%>
<td><%=type%></td>
<td><%= deals.count%></td>
<%when "service4"%>
<%#add=staff.service4*deals.count%>
<td><%=type%></td>
<td><%= deals.count%></td>
<%when "service5"%>
<%#bh=staff.service5*deals.count%>
<td><%=type%></td>
<td><%= deals.count%></td>
<%end%>
</tr>
<%end%>
<!--<p>amount:<%=#d.to_i+#d2.to_i+#nc.to_i+#add.to_i+#bh.to_i%></p>-->
<%end%>
<%end%>
</table>
So I want to merge the same value.
It's some way to do this?
To give an example straightaway, below is what I would like to do (without using SQLPlus):
In SQLPlus:
SQL> set feed off markup html on
SQL> select * from emp where rownum<=2;
gives this output:
<p>
<table border="1" width="90%" summary="Script output">
<tr>
<th scope="col">
EMPNO
</th>
<th scope="col">
ENAME
</th>
<th scope="col">
JOB
</th>
<th scope="col">
MGR
</th>
<th scope="col">
HIREDATE
</th>
<th scope="col">
SAL
</th>
<th scope="col">
COMM
</th>
<th scope="col">
DEPTNO
</th>
</tr>
<tr>
<td align="right">
7369
</td>
<td>
SMITH
</td>
<td>
CLERK
</td>
<td align="right">
7902
</td>
<td>
17-DEC-80
</td>
<td align="right">
800
</td>
<td align="right">
</td>
<td align="right">
20
</td>
</tr>
<tr>
<td align="right">
7499
</td>
<td>
ALLEN
</td>
<td>
SALESMAN
</td>
<td align="right">
7698
</td>
<td>
20-FEB-81
</td>
<td align="right">
1600
</td>
<td align="right">
300
</td>
<td align="right">
30
</td>
</tr>
</table>
<p>
Is there a straightforward way to do this in SQL only? (using one or more Oracle's XML functions, for example). Any pointers would be most welcome.
EDIT:
To clarify a bit more, I do NOT care for the whitespace or the p / table tags and the attributes of each tags, just the structured html.
SQL Fiddle
Oracle 11g R2 Schema Setup:
CREATE TABLE EMP ( EMPNO, ENAME, JOB, MGR, HIREDATE, SAL, COMM, DEPTNO ) AS
SELECT 7369, 'Smith', 'Clerk', 7902, DATE '1980-12-17', 800, CAST( NULL AS NUMBER(5,2) ), 20 FROM DUAL UNION ALL
SELECT 7499, 'Allen', 'Salesman', 7698, DATE '1981-02-20', 1600, 300, 30 FROM DUAL
Query 1:
SELECT XMLElement(
"p",
XMLElement(
"table",
XMLElement( "tr",
XMLForest(
'empno' AS "th",
'ename' AS "th",
'job' AS "th",
'mgr' AS "th",
'hiredate' AS "th",
'sal' AS "th",
'comm' AS "th",
'deptno' AS "th"
)
),
XMLAgg(
XMLElement( "tr",
XMLForest(
empno AS "td",
ename AS "td",
job AS "td",
mgr AS "td",
hiredate AS "td",
sal AS "td",
comm AS "td",
deptno AS "td"
)
)
)
)
).getClobVal() AS XML
FROM EMP
Results:
| XML |
|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| <p><table><tr><th>empno</th><th>ename</th><th>job</th><th>mgr</th><th>hiredate</th><th>sal</th><th>comm</th><th>deptno</th></tr><tr><td>7369</td><td>Smith</td><td>Clerk</td><td>7902</td><td>1980-12-17</td><td>800</td><td>20</td></tr><tr><td>7499</td><td>Allen</td><td>Salesman</td><td>7698</td><td>1981-02-20</td><td>1600</td><td>300</td><td>30</td></tr></table></p> |
I have this var_dump result
'children' =>
array (size=2)
0 => string 'children on row 1' (length=17)
1 => string 'children on row 2' (length=17)
'type_of_delivery' =>
array (size=2)
0 => string 'type of delivery on row 1' (length=25)
1 => string 'type of delivery on row 2' (length=25)
'date' =>
array (size=2)
0 => string 'Oct 11, 2015' (length=12)
1 => string 'Oct 11, 2015' (length=12)
from my inputs
<table>
<thead>
<tr>
<th>Children</th>
<th>Type of Delivery</th>
<th>Date</th>
<tr>
<thead>
<tbody>
<tr>
<td><input type="text" name="children[]" /></td>
<td><input type="text" name="type_of_delivery[]" /></td>
<td><input type="text" name="date[]" /></td>
</tr>
<tr>
<td><input type="text" name="children[]" /></td>
<td><input type="text" name="type_of_delivery[]" /></td>
<td><input type="text" name="date[]" /></td>
</tr>
</tbody>
</table>
and I have a columns 'children', 'type_of_delivery', 'date' for those request data. I want to save it like per set e.g. array 0 of children + array 0 of type_of_delivery + array 0 date and so on.
Assume I have successfully save those data and it should look like this.
--------------------------------------------------------------
children | type of delivery | date
--------------------------------------------------------------
children on row 1 | type of delivery on row 1 | Oct 11, 2015
children on row 2 | type of delivery on row 2 | Oct 11, 2015
any ideas, clues, help how to make it please?
Providing your array stays in the same format, you could do the following: -
$children = $arr['children'];
for (i=0; i < count($children); i++)
{
$update = [
'children' => $children[$i],
'type_of_delivery' => $arr['type_of_delivery'][$i],
'date' => $arr['date'][$i],
];
Your\Model\To\Insert::create($update);
}
This will only work if you have equal results across children, delivery & date