Nested for loop in HTML table - javascript

I am trying to create a table that is created from Lists of different sizes.
I have a list of Cars List<Car>. So in the header I want to place the names of the different companies which I did.
Then I have a List<List<CarSales>> and not all Cars exist in each carSales.
So I want to iterate through the List of List of each tr (also OK)
and then I want to iterate in the td though the List and place the CarSales.sales in the correct td where CarSales.mark=Car.makr of the header.
So if List<Cars> is (I mean Cars.mark)
[BMW, MERCEDES,FIAT]
And List<List<CarSales>> is (I mean object that have mark and sales inside)
[[BMW:5,FIAT:10],[MERCEDES:12]]
I want a table with:
BMW - MERCEDES - FIAT
5 - 0 - 10
0 - 12 - 0

You might be able to do that... but you can make the markup so much simpler if List<List<CarSales>> was instead a List<Map<String, Integer>> instead (where the key is the mark, and the value is the sales). Then you could have something like this:
<table>
<tr>
<th th:each="car: ${cars}" th:text="${car.mark}" />
</tr>
<tr th:each="sale: ${carSales}">
<td th:each="car: ${cars}" th:text="${sale.get(car.mark)} ?: 0" />
</tr>
</table>
If you want to go with your original structure, something like this might work, but it's more confusing to maintain:
<table>
<tr>
<th th:each="car: ${cars}" th:text="${car.mark}" />
</tr>
<tr th:each="sales: ${carSales}">
<td th:each="car: ${cars}" th:with="sale=${sales.^[mark==#root.car.mark]}" th:text="${sale?.sales} ?: 0" />
</tr>
</table>

Related

build a table with ng-repeat based on lists, ordered by columns in AngularJS and Javascript

I'd like to build a table with ng-repeat. But in my JavaScript code, instead of having a list with keys and values, I have 3 lists in one bigger list like this:
tableau = [{
'ws': wslist
},
{
'days': dayslist
},
{
'tnq': tnqlist
},
]
What's in the lists? wslist, dayslist, and tnqlist fill up themselves with dynamic datas in realtime that refresh themselves very frequently.
I'd like to know if I can display this data / these lists, in a table with ng-repeat ( and not with a static key/value pair dataset as we usually see like var table = [{perons : Arnold, Katty}, {Age : 24, 25}] and put them in row in a table with ng repeat).
I tried this :
<table cellpadding="20" rules="GROUPS" frame="BOX">
<thead>
<tr>
<th> </th>
<th class="xl154" style="width: 100px">
Day 1something like {{day.tableau}}
</th>
<th class="xl154" style="width: 100px">day 2</th>
<th class="xl154" style="width: 100px">day 3</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in ctrl.tableau">
<td class="xl153">{{item.ws}}</td>
<td class="xl153">{{item.tnq}}</td>
</tr>
</tbody>
</table>
And I got this :
All the values of wslist are in one and same cell and in row. They should be separated and each on in its cell in column. My table should look like this, more specifically like this. (on the pic, the values of tnq% are meant to be read vertically in column for day 1 for example, then for day 2 also vertically etc...)
To give you an idea of the length and the nature of the list, you have in the first pic: in red, this is the wslist and in the second: in blue you have the tnqlist and in red the dayslist.
Do you know if it is possible to do it with ng-repeat and if so, how can I do to order each element of the list in a cell in column for the wslist and the tnqlist (so 2 separated columns) ? or ifit is not possible is there any other way I can build a table as in the picture "table I should have" with my list of dynamic lists?
Thank you very much for all answers that may help
Sadly, what you're trying to do is more complex than expected and we don't know the relationship between the data.
Here is a plnkr based on your explanation: https://plnkr.co/edit/REHNDW8CU330yBPY
So, my recommendation would be:
For the titles, you can iterate over the list of days. Something like:
<head>
<tr>
<th>Web Service </th>
<th style="width: 100px" ng-repeat="day in daysList">
{{day}}
</th>
</tr>
</thead>
Then, for each service, you will have to iterate writing the name, but also looking for the value of each day. Something like this:
<tr ng-repeat="ws in wsList">
<td class="xl153">{{ws}}</td>
<td style="width: 100px" ng-repeat="day in daysList">
{{getValue(ws, $parent.$index, day, $index)}}.
</td>
</tr>
Where getValue is a custom function based on your needs to get the information.

How might I set empty rows to not display in am email?

