We Keep Coding

Trouble with creating table in Javascript

I have got the current code https://jsfiddle.net/rjw3f7yu/5/ that can plot table in HTML using Javascript code. However, there is this line that pops up stating "undefined" between row 1 and 2. Anyone knows what could be the problem here?
I am using bootstrap v3 just for extra info. Thanks!
HTML code:
<table class="table" id="wconclusiontable">
</table>
Javascript Code:
var counttopercentagec1event = [0, 1, 2, 3, 4, 5];
var counttopercentagec2event = [2, 33, 22, 32, 43, 52];
var counttopercentagec3event = [7, 17, 72, 37, 47, 51];
function wconclusiontable() {
var wtable = document.getElementById("wconclusiontable");
var row;
row += "<thead><tr><th>" + "Event #" + "</th>";
row += "<th>" + "Low" + "</th>";
row += "<th>" + "Medium" + "</th>";
row += "<th>" + "High" + "</th>";
row += "</tr></thead>";
for (var i = 2; i < 5; i++) {
row += "<tbody><tr><td>" + (i-1) + "</td>";
row += "<td>" + counttopercentagec1event[i-1] + "%" + "</td>";
row += "<td>" + counttopercentagec2event[i-1] + "%" + "</td>";
row += "<td>" + counttopercentagec3event[i-1] + "%" + "</td>";
row += "</tr></tbody>";
}
wtable.innerHTML = row;
}
wconclusiontable();

You have to initialise var row with empty string. Since row is undefined initially and you're adding directly with string, the initial row variable's value undefined is getting added. Hope that helps
Update fiddle - https://jsfiddle.net/rjw3f7yu/6/
var row = '';

It's probably because you never initialize your variable, "row". Initially, row is therefore undefined.
When you add to it the first time, you'll basically concatenate the strings "undefined" with "Event #".
Try defining row as:
var row = "";
Your updated code:
function wconclusiontable() {
var wtable = document.getElementById("wconclusiontable");
var row = "";
row += "<thead><tr><th>" + "Event #" + "</th>";
row += "<th>" + "Low" + "</th>";
row += "<th>" + "Medium" + "</th>";
row += "<th>" + "High" + "</th>";
row += "</tr></thead>";
for (var i = 2; i < 5; i++) {
row += "<tbody><tr><td>" + (i-1) + "</td>";
row += "<td>" + counttopercentagec1event[i-1] + "%" + "</td>";
row += "<td>" + counttopercentagec2event[i-1] + "%" + "</td>";
row += "<td>" + counttopercentagec3event[i-1] + "%" + "</td>";
row += "</tr></tbody>";
}
wtable.innerHTML = row;
}
Declaring a variable in a function in JavaScript generally serves one purpose - to set the scope of that variable, and avoid collision with a global variable. Since JavaScript is dynamically typed, JavaScript has no clue what it should be initializing your variable to at first. So, it chooses to define it as an "undefined" object.
During string concatenation, JavaScript will type coerce all objects involved in the operation to a string. This includes "undefined".
Why, then, does undefined appear after the header of the table? This happens because HTML renders the thead of the table before anything else. The best way to figure out what the potential issue is when dealing with a JavaScript issue like this is to open the inspector by right clicking the problematic element on the page and choosing "Inspect Element".

var row;
Replace above line by this
var row = new String("");
https://jsfiddle.net/wxaty4xs/

How can I dynamically output each index in an array to HTML

