Why is nan being added to data? - javascript
I make an ajax call to a servlet which sends JSON data. I parse it with JSON.parse() and put it into a string to display in table tag in html. But with every row cell data it is showing NaN. I have checked the data there is no NaN.
Here's the code.
var dataFromJSON = JSON.parse(result);
var count = dataFromJSON.count;
var str = "<table id='customers'><tr><th>LOGGED DATE</th></tr>";
for (var i = 0; i < count; i++) {
str += "<tr><td>" + dataFromJSON.records[i].common.logged_date +
+"</td>";
str += "</tr>";
}
str += "</table>";
$("#data").html(str);
The data in dataFromJSON.records[i].common.logged_date is 2016-02-23 10:11:43, but the table shows 2016-02-23 10:11:43NaN.
Please help.
Here:
str += "<tr><td>" + dataFromJSON.records[i].common.logged_date+
+ "</td>";
You have two + right after another. The browser tries to interpret this whitespace as a number
Remove one of the +.
You have put ++ please use only +
var dataFromJSON = JSON.parse(result);
var count = dataFromJSON.count;
var str = "<table id='customers'><tr><th>LOGGED DATE</th></tr>";
for (var i = 0; i < count; i++) {
str += "<tr><td>" + dataFromJSON.records[i].common.logged_date +"</td>"; //chnage here
str += "</tr>";
}
str += "</table>";
$("#data").html(str);
Related
How to insert dynamic string into HTML [duplicate]
This question already has answers here:
How to render HTML in string with Javascript?
(5 answers)
Closed 2 years ago.
I am trying to make a JS function that takes a JS array and uses the content to make an HTML table but when I try to use the code, the table doesn't show on my Website. This is the function that I am using and I tried calling the function using a button:
<input type = "button" onclick = "makeTableHTML()" value = "Display">
<script>
function makeTableHTML() {
var result = "<table class=\"table table-bordered table-striped\">";
result += "<thead>";
result += "<tr>";
result += "<th>RIF</th>";
result += "<th>Nombre</th>";
result += "</tr>";
result += "</thead>";
result += "<tbody id=\"myTable\">";
for(var i=0; i<arreglo_rif.length; i++) {
result += "<tr>";
result += "<td>"+arreglo_rif[i]+"</td>";
result += "<td>"+arreglo_nombre[i]+"</td>";
result += "</tr>";
}
result += "</tbody>";
result += "</table>";
console.log(result);
return result;
}
</script>
but when I click on the button the table doesn't show either.
var arreglo_rif=['one','two','three']
var arreglo_nombre=[1,2,3]
function makeTableHTML() {
var result = "<table class=\"table table-bordered table-striped\">";
result += "<thead>";
result += "<tr>";
result += "<th>RIF</th>";
result += "<th>Nombre</th>";
result += "</tr>";
result += "</thead>";
result += "<tbody id=\"myTable\">";
for(var i=0; i<arreglo_rif.length; i++) {
result += "<tr>";
result += "<td>"+arreglo_rif[i]+"</td>";
result += "<td>"+arreglo_nombre[i]+"</td>";
result += "</tr>";
}
result += "</tbody>";
result += "</table>";
document.getElementById('container').innerHTML = result;
}
<input type = "button" onclick = "makeTableHTML()" value = "Display">
<div id='container'></div>
Grabbing value of input to string
I am completing a project which contains the following code. All that needs to be fixed is the start of each line. For example, if I used the input "8" it wouldn't reveal the full line of working, instead each line starts with a multiplication sign. Same goes for the other side which has bullet points. I wish to keep the bullet points but also have my input value on each line. I have tried using an id for my value, but it was unsuccessful.
Any advice or assistance would be greatly appreciated,
Cheers.
<html>
<head>
</head>
<body>
<h2 style="color:blue;">Enter an integer from 1 to 9:</h2>
<input type="text" id="multipleOf" value="">
<button onclick="multiplier()">Generate Times Table</button>
<div style="color:blue;" id="multTable"> <h2>Multiplication Table</h2> </div>
<script type="text/javascript">
//<![CDATA[
function multiplier() {
var mult = document.getElementById('multipleOf').value;
var str = '<table border="0" width="100%"><tr><td>';
str += '';
str += '';
for (var i=1; i<10; i++) {
str += '<br />';
str += '' + ' x ' + i + ' = ';
str += mult * i;
str += '';
str += '';
}
str += '</td><td>';
for (var i=1; i<10; i++) {
str += '<br />';
str += '•' + ' x ' + i + ' = ';
str += mult * i;
str += '';
str += '';
}
str += ''
str += '</td></tr></table>';
document.getElementById('multTable').innerHTML = '<h2>Multiplication
Table</h2>'+str;
}
//]]>
</script>
</body>
</html>
mult already contains the first operand, so it just needs to be added to str in the loops:
for (var i = 1; i < 10; i++) {
str += "<br />";
str += mult + " x " + i + " = "; // Concatenating mult here.
str += mult * i;
str += "";
str += "";
}
for (var i = 1; i < 10; i++) {
str += "<br />";
str += mult + "•" + " x " + i + " = "; // Concatenating mult here.
str += mult * i;
str += "";
str += "";
}
Generate HTML table and load it in div element
I'd like to load a HTML table into a div-element (id="resultDataDistancesTable") - but the generated string isn't processed (no matter if I use html(), append() or innerHTML). There is no error in the console.
When I paste the console.log(..) output directly to the HTML page I get the table that I want - so why doesn't my JavaScript code work? Is something wrong with the string?
var response = {"distances":[[0,4569,17264,6074,4986,12430,10936,11729,11280,23714,19112,24070,24974,25809,24157,27636,27323,15690,27970,22152],[4837,0,9160,1879,1872,12492,10755,15237,14468,21251,16649,17650,20574,23346,21694,31144,30831,13227,23141,19689],[17807,9681,0,8419,14314,25164,23427,28206,27140,11709,17204,18205,21130,23901,22249,30219,29906,4147,23696,10294],[6156,1736,8271,0,3191,12812,8437,16555,14788,22085,17483,18484,21408,24180,22528,30498,30185,14061,23975,20523],[5438,1642,14335,3147,0,12796,11058,15838,14771,20785,16183,17184,20108,22880,21228,31745,31432,12761,22674,19223],[12266,13371,25607,10970,13329,0,1842,20750,6094,32057,27455,28455,31380,34152,32500,37248,36935,24033,37581,30495],[10434,11651,16093,8428,11608,1842,0,19509,7092,30336,25734,26735,29659,32431,30779,35416,35104,22312,35750,28774],[12355,15633,28328,17138,16050,19963,20849,0,6457,34778,30176,26719,27624,33122,31702,30285,29973,26754,30619,33216],[11054,14433,26669,14776,14391,6088,9450,10828,0,33119,28517,36279,37184,35214,33562,39846,39533,25095,40179,31557],[21936,20085,11649,19803,18444,29293,27556,32335,31269,0,2943,8201,8702,10694,9042,17012,16699,8876,11268,5269],[19141,17291,16426,17009,15649,26499,24762,29541,28475,2924,0,5407,6515,9365,7713,15683,15370,14852,9082,6033],[22777,19065,18201,18783,17424,28274,26536,25758,31348,8188,5556,0,2979,5144,6115,10994,10681,16626,5493,10239],[23722,21760,20895,21478,20118,30968,29231,26703,32292,8634,6627,2994,0,2715,3388,4505,4192,19321,3110,11521],[29801,24947,24082,24665,23305,34155,32417,32782,38371,9673,8179,5136,2704,0,2345,4277,3964,22508,1703,15331],[25139,23289,22424,23007,21647,32497,30760,30797,34473,8016,6521,6129,3394,2340,0,5174,4862,20850,3779,13673],[26964,30242,30040,31748,30660,36952,35458,29945,35534,16511,10598,10365,4526,4274,5182,0,336,28466,1821,15492],[26628,29906,29704,31412,30324,36616,35122,29609,35198,16175,10262,10029,4190,3938,4846,313,0,28130,1485,15156],[16108,9772,4136,13975,12616,23466,21728,26507,25441,8931,10916,11916,14841,17613,15961,23930,23617,0,17407,7516],[27163,30441,23429,24012,22653,37151,35657,30144,35733,11168,9161,5495,3089,1703,3746,1686,1373,21855,0,14055],[22592,20741,10188,20459,19100,29949,28212,32991,31925,5369,5909,10225,11565,14414,12762,20732,20419,7415,14131,0]]};
buildResultTableDistances();
function buildResultTableDistances() {
var tbl;
var tr_head = "<table><tr><td>distances [meters]</td>";
for (var i = 0; i < 20; i++) {
tr_head += "<td><b>" + "dummy" + "</b></td>";
}
tr_head += "</tr>";
tbl = tr_head;
for (var i = 0; i < 20; i++) {
var row = "<tr><td><b>" + "dummy" + "</b></td>";
for (var ii = 0; ii < 20; ii++) {
row += "<td>" + response.distances[i][ii] + "</td>";
}
row += "</tr>";
tbl += row;
}
tbl += "</table>";
console.log(tbl);
$('#resultDataDistancesTable').html(tbl);
}
I suspect you forgot to insert the HTML or including jQuery, because it works fine here. If you want, to do this solely in JavaScript by adding the element in jQuery:
$(document.body).append('<div id="resultDataDistancesTable"></div>');
var response = {"distances":[[0,4569,17264,6074,4986,12430,10936,11729,11280,23714,19112,24070,24974,25809,24157,27636,27323,15690,27970,22152],[4837,0,9160,1879,1872,12492,10755,15237,14468,21251,16649,17650,20574,23346,21694,31144,30831,13227,23141,19689],[17807,9681,0,8419,14314,25164,23427,28206,27140,11709,17204,18205,21130,23901,22249,30219,29906,4147,23696,10294],[6156,1736,8271,0,3191,12812,8437,16555,14788,22085,17483,18484,21408,24180,22528,30498,30185,14061,23975,20523],[5438,1642,14335,3147,0,12796,11058,15838,14771,20785,16183,17184,20108,22880,21228,31745,31432,12761,22674,19223],[12266,13371,25607,10970,13329,0,1842,20750,6094,32057,27455,28455,31380,34152,32500,37248,36935,24033,37581,30495],[10434,11651,16093,8428,11608,1842,0,19509,7092,30336,25734,26735,29659,32431,30779,35416,35104,22312,35750,28774],[12355,15633,28328,17138,16050,19963,20849,0,6457,34778,30176,26719,27624,33122,31702,30285,29973,26754,30619,33216],[11054,14433,26669,14776,14391,6088,9450,10828,0,33119,28517,36279,37184,35214,33562,39846,39533,25095,40179,31557],[21936,20085,11649,19803,18444,29293,27556,32335,31269,0,2943,8201,8702,10694,9042,17012,16699,8876,11268,5269],[19141,17291,16426,17009,15649,26499,24762,29541,28475,2924,0,5407,6515,9365,7713,15683,15370,14852,9082,6033],[22777,19065,18201,18783,17424,28274,26536,25758,31348,8188,5556,0,2979,5144,6115,10994,10681,16626,5493,10239],[23722,21760,20895,21478,20118,30968,29231,26703,32292,8634,6627,2994,0,2715,3388,4505,4192,19321,3110,11521],[29801,24947,24082,24665,23305,34155,32417,32782,38371,9673,8179,5136,2704,0,2345,4277,3964,22508,1703,15331],[25139,23289,22424,23007,21647,32497,30760,30797,34473,8016,6521,6129,3394,2340,0,5174,4862,20850,3779,13673],[26964,30242,30040,31748,30660,36952,35458,29945,35534,16511,10598,10365,4526,4274,5182,0,336,28466,1821,15492],[26628,29906,29704,31412,30324,36616,35122,29609,35198,16175,10262,10029,4190,3938,4846,313,0,28130,1485,15156],[16108,9772,4136,13975,12616,23466,21728,26507,25441,8931,10916,11916,14841,17613,15961,23930,23617,0,17407,7516],[27163,30441,23429,24012,22653,37151,35657,30144,35733,11168,9161,5495,3089,1703,3746,1686,1373,21855,0,14055],[22592,20741,10188,20459,19100,29949,28212,32991,31925,5369,5909,10225,11565,14414,12762,20732,20419,7415,14131,0]]};
buildResultTableDistances();
function buildResultTableDistances() {
var tbl;
var tr_head = "<table><tr><td>distances [meters]</td>";
for (var i = 0; i < 20; i++) {
tr_head += "<td><b>" + "dummy" + "</b></td>";
}
tr_head += "</tr>";
tbl = tr_head;
for (var i = 0; i < 20; i++) {
var row = "<tr><td><b>" + "dummy" + "</b></td>";
for (var ii = 0; ii < 20; ii++) {
row += "<td>" + response.distances[i][ii] + "</td>";
}
row += "</tr>";
tbl += row;
}
tbl += "</table>";
$('#resultDataDistancesTable').html(tbl);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="resultDataDistancesTable"></div>
I could replicate your issue using Plunker: http://plnkr.co/edit/QxklTx0R6WcYwpRIpd98 has the fix. You weren't waiting for the DOM to be loaded before attempting to append to the object. See line 3:
$("document").ready(function() {
buildResultTableDistances();
});
Should work then.
javascript/json nested for and for/in loops in framework7 popups
Hi all I hope someone can help Im a bit stuck single developer on own , with the below what im trying to do is nest for loops, I have data back at the var = I; but not at the next two for statements, when the popup is called only the last record comes back I can see in console the data is there and the ids for the link and the data within do illicitate around , however only the last record appears I haven't uploaded the json because its a really long script any help on this would be very appreciated I have been playing with nested loops and got them to work just not in the bellow I normally use for/in apparently that's bad practice from what ive read up so changed to flat for loops.
<pre> $.getJSON('myurl', function (data) {
console.log(data);
var data = data.sponsor;
var output = "";
var myApp = new Framework7();
var $$ = Dom7;
output += "<ul>";
for (var i = 0; i < data.length; i++) {
output += "<li class='list-block media-list sponsors list-block-search '>";
output += "<div class='item-media-auto'>" + data[i].images + "</div>"; //working
output += "<div class='item-inner'>";
output += "<div class='item-title-row'>";
output += " <div id='name' class='item-title'>" + data[i].title + data[i].id +"</div>";
output += "</div>";
output += "<a href=" + data[i].custom['panaone_sponsorurl'] + " target='_blank'>";
output += data[i].custom['panaone_sponsorurl'];
output += "</a>";
output += ' <p>Create Popup</p>';
output += "</li>";
document.getElementById("placeholder").innerHTML = output;
output += "</ul>";
}
for (var l = 0; l < data.length; l++) {
$$('.create-popup'+ data[l].id).on('click', function () {
for (var j = 1; j < data.length; j++) {
var popupHTML = '<div class="popup '+ data[j].id + '">'+
'<div class="content-block ">'+
'<p>Popup created dynamically.'+ data[j].id + '</p>'+
'<p>Close me</p>'+
'</div>'+
'</div>'+
myApp.popup(popupHTML);
}
});
}
});
}
</pre>
How to render search results in a different page with Ajax
I have a web page configured with the search form in one php page and the table with search results in another and I have the following javascript function that renders the table with the search results:
function createRestaurantsTable() {
var table = document.createElement('table');
var str = '<table cellspacing="1" class="tablesorter">';
str += '<thead><tr><th>Nome</th><th>Morada</th><th>Distancia</th></tr></thead>';
for ( var i=0; i< restaurantArr.length; i++){
str += '<tr><td><center class="IDcell">' + restaurantArr[i].name + '</center></td><td><center>' + restaurantArr[i].address + '</center></td><td><center>' + restaurantArr[i].distance.toFixed(2) + ' m</center></td></tr>';
}
str += '</table>';
str += "<div id='pager' class='pager'>";
str += "<form>"
str += "<img src='Tools/jquery.tablesorter/addons/pager/icons/first.png' class='first'/>";
str += "<img src='Tools/jquery.tablesorter/addons/pager/icons/prev.png' class='prev'/>"
str += "<input type='text' class='pagedisplay'/>";
str += "<img src='Tools/jquery.tablesorter/addons/pager/icons/next.png' class='next'/>";
str += "<img src='Tools/jquery.tablesorter/addons/pager/icons/last.png' class='last'/>";
str += "<select class='pagesize'>"
str += "<option selected='selected' value='5'>5</option>"
str += "<option value='10'>10</option>";
str += "<option value='15'>15</option>";
str += "<option value='20'>20</option>";
str += "<option value='25'>25</option>";
str += "<option value='30'>30</option>";
str += "<option value='35'>35</option>";
str += "<option value='40'>40</option>";
str += "<option value='45'>45</option>";
str += "<option value='50'>50</option>";
str += "</select>";
str += "</form>";
str += "</div>";
document.getElementById('restaurants_table').innerHTML = str;
$("table").tablesorter({headers: { 0:{ sorter: false }, 1:{ sorter: false }, 2: { sorter: false }}, widthFixed: true ,widgets: ['zebra']}).tablesorterPager({container: $("#pager")});
$('tr').click(function(event) {
var id = $(this).find(".IDcell").html();
if(id) {
window.location = "index.php?action=register_details&details_view_id=" + id + "&operation=v";
}
});
}
I have a lot more JavaScript code but i think this is enough to show my problem.
How do i render the table if the search form is in another php page?
Thanks in advance!
Firstly, you might want not to mix three techniques and try to use just one:
Writing HTML as string can be replaced with JQuery. For instance:
$("<div>").attr("id", "pager").append(...)
Addressing element by Id by native javascript can be replace with JQuery. (The first technique is faster, but this is rather about simplicity and using one technique instead of mixing them. For inst.:
$("#restaurant_table).html(insertedHtml);
You might event want to generate your pager like this:
$("<div>").attr("id", "pager").append(...).appendTo("#restaurant_table");
I guess you should address the tablesorter at least by its class:
$("table.tablesorter")
If you generate the structures on-the-fly, you might rather use "live" binder instead of the click binder - the click binder will address only those, which are already constructed by the browser:
$("table.tablesorter tr").live("click", function(event) {...});
You would probably pass the table/form to the other page with a POST.