I am putting together an email template for electronic deposits. All the email will do is let students and customers know that an electronic payment has been made out to them and display the items. The information should look like this:
Date | Invoice# | Description | Amount
12/20/2019 | 01 | Refund | $33
| 02 | Refund | $44
(Since the Date is the Date of Deposit, it will be the same for all the listed invoices.)
There can be up to 30 potential rows like this, one for each invoice number. The trouble is, though, that not all of those rows will have values.
So, for a student or customer that is receiving payment for nine invoices (nine rows), we wouldn't want to show the remaining twenty-one empty rows.
The question, then, is how might we hide these remaining empty rows? Since this will be an email template, I don't know if JavaScript or jQuery would work, since from what I've read, they get blocked by the email system for security reasons.
I thought I might also try converting it from HTML to .NET, and seeing if I could use a Repeater, but I don't know if that would work either.
If the information can be of any use, this email is getting it's information using a T-SQL query. I imagine I can modify it to just not return NULL results, but that still leaves the issue of the empty rows on the front-end side...
Any assistance or insight would be appreciated. I'll post URLs for resources I've read so far below. :)
Thanks!
Resources:
hide table rows if empty
Generating row dynamically in javascript?
Is JavaScript supported in an email message?
https://kb.mailchimp.com/campaigns/design/limitations-of-html-email
Updated - 3/19/2018
Below is the function I am using:
<script>
$(function(){
$('.row').each(function(){
if($(this).val().trim()=='')
$(this).hide();
})
});
</script>
Since the HTML file is quite long, I don't know that I should post the whole thing inline. Below is the HTML for the first three rows in the table:
<table class="w580" border="0" cellpadding="0" cellspacing="0" width="580">
<tbody><tr>
<td class="w580" width="580">
<div class="article-content" align="left">
<multiline label="Description">
<p style="text-align: center; color: #e54a3d; font-size: larger;">
<strong>
Accounts Receivable Hold Notice
</strong></p>
<hr style="margin: 0 0 1.625em;"/>
<p>Dear firstname,</p>
<p></p>
<p>If you have any questions, you may call the Office of Student Financial Services at 573.592.1793</p>
<p>Have a great day!</p>
<p><strong>Check Date:</strong> checkdate</p>
<table width="580" border="1">
<thead>
<tr>
<th width="145" >Invoice</th>
<th width="145" >Description</th>
<th width="145" >Amount</th>
</tr>
</thead>
<tbody>
<tr class="row">
<td>
##invoicenum1##
</td>
<td>
##desc1##
</td>
<td>
##amount1##
</td>
</tr>
<tr class="row">
<td>
##invoicenum2##
</td>
<td>
##desc2##
</td>
<td>
##amount2##
</td>
</tr>
<tr class="row">
<td>
##invoicenum3##
</td>
<td>
##desc3##
</td>
<td>
##amount3##
</td>
</tr>
All of the items surrounded with ##s (for example, ##invoicenum1## ) are the "potential values" that get populated by the results from the database.
So, theoretically, if a field is NULL in the database, it won't put anything there. Then, the jQuery in the head will see that nothing is there and simply hide the row.
My concern, though, is that, if JavaScript and jQuery are blocked by the email clients, that this functionality won't perform.
Updated - 3/21/2018
I've confirmed that the jQuery won't work. I've got the desired visual effect through inline styles - just setting "border: none;" on the individual rows and cells. That way, if it's empty, it just doesn't show...
This works for us, since we have a set maximum number of potential rows (30).
If we wanted to set up a system, though, where the number of rows was determined by the actual number of results returned, any idea how we might do that?
Or do the big companies like Amazon also have a set number of items they'll show when they email you your order details? Maybe they just show you five or six items and tell you "To view your complete order, visit the Orders Page", or something...

AngularJS ng-repeat display nested array in table

