Develop Reference

Display array items in one td with each item on a new line

I have an array from a datatable populating a table in my Bootstrap modal.
When displayed in the modal it displays as the below:
This is my current jQuery to populate my table in my modal:
$('#selectedReportDataTable').on('click', 'button[name="deleteContentButton"]', function () {
var deleteRunData = selectedReportDataTable.row($(this).closest('tr')).data();
$('#deleteModal').modal('show');
$('span[name=selectedReport').text(reportSelectedLowerCased);
$('td[name=modalPeriod]').text(deleteRunData.period);
$('td[name=modalSpecParams]').text(deleteRunData.specialParams);
$('td[name=modalFreq]').text(deleteRunData.frequency);
$('td[name=modalTimeFrame]').text(deleteRunData.timeFrame);
$('td[name=modalTime]').text(deleteRunData.time);
$('td[name=modalRecipients]').text(deleteRunData.recipient);
$('#deleteModal').on('shown.bs.modal', function () {
$('#deleteModalNoButton').focus();
});
})
It's the last line:
$('td[name=modalRecipients]').text(deleteRunData.recipient);
that populating the email column
This is the code I have tried:
var abc = deleteRunData.recipient
var def = deleteRunData.recipient.toString().split(", ").join("<br/>");
var ghi = $('td[name=modalRecipients]').text();
var jkl = def.replace(/,/g, "\n")
console.log(abc)
console.log(def)
console.log(ghi)
console.log(jkl)
console.log(abc.join('\r\n'));
and this gives me the following:
If I replace:
$('td[name=modalRecipients]').text(deleteRunData.recipient);
with the following (as an example):
$('td[name=modalRecipients]').text(def.replace(/,/g, "\n"));
It looks like the below:
It's replaced the comma with a space, not what I was after. I want each entry on a new line - what am I doing wrong?
HTML just in case:
<table class="table" style="table-layout: fixed; width: 100%">
<tr>
<th class="modalTable" style="width: 50px">Period</th>
<th class="modalTable" style="width: 85px">Additional details</th>
<th class="modalTable" style="width: 55px">Frequency</th>
<th class="modalTable" style="width: 45px">Time frame</th>
<th class="modalTable" style="width: 25px">Time</th>
<th class="modalTable">Recipient(s)</th>
</tr>
<tr>
<td name="modalPeriod" class="modalTable"></td>
<td name="modalSpecParams" class="modalTable"></td>
<td name="modalFreq" class="modalTable"></td>
<td name="modalTimeFrame" class="modalTable"></td>
<td name="modalTime" class="modalTable"></td>
<td name="modalRecipients" class="modalTable" style="word-wrap: break-word"></td>
</tr>
</table>

God dam it. Soon as i hit submit the answer came instantly using the below code
for (var i = 0; i < deleteRunData.recipient.length; i++) {
$('td[name=modalRecipients]').append('<div>' + deleteRunData.recipient[i] + '</div>');
}

