one column value to display another column with if condition using DataTable - javascript

Need to display column base on another column value like below
data: 'username',
render: function (data, type) {
if ({data:"status"} === 'N') {
return ` ${data}`;
} else {
console.log(data)
return data;
}
}
Need display link while status is N but every time it is showing without link.

Here is the answer below, If you want to check the condition with another field value. So you need to add a row in the render function and this row will give you all current row field details so you can check with any condition or anything in it.
data: 'username',
render: function (data, type, row) {
if (row.status === 'N') {
return ` ${data}`;
} else {
return data;
}
}

Related

Why value of p is false? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
Here i am try to check if a particular value is exists in the column or not .if exists then I want to add field else I don't want .but p value is false even though the data exists in that particular column .it is showing true for the first time. from the next time onwards it is false.
$('#attach').click((e) => {
e.preventDefault();
var len = $('#tablefd03 tbody tr').length;
debugger;
if (len == 0) {
$("input[id=fd03_Fd03FormFieldSeq]").val(1);
}
else {
var val = prompt("enter the previous order ");
if (!val) return;
else if (isNaN(val)) return alert("Please enter a number !");
else {
var p = false;
$('#tablefd03 tbody tr').each(function (index, el) {
debugger;
if ($(el).children().eq(4).text() == parseInt(val)) {
//s = value;
p = true;
}
else {
p = false;
}
})
if (p) {
$("input[id=fd03_Fd03FormFieldSeq]").val(parseInt(val) + 1);
}
else {
return false;
}
}
}
var form = $('#myform').serialize();
if (!$('#myform').valid()) {
return
}
$.ajax({
url: "/FormDesign/Attach",
method: "POST",
data: form,
})
.done(function (data) {
if (data.isValid) {
//var len=$('#tablefd03 tr').length);
notif({
type: "success",
msg: "Attached successfully",
timeout: 5000,
})
alert("Data Loaded: " + JSON.stringify(data));
//$('#h').replaceWith("#p")
$('#_view-all').html(data.html.fd02partialview);
$('#partialfd03').html(data.html.fd03partialview);
sessionStorage.setItem('user', JSON.stringify(data));
reset();
}
alert("failed")
});
})
As others have said, the problem is with your each loop. If the last row isn't the one you're looking for, then p is going to be false because your code loops through the entire array of rows. What you want to do instead is find the row you're looking for and return as soon as you have it, or return falsey if you don't.
I haven't used jQuery in a long time, so I'll write up an answer for you with regular JavaScript. This is very easy to do with Array.find().
const rowEl = [...document.querySelectorAll('#tablefd03 tbody tr')].find((rowEl) => {
return [...rowEl.querySelectorAll('td')][4]?.textContent === val;
});
In this code, rowEl will contain the row you want, if found. Otherwise rowEl will be undefined.
The .find() method loops through each element of the array until the callback function returns truthy.
We check each row's cell with index 4 (if exists) for textContent and compare against val. If they're equal, this callback will return true, which will cause .find() to stop searching and return the current row. This will be assigned to rowEl.
You didn't provide any HTML to test with, so I'll leave any debugging or implementation to you. Hopefully this gets you started.

unable to get original array back after filter removed in angular?

