using ng-repeat-start and ng-repeat-end with 2 different objects - javascript

I'm trying to use 2 different objects for ng-repeat-start and ng-repeat-end.
for example:
<tr ng-repeat-start="file in files">
<td class="name-col">{{file.name}}<br>
</td>
<td class="name-col">{{file.progress}}</td>
</tr>
<tr ng-repeat-end="otherFile in otherFiles">
<td colspan="2">
{{otherFile.errors}}
</td>
</tr>
Doesn't seem to work right now and it only assumes the first object (files)

Maybe this would do:
<tr ng-repeat-start="file in files">
<td class="name-col">{{file.name}}<br>
</td>
<td class="name-col">{{file.progress}}</td>
</tr>
<tr ng-repeat-end>
<td colspan="2">
{{otherFiles[ $index ].errors}}
</td>
</tr>

Your problem is that ng-repeat-end does not accept an argument.
If you want to ng-repeat over a different object like you have above, you would need to start a new ng-repeat block.
Edit: Added wrapping html to show a point. You might want to change things around a bit.
<div ng-repeat="file in files track by $index">
<tr>
<td class="name-col">{{file.name}}<br>
</td>
<td class="name-col">{{file.progress}}</td>
</tr>
<tr>
<td colspan="2">
{{otherFile[$index].errors}}
</td>
</tr>
</div>

Related

HTML: How to split list (of <tr>-s) into multiple chunks with keeping the header?

I have a list that is too long, and it is needed to fit without scrolling, but I can't figure out how to split this into 2 or 3 or 4 chunks. I copied a list below, the real list is having 200 or more rows of data. Let's say I'd like to have chunks with no more than 3 rows inside.
Is it possible to make more than one chunk of this and keeping the header too?
(The data comes from an SQL selection and constantly changing).
<div id="FIller1" class="dbtable">
<thead>
<tr>
<td class="b3">Filled ID1</td>
<td class="n3">Filled ID2</td>
<td class="n3">Filled ID3</td>
</tr>
</thead>
<tbody>
<tr>
<td class="index"><span>110</span></td>
<td class="n2"><span>110-2</span></td>
<td class="b2"><span>AAA</span></td>
</tr>
<tr>
<td class="index"><span>111</span></td>
<td class="n2"><span>111-2</span></td>
<td class="b2"><span>BBB</span></td>
</tr>
<tr>
<td class="index"><span>112</span></td>
<td class="n2"><span>112-2</span></td>
<td class="b2"><span>CCC</span></td>
</tr>
<tr>
<td class="index"><span>113</span></td>
<td class="n2"><span>113-2</span></td>
<td class="b2"><span>DDD</span></td>
</tr>
<tr>
<td class="index"><span>114</span></td>
<td class="n2"><span>114-2</span></td>
<td class="b2"><span>EEE</span></td>
</tr>
<tr>
<td class="index"><span>115</span></td>
<td class="n2"><span>115-2</span></td>
<td class="b2"><span>FFF</span></td>
</tr>
<tr>
<td class="index"><span>116</span></td>
<td class="n2"><span>116-2</span></td>
<td class="b2"><span>GGG</span></td>
</tr>
</tbody>
</div>

Access javascript <td table data without id, with swift3