I want to display nested array in table. Array structure:
0:
value1:"something",
...
firstNestedArray:{
value2:"something2",
...
secondNestedArray:{
value3:"something3",
...
thirdNestedArray:{
value4:"something4",
...
}
}
}
Problem is that I don't know how to correctly process this array to display it in table.
I tried this:
<tbody data-ng-repeat="item1 in firstNestedArray">
<tr data-ng-repeat="item2 in item1.secondNestedArray">
<td>{{item1.value1}}</td>
<td>
{{item2.value2)}}
<br>
{{item2.value3)}}
</td>
<!-- Problem appears here: -->
<td>
{{thirdNestedArray.value1}}
</td>
</tr>
</tbody>
How can i display all this thirdNestedArray values that I need? Because all this values from array have to be displayed in one row.
|column1|column2|column3|column4|column5|
|value1 |value2 |value3 |value4 |value5 |
I've tried to do it like this bu this doesn't work:
<tbody data-ng-repeat="item1 in firstNestedArray">
<tr data-ng-repeat="item2 in item1.secondNestedArray">
<td>{{item1.value1}}</td>
<td>
{{item2.value2)}}
<br>
{{item2.value3)}}
</td>
<!-- Does not work: -->
<div data-ng-repeat="item2 in item1.thirdNestedArray">
<td>
{{item2.value4}
</td>
</div>
</tr>
</tbody>
First of all, you can't put a div in the middle of a table like that, Angular or not. Tables have a very specific parent-child tree.
Second, just use ng-repeat on the TD element you want to repeat. You'll have to track what the maximum number of TDs in ANY of the TRs is so that you can compensate in all of the other TRs (which may be shorter). I think the easiest way to do this is to check the source arrays' lengths in the controller, and push empty elements onto the ends of the shorter arrays that you're building from so that they all match the maximum size. This padding means you won't have to deal with more complex markup manipulations.

Drop a line in HTML when four images have been entered in the table

I want to have a table that gets its entries from a database. I have all that working. All i need to do is when four entries have been added to the column i want it to drop down a line and keep going until all the entries in the database have been added to the table.
This is what i have so far:
<table cellspacing="0" cellpadding="3px">
<c:forEach var="car" begin="0" items="${requestScope.carList}" varStatus="status">
<tr>
<td><a href='Home.jsp'><img src="images/${car.licence}.jpg" width="240px" height="250"/></a></td>
</tr>
<tr>
<td> Licence:${car.licence}, Model:${car.model}, Make:${car.make} and Colour:${car.colour}</td>
</tr>
</c:forEach>
</table>
This just prints all the images down in a line. I need to make a loop or something that drops a line every four images. Something like
c:when test="${status.index % 4 == 0}"
tr
/c:when
Kinda wild guessing here:
<table cellspacing="0" cellpadding="3px">
<c:forEach var="car" begin="0" items="${requestScope.carList}" varStatus="status">
<c:when test="${status.index % 4 == 0}">
<tr>
</c:when>
<td><table><tr><td><a href='Home.jsp'><img src="images/${car.licence}.jpg" width="240px" height="250"/></a></td></tr>
<tr><td> Licence:${car.licence}, Model:${car.model}, Make:${car.make} and Colour:${car.colour}</td></tr></table></td>
<c:when test="${status.index % 4 == 3}">
</tr>
</c:when>
</c:forEach>
</table>
Basically, test if it's the first entry of a group of four - if so, start a new row. If it's the fourth of a group of four, close the row. You will also need to close the row if it's the last entry and the entry cannot be divided by 4.
I assume you just want to break every 4th td so you need :nth-child like so:
td:nth-child(4n) {clear: left}
FIDDLE THAT
Though your code and ref does not help me understand what you really want so yes another wild guess..but since you tag has CSS...I figure I add this.

DIV and tables - multiple rows

I am trying to put a div inside of a table however, it will not go across multiple rows.
Here is the code I am using:
<table>
<tr>
<td><div id="test"></td>
</tr>
<tr>
<td>row 2 stuff</td></td>
</div>
</table>
I have multiple rows that are dynamically added on a button click. I would like each group of dynamically added rows to be inside of a div for easy removal.
The problem is FireFox is automatically closing the div tag in the same cell. At the very end, it is moving my closing to the end of the first cell.
Latest tag opened should be closed first to get the perfect result.
Your code should look somehow like this:
<table>
<tr>
<td><div id="test"></div></td>
</tr>
<tr>
<td>row 2 stuff</td>
</tr>
</table>
You cannot wrap a <div> tag around table elements like that. If you would like to keep an easy reference to each row, consider keeping references to all of the newly-added rows, or add a class to them for later access.
Your markup does not abide by html standards in the sense that you are imporperly nesting. If you want to add a row use the following formation
<table>
<div id="test">
<tr>
<td></td>
</tr>
<tr>
<td>row 2 stuff</td></td>
</tr>
</div>
</table>
If you notice, I grouped the two rows within one div. Even this is ill advised as you are nesting a div within a table. A more convenient solution would be to assign a class to the divs you want to group together like so:
<table>
<tr class="test">
<td></td>
</tr>
<tr class="test">
<td>row 2 stuff</td></td>
</tr>
</table>
Here the rows I want to group together are assigned a common class. So if I were to select them with say Jquery, I would do :
$("tr.test")
Hope that helps!
Html tags must be strictly within another tag. The following markup is therefore not allowed:
<b>this <i>is a</b> test</i>
Your markup breaks the same rule.

Categories

Resources