i have an array in my component and based on the searchString i am filtering the array of items. and it is working fine.
if user removes the characters from the search field i want to show all the records again. but i am unable to show all records again when clearing the items from the search field.
please see below code.
this.filterServ.filterData.subscribe(searchData => {
if (Object.keys(searchData).length != 0) {
console.log('component', searchData);
this.cardData = this.cardData.filter((project) => {
let name = project.Name.toLowerCase();
if (name.includes(searchData.searchString.toLowerCase())) {
return true;
}
});
console.log('filterd data', this.cardData);
}
});
You already mutated the cardData. Therefore, you can't revert it back.
The solution is to create another property, for example you can name it displayData.
Then you can do like:
this.displayData = this.cardData.filter((project) => {
and instead of using cardData on the template, use displayData instead
Declare field filterData and bind this field in the template.
this.filterServ.filterData.subscribe(searchData => {
if (Object.keys(searchData).length != 0) {
console.log('component', searchData);
this.filterData= this.cardData.filter((project) => {
let name = project.Name.toLowerCase();
if (name.includes(searchData.searchString.toLowerCase())) {
return true;
}
});
console.log('filterd data', this.cardData);
}
});
Hope this help!
You should take copy of array data before filtering, and return the original array if input text is empty.
private originalData;
this.originalData = this.cardData.slice();
this.filterServ.filterData.subscribe(searchData => {
if (Object.keys(searchData).length != 0) {
console.log('component', searchData);
this.cardData = this.originalData.filter((project) => {
let name = project.Name.toLowerCase();
if (name.includes(searchData.searchString.toLowerCase()))
{
return true;
}
});
console.log('filterd data', this.cardData);
}
});

Protractor - How to use multi filters to find out the target row

I want to filter out the target row which contains the specific text in the cell of cells belong to this row.
Here is my code:
private selectTargetLicense(licenseName: string) {
return new Promise((resolve => {
element.all(by.tagName('clr-dg-table-wrapper')).first().all(by.tagName('clr-dg-row')).filter(function (row_element) {
return row_element.all(by.tagName('clr-dg-cell')).filter(function (cell) {
return cell.getWebElement().getText().then(function (text) {
return text.trim() === licenseName;
})
})
}).first().getWebElement().click().then(() => {
resolve();
})
}))
}
It not works as what I think that failed to get the target row from the rows in the table.
So how should I use the multi filter correctly?
Thanks.
It's quite hard to investigate your code without HTML code. Could you show it us?
Do you want to click a cell with given text or entire row?
Code for clicking the cell:
private selectTargetLicense(licenseName: string) {
const rows = element.all(by.css('clr-dg-table-wrapper:nth-of-type(1) clr-dg-row clr-dg-cell'));
return rows.filter((row_element) => {
return row_element.getText().then((text) => {
return text.trim() === licenseName;
});
}).first().click();
}
No need to use nested filter, filter on rows is sufficient.
private selectTargetLicense(licenseName: string) {
const rows = element(by.css('clr-dg-table-wrapper')).all(by.css('clr-dg-row'));
rows.filter((row) => {
// read text of all cells of one row into array: txts
return row.all(by.css('clr-dg-cell')).getText().then((txts) => {
return txts.map((it)=>{
// trim each text
return it.trim();
})
// use array.includes() to detect row contains specified licenseName
.includes(licenseName);
});
})
.first()
.click();
}

How to compare forEach value with selected dropdown value in jquery

var externalData = [{ "sedesc": "TAX 1040-2000" },
{ "sedesc": "TAX 1040-2005" }
];
var extData;
externalData.forEach(function (data) {
console.log(data.sedesc)
extData = data.sedesc
})
onApprove: function(){
if ($('#extservicecode option:selected').text() === extData ) {
alertify.error("Duplicates are not allowed");
}
}}
This is my jquery code. I have a dropdown ($('#extservicecode option:selected').text()) in which if I select any of the above value of "data.sedesc" it should display an error message . I need to compare the selected value with the value already present.
UPDATE
externalData.forEach(function (data) {
console.log(data.Scdesc)
duplicatedData = data.Scdesc
})
if ($('#extservicecode option:selected').text() === duplicatedData) {
alertify.error("Duplicates are not allowed");
}
Get the value on change and then compare the selected value with the values in your array.
$('button').on('click', function() {
const value = $('#extservicecode option:selected').text();
externalData.forEach(function (data) {
if (value === data) {
// duplicate value found
}
});
});
According to your onApprove method
onApprove: function(){
// Get the dropdown value
const duplicateData = null;
const value = $('#extservicecode option:selected').text();
// iterate over external data
externalData.forEach(function (data) {
// check if dropdown value has one of the duplicate value
if (value === data) {
duplicateData = data;
// duplicate value found
}
});
// duplicateData can be used here
// dropdown value is valid
}
You need to listen to the change event of the dropdown and put that if statement in the event handler.
// simplify the check by making an array of strings to match against
var sedescList = externalData.map(function(item) {
return item.sedesc;
}
$('#extservicecode').change(function() { //set change handler for select element
$('#extservicecode option:selected').each(function() { //check each selected option
if (sedescList.includes($(this).text())) { //check if text is one of the elements of sedescList
alertify.error("Duplicates are not allowed");
}
}
}

How can execute a block of code with loops into the intern framework

I´m using intern framework with selenium, I want to execute a loop which look for elements in the table. The loop find each element and saves them in array, after the elements will be obtained to do operations later.
The idea is next:
browser.wait(2000)
.then(function () {
while (true) {
ifHasElements=browser.isDisplayed("/html/body/div[1]/div[5]/div[3]/div/div[3]/div[1]/table[2]/tbody/tr["+contRowsTable+"]").end()
if (ifHasElements) {
console.log("into if")
browser.elementByXPath("/html/body/div[1]/div[5]/div[3]/div/div[3]/div[1]/table[2]/tbody/tr["+contRowsTable+"]/td[1]")
.clickElement()
.end()
rows[contRowsTab]=browser.elementByXPath("/html/body/div[1]/div[5]/div[3]/div/div[3]/div[1]/table[2]/tbody/tr["+contRowsTable+"]")
} else {
break
}
contRowsTab++;
contRowsTable++;
}
})
I dont know if I execute a loop and at the same time obtain elements into the then block. Somebody who can help me with this, thanks a lot..
Try something like:
var visibleRows = [];
var stopStoring = false;
return browser
.wait(2000)
.then(function () {
return this.parent
// find all the rows
.findAllByXpath('/html/body/div[1]/div[5]/div[3]/div/div[3]/div[1]/table[2]/tbody/tr')
.then(function (rows) {
// store the visible rows until the first non-visible row is encountered
return rows.reduce(function (chain, row) {
return chain.then(function () {
return row
.isVisible()
.then(function (isVisible) {
if (!isVisible) {
stopStoring = true;
}
if (isVisible && !stopStoring) {
visibleRows.push(row);
}
});
});
}, this.parent);
})
.then(function () {
// for each visible row, click the first td in the row
return visibleRows.reduce(function (chain, row) {
return chain
.findByXpath('./td[1]')
.click()
.end();
}, this.parent);
});
});
In this code I'm first finding and storing the first contiguous run of visible rows. Then, for each of those rows, I click the first table cell in the row.

Categories