inspecting target website shows the following HTML for a table
(excerpt from full table body)
<tr class="simRowA">
<td class="1stColumn">something</td>
<td class="2ndColumn">TARGET</td>
<td class="3rdColumn">anything</td>
<td class="4thColumn">whatever</td>
</tr>
<tr class="simRowB">
<td class="1stColumn">something2</td>
<td class="2ndColumn">TARGET2</td>
<td class="3rdColumn">anything2</td>
<td class="4thColumn">whatever2</td>
</tr>
<tr class="simRowA">
<td class="1stColumn">something3</td>
<td class="2ndColumn">TARGET3</td>
<td class="3rdColumn">anything3</td>
<td class="4thColumn">whatever3</td>
</tr>
<tr class="simRowB">
<td class="1stColumn">something4</td>
<td class="2ndColumn">TARGET4</td>
<td class="3rdColumn">anything4</td>
<td class="4thColumn">whatever4</td>
</tr>
"simRowA"(/"B") continue to alternate.
I want to extract "TARGET", "TARGET2"...etc in my Swift3 app
I've tried in NavigationDidFinish:WKWebView (other evaluatJavaScript codes are working here)
webView.evaluateJavaScript("document.getElementsByClassName('simRowA')[0].innerText;") {
(result, error) -> Void in
print(result)
}
as well as ".value" and ".text". note HTML lacks 'id'
Any suggestions how i can extract this data?
There are several things that might have gone wrong with your code, and, since some of it is missing, I'm gonna make some asumptions.
First, to correctly get to TR simRowA via getElementsByClass, you need to properly construct the table. That means, setting the <table> tag too.
<table>
<tr class="simRowA">
<td class="1stColumn">something</td>
<td class="2ndColumn">TARGET</td>
<td class="3rdColumn">anything</td>
<td class="4thColumn">whatever</td>
</tr>
<tr class="simRowB">
<td class="1stColumn">something2</td>
<td class="2ndColumn">TARGET2</td>
<td class="3rdColumn">anything2</td>
<td class="4thColumn">whatever2</td>
</tr>
<tr class="simRowA">
<td class="1stColumn">something3</td>
<td class="2ndColumn">TARGET3</td>
<td class="3rdColumn">anything3</td>
<td class="4thColumn">whatever3</td>
</tr>
<tr class="simRowB">
<td class="1stColumn">something4</td>
<td class="2ndColumn">TARGET4</td>
<td class="3rdColumn">anything4</td>
<td class="4thColumn">whatever4</td>
</tr>
</table>
Second, make sure you call stringByEvaluatingJavaScript (or, if you're using WKWebView, evaluateJavaScript) after the page is done loading, so use the delegate method webViewDidFinishLoad (or, if you're using WKWebView, didFinishNavigation).
After this, you should be getting the innerHTML of .simRowA on the console:
Optional("<td class=\"1stColumn\">something</td>\n <td class=\"2ndColumn\">TARGET</td>\n <td class=\"3rdColumn\">anything</td>\n <td class=\"4thColumn\">whatever</td>\n")

Loop through table and extract specifics cells

