iterate with v-for and data-attribute - vue.js

I have a vuejs-datatable, and now I want to have an option-column with edit- / delete-links.
This is the table-body which gets iterated from the function getRows():
<tbody>
<tr v-for="(row, idr) in get_rows()" v-bind:key="idr">
<td>{{row.id}}</td>
<td>{{row.email}}</td>
<td>
<b-icon-pencil-square></b-icon-pencil-square>
<b-icon-trash></b-icon-trash>
</td>
</tr>
</tbody>
Now the td with the {{row.id}} and {{row.email}} are fine. However the :data-id="row.id" displays only the id of the first entry. Links in every row in my table have the same data-id. I do not understand why this is happening and what am I doing wrong.

Use code below (notice, it's not using data-id):
<tbody>
<tr v-for="(row, idr) in get_rows()" v-bind:key="idr">
<td>{{row.id}}</td>
<td>{{row.email}}</td>
<td>
<b-icon-pencil-square></b-icon-pencil-square>
<b-icon-trash></b-icon-trash>
</td>
</tr>
</tbody>

Related

skrape.it process rows of a table by itself

I am new to the skrape.it library and try to extract content of a table.
Is there a way to process every table by it self, so I get a List with all texts of a row in a List with all rows? e.g.: List<List>
My current approach is to get all texts from every td and count all tr and then process these two lists by calculating the index of the required text.
One row looks like this:
<tr role="row">
<td class="grad" style="background:#067A25; width:50px">
<div class="grad_outer">
<span>4c</span>
</div>
</td>
<td class="name">
King Louie
</td>
<td>
Dave
</td>
<td>
11.03.2022
</td>
<td>
12
</td>
<td>
64.2
</td>
</tr>
I also need to extract the background css attribute of each first td tag. How can I do this?

XPATH to use preceding and following sibling in a single statement

I would like to scrape name, address informations between tag contains defendent text and another tag,
My HTML structure is:
<hr>
<H5>Defendant/Respondent Information</H5>
<span class="InfoChargeStatement">(Each Defendant/Respondent is displayed below)</span>
<table>
<tr>
<td><span class="FirstColumnPrompt">Party Type:</span></td><td><span class="Value">Defendant</span><span class="Prompt">Party No.:</span><span class="Value">1</span></td>
</tr>
</table>
<table>
<tr>
<td><span class="FirstColumnPrompt">Name:</span></td><td><span class="Value">Name 1</span></td>
</tr>
</table>
<table>
<tr>
<td><span class="FirstColumnPrompt">Address:</span></td><td><span class="Value">Addr 1</span></td>
</tr>
<tr>
<td><span class="FirstColumnPrompt">City:</span></td><td><span class="Value">city1</span><span class="Prompt">State:</span><span class="Value">aa</span><span class="Prompt">Zip Code:</span><span class="Value">Zip1</span></td>
</tr>
</table>
<hr>
<table>
<tr>
<td><span class="FirstColumnPrompt">Party Type:</span></td><td><span class="Value">Defendant</span><span class="Prompt">Party No.:</span><span class="Value">2</span></td>
</tr>
</table>
<table>
<tr>
<td><span class="FirstColumnPrompt">Name:</span></td><td><span class="Value">Name 2</span></td>
</tr>
</table>
<table>
<tr>
<td><span class="FirstColumnPrompt">Address:</span></td><td><span class="Value">Addr2</span></td>
</tr>
<tr>
<td><span class="FirstColumnPrompt">City:</span></td><td><span class="Value">City2</span><span class="Prompt">State:</span><span class="Value">st2</span><span class="Prompt">Zip Code:</span><span class="Value">zip2</span></td>
</tr>
</table>
<hr>
<H5>Related Persons Information</H5>
<span class="InfoChargeStatement">(Each Related person is displayed below)</span>
<table>
<tr>
<td><span class="FirstColumnPrompt">Name:</span></td><td><span class="Value">Unwanted Name</span></td>
</tr>
</table>
<table>
<tr>
<td><span class="FirstColumnPrompt">Address:</span></td><td><span class="Value">un addr</span></td>
</tr>
<tr>
<td><span class="FirstColumnPrompt">City:</span></td><td><span class="Value">Unwanted City</span><span class="Prompt">State:</span><span class="Value">Unwanted city</span><span class="Prompt">Zip Code:</span><span class="Value">12345</span></td>
</tr>
</table>
<table></table>
<hr>
My current XPATH capturing the first occurence of Name and address properly, but if need to extract the multiple occurences, it also scrape the information from the unwanted h5 tags.
My current XPATH is,
"//*[contains(text(),'Defendant')]//following-sibling::table//span[text()='Name:' or text()='Business or Organization Name:']/ancestor-or-self::td/following-sibling::td//text()")
I tried including preceding sibling and following sibling but nothing gives my expected output,
My current output is..
names - [
Name1,
Name2
Unwanted Name,
]
Expected output is,
[
Name1
Name2
]
Kindly help.
try this:
"//H5[contains(text(),'Defendant')]/following-sibling::table[not(preceding-sibling::H5[not(contains(text(),'Defendant'))])]/tr[td[1][span[text()[.='Name:' ]]]]/td[2]/span/text()"
It first selects the table that has not a preceding-sibling::h5 with text() that not contains 'Defendant' and than
selects from the correct table the tr where the first td meets your requirements and selects the second td
No need for double slashes which is bad for performance
EDIT 1
Since there are more preceding-sibling::h5 than the example shows, this XPath will deal with that:
"//H5[contains(text(),'Defendant')]/following-sibling::table[preceding-sibling::H5[1][contains(text(),'Defendant')]]//tr[td[1][span[text()[.='Name:' ]]]]/td[2]/span/text()"
This will only select those tables that have as there first preceding-sibling::h5 the same h5 as we were interested in
EDIT 2
Actually now the first h5 select is redundant. This XPath will do:
"//table[preceding-sibling::H5[1][contains(text(),'Defendant')]]//tr[td[1][span[text()[.='Name:' ]]]]/td[2]/span/text()"

