JSON objects and HTML tables - javascript

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);
});

Related

Display JSON data in tablular format of predefined format

I am working on a small project's interface. Basically, an API sends the following JSON data:
{
"wallet_transactions": [
{
"total_cost": "80.000",
"expense_type__name": "Gas",
"total_quantity": "5.000",
"trans_type": "Purchased"
},
{
"total_cost": "250.000",
"expense_type__name": "Gas",
"total_quantity": "35.000",
"trans_type": "Rent"
}
]}
The data basically shows how much of GAS was given, its cost and its means (on credit or it was bought).
I tried to build a table out of it directly, but it was dimmed unfriendly since GAS was written twice.
What I tried was:
$.each(response.wallet_transactions, function(index) {
var exp_name=response.wallet_transactions[index].expense_type__name;
var quantity=response.wallet_transactions[index].total_quantity;
var price=response.wallet_transactions[index].total_cost;
var trans_type=response.wallet_transactions[index].trans_type;
rows=rows+'<tr><td>' + exp_name + '</td>';
rows=rows + '<td>' + price + '</td>';
rows=rows + '<td>' + quantity + '</td>';
rows=rows + '</tr>';
});
The output that is needed now looks like the image below:
Group the data for each name together in another object, then build the table from that.
var table_data = {};
$.each(response.wallet_transactions, function(i, trans) {
var exp_name = trans.expense_type__name;
var quantity = trans.total_quantity;
var price = trans.total_cost;
var trans_type = trans.trans_type;
if (!table_data[exp_name]) {
table_data[exp_name] = {}
}
table_data[exp_name][trans_type] = {
quantity: quantity,
cost: price
};
}
$.each(table_data, function(name, data) {
rows += "<tr><td>" + name + "</td>";
rows += "<td>" + data.Rent.cost + "</td>";
rows += "<td>" + data.Rent.quantity + "</td>";
rows += "<td>" + data.Purchased.cost + "</td>";
rows += "<td>" + data.Purchased.quantity + "</td>";
rows += "</tr>";
}
Notice that $.each passes the array element as the second argument to the callback function, so you don't have to repeat response.wallet_transactions[index] on every line.

Get key/values from JSON array of objects without knowing the key name

I'm trying to build a HTML table with data from a JSON structured array such as:
var myjson = [
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter","lastName": "Jones"}
];
I know I can use:
var tbl = "<table>"
$.each(myjson, function(x, y) {
tbl += "<tr>";
tbl += "<td>firstName</td>";
tbl += "<td>lastName</td>";
tbl += "</tr>";
tbl += "<tr>";
tbl += "<td>" + y.firstName + "</td>";
tbl += "<td>" + y.lastName + "</td>";
tbl += "</tr>";
});
tbl += "</table>";
but how can I get the same result if I don't know what the column names (firstName, lastName) are called? How can I iterate through the key/values of each object in the JSON structured array?
In each array, the number of elements in each object will be the same
Use Object.keys to get the keys of the object.
Object.keys() method returns an array of strings that represent all the enumerable properties of the given object.
Use index of array to decide header of table
var myjson = [{
"firstName": "John",
"lastName": "Doe"
}, {
"firstName": "Anna",
"lastName": "Smith"
}, {
"firstName": "Peter",
"lastName": "Jones"
}];
var tbl = "<table>";
$.each(myjson, function(x, y) {
var keys = Object.keys(y);
if (!x) {
tbl += "<tr>";
keys.forEach(function(key) {
tbl += "<th>" + key + "</th>";
});
tbl += "</tr>";
}
tbl += "<tr>";
keys.forEach(function(key) {
tbl += "<td>" + y[key] + "</td>";
});
tbl += "</tr>";
});
tbl += "</table>";
$('body').append(tbl);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Use for...in loop.
for(let key in myjson[0]) console.log(key + ' == ' + myjson[0][key]);
Here is how you code should looks like (see also JSFiddle):
var myjson = [{
"firstName": "John",
"lastName": "Doe"
}, {
"firstName": "Anna",
"lastName": "Smith"
}, {
"firstName": "Peter",
"lastName": "Jones"
}];
var keys = [];
for(let key in myjson[0]) keys.push(key);
var tbl = "<table>"
$.each(myjson, function() {
tbl += "<tr>";
for(let index in keys) tbl += '<td>' + keys[index] + '</td>';
tbl += "</tr>";
tbl += "<tr>";
for(let index in keys) tbl += '<td>' + arguments[1][keys[index]] + '</td>';
tbl += "</tr>";
});
tbl += "</table>";
document.body.innerHTML = tbl;
You can simply do this
var tbl = "<table>"
$.each(myjson, function(x, y) {
keys = Object.keys(y);
tbl += "<tr>";
$.each(keys, function(i,key){
tbl += "<td>" + key + "</td>";
})
tbl += "</tr><tr>";
$.each(keys, function(i,key){
tbl += "<td>" + y[key] + "</td>";
})
tbl += "</tr>";
});
tbl += "</table>";
You can further bring down to one loop if you want.
You can try this..
JSFiddle
tbl += "<tr>";
for(var i=0;i<Object.keys(myjson[0]).length; i++)
{
tbl += "<td>"+Object.keys(myjson[0])[i]+"</td>";
}
tbl += "</tr>";

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

Insert array values in table cell with javascript

I need to insert some values ​​in a table. All values are contained in a returned array from an Ajax/php request like this:
var data = [];
//Consider that the number of the object (in this case only 3) obtained from the server are equal to the number of rows in tbody (6 rows in tbody = 6 object from server).
data[0] = {From: '01/01/2012', To: '01/01/2013', Interest: 80.00, Residual: 0, Capital: 1000.00, Days: 366};
data[1] = {From: '01/01/2013', To: '01/01/2014', Interest: 85.00, Residual: 0, Capital: 980.00, Days: 365};
data[2] = {From: '01/01/2014', To: '29/04/2014', Interest: 20.00, Residual: 75.00, Capital: 980.00, Days: 118};
It's a bit tricky to explain how the values must to be inserted in the table, so I created a fiddle with the result I would like to get.
I do not expect you to give me the final result (of course, would be welcome :) ), but at least some idea from which to start.
FIDDLE
**EDIT
I assigned id to cells and now all values are right inserted. That's the updated fiddle, do you think code can be written more elegantly?
UPDATE FIDDLE
I can see the data returned from ajax/php request is in JSON format. So to insert them in HTML table you can use JQuery.
Example (as you given sample data):
function buildDataTableHtml(data){
var tableHtml = "<table><tr>";
tableHtml += "<th>From</th>";
tableHtml += "<th>To</th>";
tableHtml += "<th>Interest</th>";
tableHtml += "<th>Residual</th>";
tableHtml += "<th>Capital</th>";
tableHtml += "<th>Days</th>";
tableHtml += "</tr>";
$.each(data, function(i, v){
tableHtml += "<tr>";
tableHtml += "<td>" + v.From + "</td>";
tableHtml += "<td>" + v.To + "</td>";
tableHtml += "<td>" + v.Interest + "</td>";
tableHtml += "<td>" + v.Residual + "</td>";
tableHtml += "<td>" + v.Capital + "</td>";
tableHtml += "<td>" + v.Days + "</td>";
tableHtml += "</tr>";
});
tableHtml += "</table>";
return tableHtml;
}
If you use this JavaScript function (along with JQuery) then this function will return the HTML of a table you wanted. Hope this will be helpful for you
NOTE: I just write it down in answer box, didn't try to make sure this is working. But hope the code will work. :)

Categories