I'm attempting to create a tooltip that prints every indexed position of a particular array dynamically.
I first start with a 'for' loop that pushes the targeted values that I want displayed in the tooltip to an array if they pass a condition like so:
var myArray = [];
for (var i = 0; i < ccirdata.length; i++) {
if (myArray[i].catType === 'I') {
myArray.push(ccirdata[i].catNum);
}
}
I'd like to iterate/print EACH index item of the array:
scope.data = [
{
key: 'Category I',
MyAttribute:<INSERT HERE>
},
So that my tooltip is formatted as such where 'MyAttribute' will create a new row, "< tr >" for every index item:
var header =
"<thead>" +
"<tr>" +
"<td class='legend-color-guide'><div style='background-color: " + series.color + ";'></div></td>" +
"<td class='key'>" + series.key + " CCIRs:</td>" +
"</tr>" +
"</thead>";
var rows =
"<tr>" +
"<td class='key'><strong>" + series.key + "</strong></td>" +
"<td class='x-value'>" + MyAttribute + "</td>" +
"</tr>"
return "<table>" +
header +
"<tbody>" +
rows +
"</tbody>" +
"</table>";
I'm just not sure how this can be done, since iterations require javascript, and i'm looking to print each item in html format (the tooltip)

how json array iteration can be done?

my json array is like that which was received in html page how it can be display in a table ? means iteration .plz help? i am new .
[
{"studentId":"1001259101","firstName":"RAKESH","lastName":"DALAL","year":"2012","course":"BSC"},
{"studentId":"1001259101","firstName":"RAKESH","lastName":"DALAL","year":"2012","course":"BSC"},
{"studentId":"1001259101","firstName":"RAKESH","lastName":"DALAL","year":"2012","course":"BSC"}
]

Iterate over the array and display it in a table:
var jsonObject = [
{studentId: "1001259101", firstName: "RAKESH", lastName: "DALAL", year: "2012", course: "BSC"},
{studentId: "1001259101", firstName: "RAKESH", lastName: "DALAL", year: "2012", course: "BSC"},
{studentId: "1001259101", firstName: "RAKESH", lastName: "DALAL", year: "2012", course: "BSC"}
];
var output = "<table>";
for (var i = 0, len = jsonObject.length; i < len; i++) {
var line = jsonObject[i];
output += "<tr>";
output += "<td>" + line.studentId + "</td>";
output += "<td>" + line.firstName + "</td>";
output += "<td>" + line.lastName + "</td>";
output += "<td>" + line.year + "</td>";
output += "<td>" + line.course + "</td>";
output += "</tr>";
}
output += "</table>";
document.getElementById(...).innerHTML = output;

Well first of all JSON is (JavaScript Object Notation). Same JS, just a litlte bit different syntax for object notation.
You need to use AJAX in order to receive JSON data from other file, just have a look:
var xhr = new XMLHttpRequest();
var url = "myJSON.json"; // your JSON text file
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var myResponse = JSON.parse(xhr.responseText);
display(myResponse); // send array to function
}
}
xhr.open("GET", url, true);
xhr.send(null);
function display(arr) {
var myTable = "<table>"; // create a table variable
for (var i = 0; i < arr.length; i++) { // loop through array
myTable += "<tr>";
myTable += "<td>" + arr[i].studentId + "</td>";
myTable += "<td>" + arr[i].firstName + "</td>";
myTable += "<td>" + arr[i].lastName + "</td>";
myTable += "<td>" + arr[i].year + "</td>";
myTable += "<td>" + arr[i].course + "</td>";
myTable += "</tr>";
}
myTable += "</table>";
document.getElementById("myAwesomeTable").innerHTML = myTable; // display the final result in to html
}
Use AJAX in order to open your JSON text file, it could be .txt, .json and etc.
Use JSON.parse() to convert your JSON text to Array
Send that Array to function
Create a table and hold everything in variable like a text
Loop through array
Display your table in to html

JQuery Drag and Drop from two tables

I need to implement drag and drop feature form one table to another and vise versa.
This is my function where i get transactions to particular IBAN number, I also have the same function which retrieves users transaction which are hidden.
function getAllTransactions(iban) {
var iban = $("#ibanSelection").val();
var username = $("#hiddenusername").val();
var url = 'http://localhost:64300/api/BankAccountApi/GetUserTransaction/?iban=' + iban;
var table = "<table id=\"table1\">";
if ((username != "") && (iban !="")) {
$.getJSON(url, function (data) {
table += "<tr class=\"ibanSelection\">";
table += "<th>My IBAN</th>";
table += "<th>Send to IBAN</th>";
table += "<th>Transfer Date</th>";
table += "<th>Amount</th>";
table += "</tr>";
$.each(data, function (key, val) {
table += "<tr class=\"draggable_tr\">";
table += "<td>" + val.My_Iabn + "</td>";
table += "<td>" + val.Iban_To + "</td>";
table += "<td>" + val.Transfer_Date + "</td>";
table += "<td>" + val.Amount_Transferd + "</td>";
table += "</tr>";
});
table += "</table>";
$("#divResult2").html(table);
});
}
}

