How print and image with react map function - javascript

My web app will open a array of JSON with map function, i need when the react the an "" the image get write on the table and the link on the image still active, my function is:
<table className="table">
<thead className=".thead-dark">
<tr>
<td>Id</td>
<td>Name</td>
<td>Phone</td>
</tr>
</thead>
<tbody>
{this.state.contatos.map((contato, index) => (<>
<tr>
<td>{contato.id}</td>
<td>{contato.nome}</td>
<td>{contato.telefone}</td>
</tr>
</>))}
</tbody>
</table>
this is my sql db
INSERT INTO contatos(nome,telefone) VALUES ('<a><img src="example.com"</img></a>','305-565');
INSERT INTO contatos(nome,telefone) VALUES ('Carey Shers','305-565');
INSERT INTO contatos(nome,telefone) VALUES ('Bill Manys','298-2125');
INSERT INTO contatos(nome,telefone) VALUES ('john peter','465-1827');

Ideally, you'd want to store names and image urls in different columns in a db and work in a way that if name exists - show name, else, show image.
Assuming that is something that can not be changed, you can just use react's dangerouslySetInnerHTML property to set the name. So it wouldn't matter if it's a name or an image as the code would work for both the scenarios.
so you'd replace
<td>{contato.nome}</td>
with -
<td dangerouslySetInnerHTML={{ __html: contato.nome }} />
Also, whenever you're using dangerouslySetInnerHTML, make sure that the data that is coming from the DB is safe. Else your website can be prone to XSS attacks.

Related

hide an item in the parent based on the data in the child loop in Angular

I have the following HTML code snippet where i am looping through my json response to display the data. It is a nested loop with *ngIf as in the HMTL below. What i need is based on the value of one of the items in the child loop i want to hide/show an item in the parent loop.
Basically i have mtr.eu inside the child loop which is an input type.Initially it will be empty and when the user enter any value in it, i want to show the item in the parent shown below. What would be the best suitable way to achieve this.
<div class="row accordian-head" accordion-heading>
<span class="w20">MPRN: {{header.gpr}}</span>
<span class="w20">Meter ID: {{header.num}}</span>
<span class="w20" *ngIf="mtr.eu">New data added</span>
</div>
<div class="accordian-inner-content">
<table class="table table-borderless">
<thead>
<tr class="meter-reading-header">
<th scope="col">Last read date</th>
<th scope="col">Last meter read</th>
<th scope="col">New reading (kWh)</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let mtr of header.mtrs" class="meter-reading-content">
<td>{{mtr.lrd}}</td>
<td>{{mtr.lrv}}</td>
<td>
<input type="number" name="newReading" class="form-control new-reading-input"
placeholder="eg. 12345" [(ngModel)]="mtr.eu">
</td>
</tr>
</tbody>
</table>
</div>
</accordion-group>
You can not use the child variables in the parent node. Instead, you can make a getter where you can check the records which has mu value. based on that getter value you can show the record on the parent element.
The only thing you need to do is write a function and pass your list of items into it. inside that use filter to check for required data(in your case its mt.mu). then return the data. Based on returned data you can show the element.
But when you call any function from the template it calls the function recursively.
So as a best practice I would prefer using pipes to do the same logic. Which makes my code much better.
I hope this helps you to achieve your need.

Getting Sorting Order of Table

I want to save the sorting order of the table and when refreshed it should sort on the saved status.
I am using the Tablesorter jquery plugin for sorting of table
I used javascript to store them in the localstorage but it is storing entire table
javascript Code :
$("#videoTable").on("sortEnd", function SaveSortOrder() {
var table_layout = $('#videoTable')[0].innerHTML;
localStorage.setItem("tableLayout",table_layout);
});
HTML Code:
<table class="table sortable" id="videoTable">
<thead>
<tr valign="middle">
<th data-sort="name" class="tooltipPoint col-lg-4" style="text-align:left;">Name <i class="fa fa-sort" aria-hidden="true"></i></th>
<th data-sort="name" class="tooltipPoint text-center" nowrap>Status <i class="fa fa-sort" aria-hidden="true"></i></th>
<th class="unclickable text-center">Action</th>
</tr>
</thead>
<tbody>
The body will be generated dynamically.
</tbody>
</table>
Is there any way to retrieve only the headers or only the column (Index of the column in a table) we are sorting so that I can modify the class based on the result.
Sorry for bad English. Thanks in advance.
Sort column. Save only what column how sorted (dont know how to get current sort from tablesorter)
On page load check if any sort is saved in local storage.
If so, apply it with sortList.
You should consider new data may be added. Thats why your solution is not right.
I am not sure if I understood your question correctly, but if you want to add a class to the column that was sorted you could manage that at the table header level, something along the lines of this:
jQuery("#videoTable th.tooltipPoint").on("click",function(){
jQuery("#videoTable th.tooltipPoint").removeClass("sorted");
jQuery(this).addClass("sorted");
});

.each() function on affect current object