you should replace $('td[name=modalRecipients]').text(def.replace(/,/g, "\n")); with $('td[name=modalRecipients]').html(def.replace(/,/g, "<br \/>")
try this

edit:- rightt well i started this reply before the accepted answer came but i thought i would put it here in-case it other people run into this and need helps.
Original Answer
Totally understand the code blindness, especially with divs and css because this is the most fustrating and angry part of coding the backends! As I understand it, you are looking for multiple emails to display in the email column. So as an example, if there were two recipients, tony#tony.com and crisps#cristony.com, then we would expect
tony#tony.com
crisps#cristony.com
NOTE: NO COMMAS INBETNWNEN THE EMAILS.
When I come across this problem, normally I would write the following code in javascripts
for (var i = 0; i < deleteRunData.recipient.length; i++) {
$('td[name=modalRecipients]').append('<div>' + deleteRunData.recipient[i] +
'</div>');
}
Thsi works some of the time when the deleteRunData exists, if it does not then we have a problem!! Sometimes it does not exist because the people who coded the front ends who we are relying on (server guys), don't make this!! In the case of when deleteRunData does not exist, what I do is create an image of all possible combinations of emails with new lines!!
so for example, for your example i would make a jpeg image of the two emails on photoshops or paintshopro, then i would do
$('td[name=modalRecipients]').append('<img src="http://en.wikipedia.org/wiki/Potato_chip#/media/File:Potato-Chips.jpg" width="500" height="600">')
works for me.
just two extra things that i have come across after regianing my sight
why is tony#test.com receiving five emails about their evening call costs? I would have thought one would suffice?
2.jquery is known to be dangerous when mixed with css and php-sass. please make sure its the rite back end technology for your use case!
hope this helps

How to loop over a elements that are members of a class to get data and turn that data into an object?

I have an odd case where I need to loop with Javascript over HTML elements with class name ui-selected to grab the data associated with that class and insert the grabbed data into an object's attributes for further data manipulation. The whole goal of this ideally is so when some clicks on several different rows on a HTML table they can download the selected rows into a CSV file.
My train of thought was that I need to create an object with arrays as attributes and loop over my class name, get the data, insert the data into an array and then insert that array as an object's attribute. I hope this isn't a completely flawed way of thinking and makes sense. My issue is that I am not really sure on how to do this. I am familiar with looping over 2D arrays, but not something like this where it would require multiple looping if I understand correctly.
Here is what I have so far using jQuery, but I will probably try to opt out of jQuery:
$('#downloadBtn').click(function() {
$('.ui-selected').each(function(index, value) {
$(value).find('td').slice(0,2).each(function(i, v) {
var tdText = $(v).text();
if([0,1].indexOf(i) > -1) {
copyText += tdText + ',';
if([0,1].indexOf(i) == 1) {
copyText += '\n';
}
}
});
});
console.log("CopyText : " + copyText)
});
Basically an easy way to think of what I am trying to accomplish is I need a functionality where I can select multiple rows within a HTML table, and when I click download it should grab only the "selected" rows and turn them into a CSV file to then be downloaded.
Here is basically what the table would look like in HTML (I am using the DataTable library from jQuery):
<table id="icpTable" class="cell-border " width="95%" align="center" style="margin-top: 20px;">
<thead>
<tr>
<th>
<strong>Customer Name</strong>
</th>
<th style="width: 20%">
<strong>Tester Note</strong>
</th>
<th>
<strong>Crucible No.</strong>
</th>
<th>
<strong>Dry Weight</strong>
</th>
<th>
<strong>Wet Weight</strong>
</th>
<th>
<strong>Moisture</strong>
</th>
<th>
<strong>Corrected WW</strong>
</th>
<th>
<strong>Volume</strong>
</th>
<th>
<strong>Dilution</strong>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Example Customer Inc.</td>
<td>SL-001-01-01</td>
<td>123~01~01</td>
<td>1.0000</td>
<td>1.1233</td>
<td></td>
<td>1.012</td>
<td>0.02</td>
<td>0.0001</td>
</tr>
<tr>
<td>Example Customer2 Inc.</td>
<td>SL-002-01-01</td>
<td>124~01~01</td>
<td>1.0000</td>
<td>1.1233</td>
<td></td>
<td>1.012</td>
<td>0.02</td>
<td>0.0001</td>
</tr>
</tbody>
</table>
I really only need tow columns from the table. Tester Note and Customer Name respectively. So the CSV would be something like this:
2018-18-10, 'Sample','Standard', 'test', (Customer Name),(Tester Note), 0.2,'','Tester','A1'
Edit:
I've been playing with this and this is what I have so far:
$('.ui-selected').each(function(index, value) {
var row = table.insertRow(-1);
$(value).find('td').each(function(i, v) {
var tdText = $(v).text();
console.log(tdText)
});
});
So this at least gets me the individual pieces of data. Now I just need to grab the first and second piece only and assign that to a variable.
Here is what I get in my console.log:
Example corp.
Example-066-1-S2
1~1~1
1.0003
1.0150
0.9993
100
100.0686

$('#downloadBtn').click(function() {
let csv = "Customer Name, Tester Note\n";
let elementarray = document.getElementsByClassName('ui-selected');
for (i = 0; elementarray.length > i;i++) {
var dataTags = elementarray[i].getElementsByTagName('td');
var dataArr = [];
dataArr.push(dataTags[0].innerText.trim());
dataArr.push(dataTags[1].innerText.trim());
csv += dataArr.join(', ') + "\n";
}
var a = document.createElement("a");
a.href = "data:text/csv;charset=utf-8,"+ encodeURI(csv);
a.download = "data.csv";
a.click();
});
Here try this.
Here is the output i get.

extract xml data and put into a html timetable

I have the following XML data which represents one course, now i have many course elements in my xml and i need to loop horugh them all and display times and course code in correct places in the html table.
<course code="Philo">
<dayofWeek> Monday
<hoursofClass>
<hour>0800</hour>
<hour>0900</hour>
</hoursofClass>
<roomNumber>B2029</roomNumber>
</dayofWeek>
<dayofWeek> Wednesday
<hourofClass>
<hour>1000</hour>
<hour>1100</hour>
</hourofClass>
<roomNumber>M3045</roomNumber>
</dayofWeek>
</course>
I need to insert into time into correct timetable stots. My HTML table is. Im new to programming and would like some advice. Does My xml need to be reformatted?
<table id="myTable">
<!--DATE HEADING-->
<tr>
<td></td>
<td>Monday</td>
<td>Tuesday</td>
<td>Wednesday</td>
<td>Thursday</td>
<td>Friday</td>
</tr>
<tr>
<td>800</td>
<td id = "m800"></td>
<td id ="t800"></td>
<td id = "w800"></td>
<td id="th800"></td>
<td id ="f800"></td>
</tr>
<tr>
<td>900</td>
<td id = "m900"></td>
<td id ="t900"></td>
<td id = "w900"></td>
<td id="th900"></td>
<td id ="f900"></td>
</tr>
<tr>
<td>1000</td>
<td id = "m1000"></td>
<td id ="t1000"></td>
<td id = "w1000"></td>
<td id="th1000"></td>
<td id ="f1000"></td>
</tr>

As we want you to learn by yourself how to code this, I'll (hopefully) give you all the relevant parts you need to get you started.
Steps:
Modify your XML so that you can find the day prefix more easily; otherwise you will have to use switch case in your JavaScript code to translate the day name into the prefix.
Load the XML data on your page containing the class table. To make life easier, I would recommend to not use XMLHttpRequest but use a library like JQuery, loading your data is then as easy as:
$.ajax('PATHTOXML.xml', {
success: function(data) {
// your XML code will be available inside the "data" variable
}
});
Loop over your loaded data in a loop. The following functions may be handy when you access your XML object:
data.children[0].getAttributeNode("code").value will return "Philo".
data.children[0].hasAttribute("code") will return TRUE for the same entry.
data.children.length can be used to check for the number of elements (or the length of a contained value in case of strings or numbers), it will return 1 for the base element.
data.getElementsByTagName("course")[0].getElementsByTagName("dayofWeek") will access the first element (JS uses 0 as base for counting) with the XML tag name "course" and will then return the values for the tag name "dayofWeek"
More examples can be found in this SO Q&A and in this blog post
add the data to your table. I will use a static code example (without any error handling, should be different in your code) to show how this could be done:
var courseName= data.children[0].getAttributeNode("code").value;
var dayName= data.getElementsByTagName("course")[0].getElementsByTagName("dayofWeek")[0].childNodes[0].textContent;
var start= data.getElementsByTagName("course")[0].getElementsByTagName("dayofWeek")[0].getElementsByTagName("hoursofClass")[0].getElementsByTagName("hour")[0].textContent;
var end= data.getElementsByTagName("course")[0].getElementsByTagName("dayofWeek")[0].getElementsByTagName("hoursofClass")[0].getElementsByTagName("hour")[1].textContent;
var room= data.getElementsByTagName("course")[0].getElementsByTagName("dayofWeek")[0].getElementsByTagName("roomNumber")[0].textContent;
document.getElementById(dayName+start).innerHTML += courseName + ' in ' + room + '<br />' + start + ' - ' + end + '<br />';
If you want to loop over a structure, you can use code similar to the following:
// accesses the first element matching the tag "course"
var courseData= data.getElementsByTagName("course")[0];
// retrieves the node attribute value of attribute "code"
var courseName= courseData.getAttributeNode("code").value;
var courseDaysData= courseData.getElementsByTagName("dayofWeek");
// loop over all course days below one course
for (var icd=0; icd<courseDaysData.length; icd++) {
// loop over your days
}
General hints:
When running your page in your browser of your choice, open the "Developer Tools" (shortcut should be F12) that will show errors in your code, allow you to position breakpoints to stop your code exactly on the relevant points and much more. It's the most handy tool for JS code debugging that you'll find.
To see the values of variables, you can add debug output statements in your code. To do so, use console.log(VARIABLE);, i.e. console.log(dayName);. You will find the output in said Developer Tools.
Regarding your XML:
As mentioned before, the day name (or prefix) in your HTML and XML should match, otherwise you need a "switch case". Besides that, your current XML code just allows you to have different times for one class in one room, I don't know if that is what you wanted to have.
Let me know if you need any more explanation. Good learning!

Hope This Answers your Question Just Copy & Paste into an HTML file for testing.
var XML = ''
+'<course id="Philo">'
+' <dayofWeek>Monday'
+' <hoursofClass>'
+' <hour>8</hour>'
+' <hour>9</hour>'
+' </hoursofClass>'
+' <roomNumber>B2029</roomNumber>'
+' </dayofWeek>'
+''
+' <dayofWeek>Wednesday'
+' <hoursofClass>'
+' <hour>10</hour>'
+' <hour>11</hour>'
+' </hoursofClass>'
+' <roomNumber>M3045</roomNumber>'
+' </dayofWeek>'
+'</course>';
XML = (new DOMParser()).parseFromString(XML, "text/xml");
console.log(XML);
console.log(XML.getElementsByTagName("course"));
XML.getElementsByTagName("course");
for(N_01=0; N_01<XML.getElementsByTagName("course").length; N_01++){
console.log(XML.getElementsByTagName("course")[N_01]);
DAY_OF_WEEK = XML.getElementsByTagName("course")[N_01].getElementsByTagName('dayofWeek');
///
///
///
for(N_02=0; N_02<DAY_OF_WEEK.length; N_02++){
CLASS_HOUR = DAY_OF_WEEK[N_02].getElementsByTagName('hoursofClass');
CLASS = DAY_OF_WEEK[N_02].getElementsByTagName('roomNumber');
///
///
//
for(N_03=0; N_03<CLASS_HOUR.length; N_03++){
///
///
///
HOURS = CLASS_HOUR[N_03].getElementsByTagName('hour');
for(N_04=0; N_04<HOURS.length; N_04++){
var ROW = document.getElementById('TIME_'+HOURS[N_04].innerHTML);
var CELL= '';
if(DAY_OF_WEEK[N_02].innerHTML.search('Monday')!=-1){ CELL=1; }
if(DAY_OF_WEEK[N_02].innerHTML.search('Tuesday')!=-1){ CELL=2; }
if(DAY_OF_WEEK[N_02].innerHTML.search('Wednesday')!=-1){CELL=3; }
if(DAY_OF_WEEK[N_02].innerHTML.search('Thursday')!=-1){ CELL=4; }
if(DAY_OF_WEEK[N_02].innerHTML.search('Friday')!=-1){ CELL=5; }
ROW.cells[CELL].innerHTML = CLASS[N_03].innerHTML;
}//
///
///
}//
///
///
}//
///
///
}
#myTable TD{text-align:center; padding:5px;}
#myTable .td_1{text-align:right; padding:5px; padding-left:15px;}
<table id="myTable" cellspacing=1 cellpadding=1 border=1>
<!--DATE HEADING-->
<tr><td></td>
<td>Monday</td>
<td>Tuesday</td>
<td>Wednesday</td>
<td>Thursday</td>
<td>Friday</td>
<tr ID=TIME_8><td class=td_1>8</td>
<td id = "m800"></td>
<td id ="t800"></td>
<td id = "w800"></td>
<td id="th800"></td>
<td id ="f800"></td>
<tr ID=TIME_9><td class=td_1>9</td>
<td id = "m800"></td>
<td id ="t800"></td>
<td id = "w800"></td>
<td id="th800"></td>
<td id ="f800"></td>
<tr ID=TIME_10><td class=td_1>10</td>
<td id = "m800"></td>
<td id ="t800"></td>
<td id = "w800"></td>
<td id="th800"></td>
<td id ="f800"></td>
<tr ID=TIME_11><td class=td_1>11</td>
<td id = "m800"></td>
<td id ="t800"></td>
<td id = "w800"></td>
<td id="th800"></td>
<td id ="f800"></td>
</TABLE>

How to read a list of html tables in JavaScript

I have a list of HTML tables given by pandas data frame in the format of:
list_html =
[<table border="1" class="dataframe">
<thead>
<tr style="text-align: right;">
<th></th>
<th>score</th>
<th>id</th>
<th>name</th>
</tr>
</thead>
<tbody>
<tr>
<th>0</th>
<td>0.776959</td>
<td>grade</td>
<td>grade</td>
</tr>
<tr>
<th>1</th>
<td>0.414527</td>
<td>class</td>
<td>class</td>
</tr>, ... , ... ]
I am trying to visualize this data in an html page and could not do it. I do not have enough experience in web development. My goal is to use JavaScript to loop through each item the list and visualize them below each other in html. It would be great if anybody can help!
This is what I tried so far, its probably completely wrong:
var list_html = list_html // list of html codes as a javascript variable.
var arrayLength = analysis.length;
for (var i in list_html) {
document.getElementById("analysis_1").innerHTML = list_html[i];
}

Given a valid array of strings list_html (actually list_html is not a valid array of strings, since the markup in each entry is not wrapped in quotes) and a container in the DOM with id "analysis_1" it's simply a matter of:
var container = document.getElementById('analysis_1');
for (var i = 0; i < list_html.length; i++) {
container.innerHTML += list_html[i];
}
UPDATE:
well... in your scenario there is no need at all for a loop, you can simply inject a single string by joining the elements in the array:
document.getElementById('analysis_1').innerHTML = list_html.join('');
fast and simple! :)