Just use the jQueryUI Sortable feature.
Here's the complete example + documentation. Very easy.
Also this example shows your case:
http://jqueryui.com/sortable/#connect-lists

JSON objects and HTML tables

First time poster here and new to JavaScript...
Below is my JSON object...
[
{
"Name":"Ted",
"EmailAddress":"ted#ted.edu",
"Title":"Director",
"Expertise":"Statistics",
"PhoneNumber":"444-444-4444"
},
{
"Name":"Ann",
"EmailAddress":"ann#ann.edu",
"Title":"Director",
"Expertise":"Physics",
"PhoneNumber":"444-444-5555"
}
]
What I need is to be able to loop through this to add each table row for each employee. There are five values: Name, EmailAddress, Title, Expertise, PhoneNumber
This is what I have so far...
$(function () {
var Employees= [{"Name":"Ted","EmailAddress":"ted#ted.edu","Title":"Director","Expertise":"Statistics","PhoneNumber":"444-444-4444"}, {"Name":"Ann","EmailAddress":"ann#ann.edu","Title":"Director","Expertise":"Physics","PhoneNumber":"444-444-5555"}];
$("#pager").append("<table id='employeelist' class='table'><table>");
//for loop goes here//
Any help would be appreciated!
EDIT: Also, how would I make the e-mail addresses 'clickable'/'mail to' the address?

A simple loop will do, you should also build the entire HTML string, then append:
var table = "<table id='employeelist' class='table'>";
for (var i = 0; i < Employees.length; i++) {
//Create the table row
table += "<tr>";
//Create table cells
table += "<td>" + Employees[i].Name + "</td>";
table += "<td>" + Employees[i].EmailAddress + "</td>";
table += "<td>" + Employees[i].Title + "</td>";
table += "<td>" + Employees[i].Expertise + "</td>";
table += "<td>" + Employees[i].PhoneNumber + "</td>";
//Close table row
table += "</tr>";
}
table += "</table>";
$("#pager").append(table);

Since JSON objects are just normal Javascript objects, you can treat them as such.
For example, in order to loop over them you could just do normal Javascript loop:
for(var i = 0; i < Employees.length; i++) {
var employee = Employees[i];
}
and then, in order to access information from an employee, you can just do employee.Name to access it's name, employee.Title for the title etc.
Using the information in employee.Name and the others, you can simply build your strings using that information:
str += '<td>' + employee.Name + ...
and then finally append it with $("#pager").append(str);.

'Welcome to Stackoverflow and javascript :)'
It is actually a javascript object ( not JSON object ).
$(function() {
var Employees = [{
"Name": "Ted",
"EmailAddress": "ted#ted.edu",
"Title": "Director",
"Expertise": "Statistics",
"PhoneNumber": "444-444-4444"
}, {
"Name": "Ann",
"EmailAddress": "ann#ann.edu",
"Title": "Director",
"Expertise": "Physics",
"PhoneNumber": "444-444-5555"
}];
var table = '<table id="employeelist" class="table">';
for (var i = 0, j = Employees.length; i < j; i++) {
table += '<tr>';
table += '<td>' + Employees[i].Name + '</td>';
table += '<td>' + Employees[i].EmailAddress + '</td>';
table += '<td>' + Employees[i].Title + '</td>';
table += '<td>' + Employees[i].Expertise + '</td>';
table += '<td>' + Employees[i].PhoneNumber + '</td>';
table += '</tr>';
}
table += '</table>';
$("#pager").append(table);
});

You are using jQuery. Then it should be something like this:
var table=$("<table>",{
id:"employeelist"
}).addClass("table");
table.appendTo($("#pager"));
$("#pager").append(table);
$.each(Employees, function(index, employee){
var row=$("<tr>",{});
$("<td>",{
html:employee.name
}).appendTo(row);
$("<td>",{
html:employee.EmailAddress
}).appendTo(row);
$("<td>",{
html:employee.Title
}).appendTo(row);
$("<td>",{
html:employee.Expertise
}).appendTo(row);
$("<td>",{
html:employee.PhoneNumber
}).appendTo(row);
row.appendTo(table);
});