I am having difficulty using jQuery to loop though a table, then extract specifics cells.
I know this can be done with .each, I don't have a code to share as example but I am trying as we speak, I am just looking for some suggestions. I will share any code I can come up with.
What would be the best way to achieve this?
Code Snippet:
<table id="tablemain" class="tableclass">
<thead>
<tr>
<th>A</th>
<th>Site1</th>
<th>Site2</th>
<th>D</th>
<th>E</th>
<th>F</th>
<th>G</th>
<th>H</th>
<th>I</th>
<th>J</th>
<th>K</th>
<th style="width: 10%;">L</th>
<th>M</th>
</tr>
</thead>
<tbody>
<tr id="row0" class="parent">
<td class="radioTableDetails awarded-td-background-color">Name1</td>
<td colspan="11"> </td>
<td class="version-Link-Table even-td-TableDetails"> </td>
</tr>
<tr id="row0" class="child">
<td class="child-row-Table-Details"><strong>Arrival</strong></td>
<td class="even-td-TableDetails">06/06/2017 09:30</td>
<td class="odd-td-TableDetails">06/06/2017 16:00</td>
<td class="even-td-TableDetails">A</td>
<td class="odd-td-TableDetails">B</td>
<td class="even-td-TableDetails">D</td>
<td class="odd-td-TableDetails">E</td>
<td class="even-td-TableDetails"> </td>
<td class="odd-td-TableDetails">F</td>
<td class="even-td-TableDetails">G</td>
<td class="odd-td-TableDetails">H</td>
<td class="even-td-TableDetails diff-td-text-color">I</td>
<td class="modify-Link-Table-Disabled odd-td-TableDetails">J</td>
</tr>
<tr id="row0" class="child">
<td class="child-row-Table-Details"><strong>Departure</strong></td>
<td class="even-td-TableDetails">06/06/2017 10:00</td>
<td class="odd-td-TableDetails">-</td>
<td class="even-td-TableDetails" colspan="9">-</td>
<td> </td>
</tr>
<tr id="row1" class="parent">
<td class="radioTableDetails">Name2</td>
<td colspan="11"> </td>
<td class="version-Link-Table even-td-TableDetails"> </td>
</tr>
<tr id="row1" class="child">
<td class="child-row-Table-Details"><strong>Arrival</strong></td>
<td class="even-td-TableDetails">06/06/2017 10:30</td>
<td class="odd-td-TableDetails">06/06/2017 17:00</td>
<td class="even-td-TableDetails">A</td>
<td class="odd-td-TableDetails">B</td>
<td class="even-td-TableDetails">D</td>
<td class="odd-td-TableDetails">E</td>
<td class="even-td-TableDetails"> </td>
<td class="odd-td-TableDetails">F</td>
<td class="even-td-TableDetails">G</td>
<td class="odd-td-TableDetails">H</td>
<td class="even-td-TableDetails diff-td-text-color">I</td>
<td class="modify-Link-Table-Disabled odd-td-TableDetails">J</td>
</tr>
<tr id="row1" class="child">
<td class="child-row-Table-Details"><strong>Departure</strong></td>
<td class="even-td-TableDetails">06/06/2017 11:00</td>
<td class="odd-td-TableDetails">-</td>
<td class="even-td-TableDetails" colspan="9"> -</td>
<td> </td>
</tr>
</tbody>
</table>
<p> </p>
The result I want in array or variable:
Name1
1.Site 1 Arrival
2.Site 1 Departure
3.Site 2 Arrival
===============
Name2
1.Site 1 Arrival
2.Site 1 Departure
3.Site 2 Arrival
I know it sounds simple enough, but I am new to JavaScript so any examples/demos would be appreciated.
Note: There are no fixed values, Names keep changing and more rows are added.
You can select each row with class parent and then get the following two rows using jQuery's next() function. From the docs:
Given a jQuery object that represents a set of DOM elements, the .next() method allows us to search through the immediately following sibling of these elements in the DOM tree and construct a new jQuery object from the matching elements.
Also each HTML element should have a unique id. In your code you used the id row0 for 3 different elements which is just bad practice. If such cases are needed you should uses classes instead of ids.
The below snippet creates an array containing objects that hold the requested information. The extraction of these information depends on the order of the columns (specifically, I used the :nth-child() selector to get the desired cell). If the order of the columns will change over time, please consider adding descriptive classes to each cell and select based on these classes.
var entries = [];
$("#tablemain tr.parent").each(function(){
var child1 = $(this).next();
var child2 = child1.next();
var cells = {
name: $(this).find("td:nth-child(1)").text(),
arrival1: child1.find("td:nth-child(2)").text(),
departure: child2.find("td:nth-child(2)").text(),
arrival2: child1.find("td:nth-child(3)").text()
};
entries.push(cells);
});
console.log(entries);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tablemain" class="tableclass">
<thead>
<tr>
<th>A</th>
<th>Site1</th>
<th>Site2</th>
<th>D</th>
<th>E</th>
<th>F</th>
<th>G</th>
<th>H</th>
<th>I</th>
<th>J</th>
<th>K</th>
<th style="width: 10%;">L</th>
<th>M</th>
</tr>
</thead>
<tbody>
<tr id="row0" class="parent">
<td class="radioTableDetails awarded-td-background-color">Name1</td>
<td colspan="11"> </td>
<td class="version-Link-Table even-td-TableDetails"> </td>
</tr>
<tr id="row01" class="child">
<td class="child-row-Table-Details"><strong>Arrival</strong></td>
<td class="even-td-TableDetails">06/06/2017 09:30</td>
<td class="odd-td-TableDetails">06/06/2017 16:00</td>
<td class="even-td-TableDetails">A</td>
<td class="odd-td-TableDetails">B</td>
<td class="even-td-TableDetails">D</td>
<td class="odd-td-TableDetails">E</td>
<td class="even-td-TableDetails"> </td>
<td class="odd-td-TableDetails">F</td>
<td class="even-td-TableDetails">G</td>
<td class="odd-td-TableDetails">H</td>
<td class="even-td-TableDetails diff-td-text-color">I</td>
<td class="modify-Link-Table-Disabled odd-td-TableDetails">J</td>
</tr>
<tr id="row02" class="child">
<td class="child-row-Table-Details"><strong>Departure</strong></td>
<td class="even-td-TableDetails">06/06/2017 10:00</td>
<td class="odd-td-TableDetails">-</td>
<td class="even-td-TableDetails" colspan="9">-</td>
<td> </td>
</tr>
<tr id="row1" class="parent">
<td class="radioTableDetails">Name2</td>
<td colspan="11"> </td>
<td class="version-Link-Table even-td-TableDetails"> </td>
</tr>
<tr id="row11" class="child">
<td class="child-row-Table-Details"><strong>Arrival</strong></td>
<td class="even-td-TableDetails">06/06/2017 10:30</td>
<td class="odd-td-TableDetails">06/06/2017 17:00</td>
<td class="even-td-TableDetails">A</td>
<td class="odd-td-TableDetails">B</td>
<td class="even-td-TableDetails">D</td>
<td class="odd-td-TableDetails">E</td>
<td class="even-td-TableDetails"> </td>
<td class="odd-td-TableDetails">F</td>
<td class="even-td-TableDetails">G</td>
<td class="odd-td-TableDetails">H</td>
<td class="even-td-TableDetails diff-td-text-color">I</td>
<td class="modify-Link-Table-Disabled odd-td-TableDetails">J</td>
</tr>
<tr id="row12" class="child">
<td class="child-row-Table-Details"><strong>Departure</strong></td>
<td class="even-td-TableDetails">06/06/2017 11:00</td>
<td class="odd-td-TableDetails">-</td>
<td class="even-td-TableDetails" colspan="9"> -</td>
<td> </td>
</tr>
</tbody>
</table>
<p> </p>