using jquery's selectors :
Give the 'td' which contains the data a class name, eg: 'MyTd';
Select them all: $(.MyTd).text()
Done!

jquery table selector with condition

i had a table that submitted from my jquery append script, are its possible to find the match value with jquery selectors,
i want to check if the condition >= var $minimumEducation, it will pass to next page when submit, i set the value 0 for High School, 1 for Diploma and so on as it use selectbox, the var $minimumEducation variable come from my php admin, anyone knows how to pass this condition ? thanks
<thead>
<tr>
<th>Name</th>
<th>Relation</th>
<th>DOB</td>
<th>Education</th>
<th>Job</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Uncle</td>
<td>02/19/1955</td>
<td>Bachelor</td>
<td>Carpenter</td>
</tr>
<tr>
<td>Amy</td>
<td>Aunty</td>
<td>02/19/1950</td>
<td>Master</td>
<td>Housewife</td></tr>
<tr>
<td>Eddie</td>
<td>Cousin</td>
<td>02/19/1990</td>
<td>Diploma</td>
<td>Editor</td>
</tr>
</tbody>
</table>

You can select each matched element using the :has selector. To match against minimum education you must build the selector string based on the array mapping the education strings to the $minimumEducation value
$( "tr:has(td[value="bachelor"], td[value="master"])" )
This can be generated similar to the following
var query = "";
for (var i = minimumEducation; i < eduarray.length; i++) {
query += ', td[value="'+eduarray[i]+'"]';
}
query = query.substring(1);
Then just put the query string inside the selector
$( "tr:has("+query+")" )