v-for duplicating th of tr same code is working fine for other objects

I have seen few solutions online but It did not solve my problem. I am getting JSON object in the response.
<!-- Show Negativita Check Azienda -->
<table class="divide-y divide-gray-200 table-fixed w-full mt-4" v-if="showTableAzienda" v-for="item in impreses">
<thead class="bg-gray-900">
<tr>
<th>Codice Fiscale</th>
<th>Flag Domande</th>
<th>Flag Pregiudizievoli</th>
<th>Flag Procedure</th>
<th>Flag Protesti</th>
<th>Data Evasione</th>
</tr>
</thead>
<tbody class="text-center py-6" >
<tr>
<td>{{item.codice_fiscale}}</td>
<td>{{item.flagDomande}}</td>
<td>{{item.flagPregiudizievoli}}</td>
<td>{{item.flagProcedure}}</td>
<td>{{item.flagProtesti}}</td>
<td>{{item.dataEvasione}}</td>
</tr>
</tbody>
</table>
Here is JSON response
{
"codice_fiscale":"CLLLCA82R69D960T",
"flagDomande":"N",
"flagPregiudizievoli":"N",
"flagProcedure":"N",
"flagProtesti":"N",
"dataEvasione":"2021-11-04"
}
because the elements in the object are six. it generates th for six times with no output. if I print {{impreses.codice_fiscale}} then it shows the output. I am not able to understand behavior.
EDIT
Second Question
{"EventiNegativiPersona":
{"InfoPersona":
{"Nominativo":
{"#attributes":{"cognome":"","nome":""}},
"CodiceFiscale":"CLLLCA82R69D960T"},
"ElencoProtesti":{"#attributes":
{"flagPresenza":"N"}},"ElencoPregiudizievoli":
{"#attributes":{"flagPresenza":"N"}}}}
I would like to show these but {{item.EventiNegativiPersona.#parameters.so-on}} does not work because of #parameters. How can i show this?
Based on the response object shown in your question you could move the v-for to the td tag :
<table class="..." v-if="showTableAzienda" >
<thead class="bg-gray-900">
<tr>
<th>Codice Fiscale</th>
<th>Flag Domande</th>
<th>Flag Pregiudizievoli</th>
<th>Flag Procedure</th>
<th>Flag Protesti</th>
<th>Data Evasione</th>
</tr>
</thead>
<tbody class="text-center py-6" >
<tr>
<td v-for="item in impreses">{{item}}</td>
</tr>
</tbody>
</table>

Selenium XPath multiple selection

I want to find all elements in the table that match the following conditions:
-div text contains '2019';
-div class='excellent';
here is the HTML code excerpt:
<tr>
<td>Name of Person1</td>
<td>
<div class="testDate">21/12/2019</div>
<div class="excellent"></div>
</td>
</tr>
<tr>
<td>Name of Person2</td>
<td>
<div class="testDate">01/12/2017</div>
</td>
</tr>
I tried this solution:
//tr/td[2][div/text()='21/12/2019'][div[#class='starred']]
but I need the year only and not entirely date.
Use the below xpath.
//tr/td[div[contains(.,'2019')]and div[#class='excellent']]
Screenshot:

selenium xpath, how to select last matching element in a table?

Given
<table>
<tr>
<td>service1</td>
</tr>
<tr>
<td>service2</td>
</tr>
<tr>
<td>service3</td>
</tr>
<tr>
<td>blip</td>
</tr>
</table>
How can I select the last 'service-n' row when I don't know what n will be?
I have tried adding [last()] but it didn't work.
I have:
//table//tr//td[contains(text(),'service')]
but it selects the 1st row and I want the last one.
I can't use tr[3] because in reality the number of 'service-n' rows is dynamic and changes a lot.
The answer was exactly where I put the [last()] and I had it in the wrong place
It goes here:
//div[#id='content']//table//tr[last()]//td[contains(text(),'service')][last()]/following-sibling::td[2]
Not here:
//div[#id='content']//table//tr[last()]//td[contains(text(),'service')]/following-sibling::td[2][last()]
try with cssSelector, this way.
By.cssSelector("table tr:last-child td")
List<WebElement> allElement=fd.findElements(By.xpath("//table//td[contains(.,'service')]");
int count=allElement.size();
allElement.get(count-1).click();
<table id="table1">
<tbody>
<tr id="tr1">
<td id="td1"></td>
<td id="td2"></td>
<tr>
<tr id="tr2">
<td id="td3"></td>
<td id="td4"></td>
<tr>
<tbody>
</table>
Then to target last td of last tr
we can have xpath as:xpath="//table[#id='table1']//tr[last()]//td[last()]";
(//div[#id='name'])[last()]
By using we can get the last element of the relevant filed.
//div[#id='name'][last()]
Multiple elements in last