having some issues with my code below, first here is the HTML:
<table class="finance-table">
<tbody><tr>
<th></th>
<th>Deposit</th>
<th>Balance</th>
<th>Fees</th>
<th>Total Payable</th>
<th>Term</th>
<th>Fixed Rate</th>
<th>Representative APR</th>
<th>Monthly Pmt</th>
</tr>
<tr class="hp">
<td><strong>HP</strong></td>
<td id="td_finance_deposit">£11700.00</td>
<td id="td_finance_balance">£105300.00</td>
<td id="td_finance_fees">£298.00</td>
<td id="td_finance_total_inc_deposit">£146255.50</td>
<td id="td_finance_term">60 mths</td>
<td id="td_finance_rate">5.50%</td>
<td id="td_finance_apr">10.1%</td>
<td id="td_finance_monthly_payments">£2242.59 p/m* x 60 mths</td>
</tr>
</tbody></table>
There is about 10 of these tables [within the same document], all with the same id's and class's. I'm using an each loop to execute some code against each table found, however it only seems to be working on the first table and disregards the others.
Below is the jQuery, like I said works find on the first table, but ignores the rest!
<!-- Remove First and Final Payment from Showroom Finance Examples -->
<script>
$(".finance-table").each(function(key, value) {
// Display loading
var html = $(this);
// Remove the First Payment and Final Payment Column
$(this).find("#td_finance_first_payment, #td_finance_final_payment").remove();
$(this).find("th:contains('1st Pmt')").remove(); $(this).find("th:contains('Final Pmt')").remove();
// Get the Term and update the monthly payment
var term = $(this).find("#td_finance_term").html(); // .replace(/\D/g,'')
var payments = ($(this).find("#td_finance_monthly_payments").html()).split('x')[0];
($(this).find("#td_finance_monthly_payments")).html(payments + " x " + term);
})
</script>
Edit:
Please note, I can't change the HTML at all
You should first give a unique ID to each <td>, perhaps with your DB identifier for that record. You don't need it now but this will allow you to do other thing later if you need it.
Then change all the <td> ids to classes:
<td class="td_finance_fees">£298.00</td>
Finally change all your javascript accordingly to use class instead of IDs:
$(this).find(".td_finance_first_payment, .td_finance_final_payment").remove();
Using Attribute Equals Selector
Change your code from:
$(this).find("#td_finance_first_payment, #td_finance_final_payment").remove();
to:
$(this).find('td[id="td_finance_first_payment"], td[id="td_finance_final_payment"]').remove();
Do this type of change for all areas of #xxx to id="xxx"
What this does is find all tds with attribute id="xxx", rather than using #id identifier, this is forces jQuery to do a tree search.
Also your HTML does not match your code, (theres no td_finance_first_payment in your html, I assume you removed it?)
Edit: This solution is useful if you 100% cannot edit the html (comes from a source you have no control over, such as an API or internal software). Best solution would be to fix the ids!

Reading HTML Table Head value in Adobe DTM

I'm using Adobe DTM and I'm trying to get the value from a table (I have no control over this format or naming) and I'd like to grab the value of "Opened Account" in the example below but not sure how to go about it in DTM? I'm trying to target "th.rich-table-headercell" but not sure how to grab value?
<table class="rich-table home table" id="startForm:OpenedReviewApps" border="1" cellpadding="0" cellspacing="0">
<colgroup span="0"></colgroup>
<thead class="rich-table-thead">
<tr class="rich-table-header">
<th class="rich-table-headercell" scope="colgroup">Opened Accounts</th>
</tr>
</thead>
<tbody id="startForm:OpenedReviewApps:tb">
<tr class="rich-table-row rich-table-firstrow">
<td class="rich-table-cell" id="startForm:Open" style="width:80%">
some data here
</td>
</tr>
</tbody>
</table>
There may be a better way to do this, depending on what/when/where you are trying to get the value (e.g. page load rule vs. event based rule), but in general, based on your html, here is one way to do it.
Go to Rules > Data Elements, and click on Create New Data Element.
Name the Data Element something like "table_header" or whatever convention you currently use.
For Type, choose "CSS Selector".
For CSS Selector Chain, use "th.rich-table-headercell" (no quotes).
For get the value of, select "text".
(Optional, but recommended) Check the Scrub whitespace and linebreaks using cleanText option.
Now, for example, you can create a page load rule, and use %table_header% in your condition(s) or variable field(s). Or, if you need to reference it in javascript in a custom code box, use _satellite.getVar('table_header')

Stripes: In jsp page html table pagination

I'm using stripes java framework. I have jsp page:
<table id="mlTable" style="">
<col width="200">
<col width="250">
<thead>
<tr>
<th align="center"><p>Name</p></th>
<th align="center"><p>Address</p></th>
</tr>
</thead>
<c:forEach items="${actionBean.mLocations}" var="ml">
<tr>
<td><p>${ml.name}</p></td>
<td><p>${ml.address}</p></td>
</tr>
</c:forEach>
</table>
In my actionbean I'm returning list:
public List<Location> getmLocations() {
mLocations = wrapperBean.getLocations();
return mLocations;
}
What I want is pagination because list is very long. And pagination must be asynchronous without reloading the page. Because I have also search field and that value must stay in field. And I don't want use DISPLAYTAG because I'm adding some custom classes to table. What can I do? please help
You could use a Javascript library such as List.js to paginate a HTML table client-side. This avoids refreshing the page, but if the amount of data is truly staggering, it may cause performance issues, since you're always downloading the whole thing (but only once per loading the page itself).

Categories