Angular repeat in tables

I have multiple source of income that I want displayed into a table. I will be importing more than 2 values and I want to be able to put them side by side for easy comparing. However, the code below is definitely not working.
https://plnkr.co/edit/Vkcc9YUnEIc3PuuS8Yv3?p=preview
<table>
<tr>
<td ng-repeat="type in informationNames">{{type}}>
</td>
<td ng-repeat="type in informationValues1">{{type}}>
</td>
<td ng-repeat="type in informationNameValues2">{{type}}>
</td>
</tr>
</table>
I found this but this doesn't really apply since it is only 1 array and I'll be importing 2+.
Angular ng-repeat in table
you could place each repeat into a different row so your code would look like:
<table>
<tr>
<td ng-repeat="type in informationNames">{{type}}
</td>
</tr>
<tr>
<td ng-repeat="type in informationValues1">{{type}}
</td>
</tr>
<tr>
<td ng-repeat="type in informationNameValues2">{{type}}
</td>
</tr>
</table>
this way they are all listed veritally
if you want them horizontally and you know all of the list are the same length you can do it like this:
`
<table>
<tr ng-repeat="name in informationNames">
<td>{{name}}
</td>
<td>
{{informationValues1[$index]}}
</td>
<td>
{{informationNameValues2[$index]}}
</td>
</tr>
</table>

Get index of row in table using angularJS

I want to get index of each row in this table using angularJS
<table>
<tbody>
<tr ng-repeat = "cust in costomers">
<td> cust.name </td>
<td> cust.phone </td>
<td> cust.address </td>
</tr>
</tbody>
I want to have a variable that contains the index of each row not to just display it
you can use $index
<tr ng-repeat = "cust in costomers">
<td> {{$index}} </td>
</tr>
I think you should be using the <tr> tag to place your ng-repeat directive.
You can use ng-repeat's $index property. See ng-repeat's documentation.
<table>
<tbody>
<tr ng-repeat = "cust in costomers">
<td> {{$index}} </td>
<td> {{cust.name}} </td>
<td> {{cust.phone}} </td>
<td> {{cust.address}} </td>
</tr>
</tbody>
</table>
$index works fine when the ng-repeat is not filtered. If you use a filter, it might be better to use indexOf(). Example:
<input type="text" ng-model="filterCustomers" placeholder="search...">
<table>
<tbody>
<tr ng-repeat = "cust in costomers | filter:filterCustomers">
<td> {{costomers.indexOf(cust) + 1}} </td>
</tr>
</tbody>
</table>
If you want to use your own variable as index you can use this:
<table>
<tbody>
<tr ng-repeat = "(index, cust) in costomers">
<td> {{index}} </td>
<td> cust.name </td>
<td> cust.phone </td>
<td> cust.address </td>
</tr>
</tbody>

Categories