I've already built a table with DOM methods, taking in input the number of row and column. Now I need to take the number of row and column by the element of the array myBooks and put in my table the values of the same array. How should I do?
<!DOCTYPE html>
<html>
<head>
<title>tabella dom</title>
<script type="text/javascript" src="tabellaDom.js"></script>
</head>
<body>
<form name="numeri">
Inserisci due valori: <br>
<input name="valore1">
<input name="valore2">
<br>
<input type="button" name="creaTabella" value="Crea Tabella" onclick="creaTable(numeri.valore1.value, numeri.valore2.value);">
<br>
<div id="myDynamicTable"></div>
</form>
</body>
</html>
function creaTable(a, b) {
var tableDiv = document.getElementById("myDynamicTable");
var tbl = document.createElement('table');
tbl.setAttribute("id", "tabella");
var tbdy = document.createElement('tbody');
tbl.appendChild(tbdy);
tbl.border = '1';
for (var j = 0; j < a; j++) {
const tr = document.createElement('tr');
console.log('tr.value');
tbdy.appendChild(tr);
const btnDelete = document.createElement('input');
btnDelete.setAttribute("type", "button");
btnDelete.setAttribute("value", "-");
tr.appendChild(btnDelete);
btnDelete.onclick = function() {
tr.remove();
};
for (var k = 0; k < b; k++) {
var td = document.createElement('td');
td.width = '75';
td.appendChild(document.createTextNode("Cella " + j + "," + k));
tr.appendChild(td);
}
}
tableDiv.appendChild(tbl);
}
var myBooks = [{
"Book ID": "1",
"Book Name": "Computer Architecture",
"Category": "Computers",
"Price": "125.60"
},
{
"Book ID": "2",
"Book Name": "Asp.Net 4 Blue Book",
"Category": "Programming",
"Price": "56.00"
},
{
"Book ID": "3",
"Book Name": "Popular Science",
"Category": "Science",
"Price": "210.40"
}
]
var data="";
b--;
if(b==0){
data=myBooks[a-1]['Book ID'];
}
else if(b==1){
data=myBooks[a-1]['Book Name'];
}
else if(b==2){
data=myBooks[a-1]['Category'];
}
else if(b==3){
data=myBooks[a-1]['Price'];
}
Try this code. Here a is number of row and b is number of column
Related
I am trying to achieve something like this.
I am getting a json response after hitting a particular api command (a curl command let's say). I need to convert this result to an html. For this I am thinking of storing the result in an environment variable.
My intentions is to read this variable and so read the json data.
How can I read a environment variable in js?
I am using below program to map the json to html table.
<!DOCTYPE html>
<html>
<head>
<title>Convert JSON Data to HTML Table</title>
<style>
th, td, p, input {
font:14px Verdana;
}
table, th, td
{
border: solid 1px #DDD;
border-collapse: collapse;
padding: 2px 3px;
text-align: center;
}
th {
font-weight:bold;
}
</style>
</head>
<body>
<input type="button" onclick="CreateTableFromJSON()" value="Create Table From JSON" />
<p id="showData"></p>
</body>
<script>
function CreateTableFromJSON() {
var myBooks = [
{
"Book ID": "1",
"Book Name": "Computer Architecture",
"Category": "Computers",
"Price": "125.60"
},
{
"Book ID": "2",
"Book Name": "Asp.Net 4 Blue Book",
"Category": "Programming",
"Price": "56.00"
},
{
"Book ID": "3",
"Book Name": "Popular Science",
"Category": "Science",
"Price": "210.40"
}
]
// EXTRACT VALUE FOR HTML HEADER.
// ('Book ID', 'Book Name', 'Category' and 'Price')
var col = [];
for (var i = 0; i < myBooks.length; i++) {
for (var key in myBooks[i]) {
if (col.indexOf(key) === -1) {
col.push(key);
}
}
}
// CREATE DYNAMIC TABLE.
var table = document.createElement("table");
// CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.
var tr = table.insertRow(-1); // TABLE ROW.
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th"); // TABLE HEADER.
th.innerHTML = col[i];
tr.appendChild(th);
}
// ADD JSON DATA TO THE TABLE AS ROWS.
for (var i = 0; i < myBooks.length; i++) {
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
tabCell.innerHTML = myBooks[i][col[j]];
}
}
// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
var divContainer = document.getElementById("showData");
divContainer.innerHTML = "";
divContainer.appendChild(table);
}
</script>
</html>
As Quentin says: you can't, but look into Local Storage instead.
JavaScript, running client-side in an HTML document, has no access to environment variables at all. So you can't.
I am doing an assignment and need to dynamically create a table and add 20 image slices (1 in each cell) to make a whole picture. I have found some code that I can adapt to suit what I need but I am stuck getting the image src info for each image into the new arrays created inside another array.
function addTable() {
var myTableDiv = document.getElementById("item_image")
var table = document.createElement('TABLE')
var tableBody = document.createElement('TBODY')
table.border = '0'
table.appendChild(tableBody);
var columns = new Array();
columns[0] = ""
columns[1] = ""
columns[2] = ""
columns[3] = ""
columns[4] = ""
var rows = new Array();
rows[0] = new Array("img 1", "img 2", "img 3", "img 4", "img 5");
rows[1] = new Array("img 6", "img 7", "img 8", "img 9", "img 10");
rows[2] = new Array("img 11", "img 12", "img 13", "img 14", "img 15");
rows[3] = new Array("img 16", "img 17", "img 18", "img 19", "img 20");
//TABLE COLUMNS
var tr = document.createElement('TR');
tableBody.appendChild(tr);
for (i = 0; i < columns.length; i++) {
var th = document.createElement('TH')
th.width = '75';
th.appendChild(document.createTextNode(columns[i]));
tr.appendChild(th);
}
//TABLE ROWS
for (i = 0; i < rows.length; i++) {
var tr = document.createElement('TR');
for (j = 0; j < rows[i].length; j++) {
var td = document.createElement('TD')
td.appendChild(document.createTextNode(rows[i][j]));
tr.appendChild(td)
}
tableBody.appendChild(tr);
}
myTableDiv.appendChild(table)
}
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div id="item_image">
<input type="button" id="create" value="Click here" onclick="Javascript:addTable()">
</div>
I've put "img" in the cells purely to show what I mean. Any assistance would be greatly appreciated.
</body>
</html>
I'm assuming those string will be image paths. You are creating a text node not an image element:
var td = document.createElement('td');
var img = document.createElement('img');
img.src = rows[i][j];
td.appendChild(img);
tr.appendChild(td);
You can create a new img element inside of your for loops and set the source (and possible other properties) to it. This element will then be added to the table cell, as you did with the text before.
function addTable() {
var myTableDiv = document.getElementById("item_image")
var table = document.createElement('TABLE')
var tableBody = document.createElement('TBODY')
table.border = '0'
table.appendChild(tableBody);
var columns = new Array();
columns[0] = ""
columns[1] = ""
columns[2] = ""
columns[3] = ""
columns[4] = ""
var rows = new Array();
rows[0] = new Array("img 1", "img 2", "img 3", "img 4", "img 5");
rows[1] = new Array("img 6", "img 7", "img 8", "img 9", "img 10");
rows[2] = new Array("img 11", "img 12", "img 13", "img 14", "img 15");
rows[3] = new Array("img 16", "img 17", "img 18", "img 19", "img 20");
//TABLE COLUMNS
var tr = document.createElement('TR');
tableBody.appendChild(tr);
for (i = 0; i < columns.length; i++) {
var th = document.createElement('TH')
th.width = '75';
th.appendChild(document.createTextNode(columns[i]));
tr.appendChild(th);
}
//TABLE ROWS
for (i = 0; i < rows.length; i++) {
var tr = document.createElement('TR');
for (j = 0; j < rows[i].length; j++) {
// create the 'img' element
var img = document.createElement("img");
// set properties, like 'src', 'alt' and 'title'
// for demo purpose i've used some dummy images herem you ma just use 'img.src = rows[i][j];'
img.src = "https://dummyimage.com/100x75/000/fff&text=" + rows[i][j];
img.alt = rows[i][j];
img.title = rows[i][j];
var td = document.createElement('TD')
// add the new image element to your cell
td.appendChild(img);
tr.appendChild(td)
}
tableBody.appendChild(tr);
}
myTableDiv.appendChild(table)
}
table {
border-spacing: 0;
}
table td {
padding: 0;
font-size: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div id="item_image">
<input type="button" id="create" value="Click here" onclick="Javascript:addTable()">
</div>
I've put "img" in the cells purely to show what I mean. Any assistance would be greatly appreciated.
</body>
</html>
I have a JSON file and want to build a table with 2 columns:
{
"Some name 1": {
"price": 1023,
"quantity": 93
},
"Some name 2": {
"price": 2938,
"quantity": 64
},
"Some name 3": {
"price": 1277,
"quantity": 211
}
}
I tried:
$.getJSON('http://localhost:8080/data.json', function (data) {
for (x in data) {
document.getElementById(getTDID).innerHTML += x; // First column
console.log(data[i].price); // Second column
console.log(x["quantity"]); // or another variant of second column
}
}
First column works. But second... I want to extract this 2 values (price and quantity), but it doesn't work. So now I haven't ideas. Please help.
You aren't accessing the values for each key. Try this:
for (const x of Object.keys(data)) {
console.log(data[x]);
}
My mistake was data[x].price instead of data[i].price.
You can try like this
$.getJSON('http://localhost:8080/data.json', function (data) {
for (x in data) {
console.log(data[x].price); // First column
console.log(data[x].quantity); // Second column
}
}
Few observations :
data[i].price should be data[x].price.
x["quantity"] should be data[i].quantity.
Create a TABLE, TR & TD element to display the values in a table.
Working Demo
var jsonObj = {
"Some name 1": {
"price": 1023,
"quantity": 93
},
"Some name 2": {
"price": 2938,
"quantity": 64
},
"Some name 3": {
"price": 1277,
"quantity": 211
}
};
var x = document.createElement("TABLE");
x.setAttribute("id", "myTable");
document.body.appendChild(x);
for (i in jsonObj) {
var y = document.createElement("TR");
y.setAttribute("id", "myTr");
document.getElementById("myTable").appendChild(y);
var x = document.createElement("TD");
var nameNode = document.createTextNode(i);
x.appendChild(nameNode);
document.getElementById("myTr").appendChild(x);
var price = document.createElement("TD");
var priceNode = document.createTextNode(jsonObj[i].price);
price.appendChild(priceNode);
document.getElementById("myTr").appendChild(price);
var quantity = document.createElement("TD");
var quantityNode = document.createTextNode(jsonObj[i].quantity);
quantity.appendChild(quantityNode);
document.getElementById("myTr").appendChild(quantity);
}
table, td {
border: 1px solid black;
}
I need help on how to create table from data fetch from API server in html.
A possible duplicate of this question
I need to request json data from a url, then use that data to dynamically create table in html.
Below are my test.html
<!DOCTYPE html>
<html>
<head>
...
...
</head>
<body>
...
...
...
<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="box-header">
<h3 class="box-title">Activity</h3>
</div>
<div id = "showData" class="box-body"></div>
</div>
</div>
</div>
<script src="../static/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="../static/plugins/jQueryUI/jquery-ui.min.js"></script>
<script>
$.ajax({
url: "http://127.0.0.1:4220/pipeline/v1/bpwi/",
success: function (data) {
var col = [];
for (var i = 0; i < data.length; i++) {
for (var key in data[i]) {
if (col.indexOf(key) === -1) {
col.push(key);
}
}
}
var table = document.createElement("table");
var tr = table.insertRow(-1);
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th");
th.innerHTML = col[i];
tr.appendChild(th);
}
for (var i = 0; i < data.length; i++) {
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
tabCell.innerHTML = myBooks[i][col[j]];
}
}
var divContainer = document.getElementById("showData");
divContainer.innerHTML = "";
divContainer.appendChild(table);
}
})
</script>
</body>
</html>
Expected ajax response is something like this
[
{
"ID": "1",
"Name": "Computer",
"Category": "Computers",
"Price": "125.60"
},
{
"ID": "2",
"Name": "Blue",
"Category": "Sport",
"Price": "56.00"
},
{
"ID": "3",
"Book Name": "Science",
"Category": "Science",
"Price": "210.40"
}
]
I have refreshed my browser many times but the result is not good.
Here is the result
-----------------------------------------------------------------
Activity
-----------------------------------------------------------------
0
[
{
"
I
D
"
:
"
1
"
...
...
I am really new to javascript and some of good example I found is the possible question I posted above and here but both did not show a clear example on how to implement http request for getting the data from external source.
I really hope someone can pointed out for me what I did wrong in this code.
Thank you for your help and suggestion.
I am trying to convert the Array to an HTML Table using jQuery. However, the browser shows nothing from the JSON file. Please see my codes below.
JSON file
[
{
"Book ID": "1",
"Book Name": "Computer Architecture",
"Category": "Computers",
"Price": "125.60"
},
{
"Book ID": "2",
"Book Name": "Asp.Net 4 Blue Book",
"Category": "Programming",
"Price": "56.00"
},
{
"Book ID": "3",
"Book Name": "Popular Science",
"Category": "Science",
"Price": "210.40"
}
]
HTML and JS
<script>
$(document).ready(function () {
$.getJSON("result.json", function (data) {
var arrItems = []; // THE ARRAY TO STORE JSON ITEMS.
$.each(data, function (index, value) {
arrItems.push(value); // PUSH THE VALUES INSIDE THE ARRAY.
});
// EXTRACT VALUE FOR TABLE HEADER.
var col = [];
for (var i = 0; i < arrItems.length; i++) {
for (var key in arrItems[i]) {
if (col.indexOf(key) === -1) {
col.push(key);
}
}
}
// CREATE DYNAMIC TABLE.
var table = document.createElement("table");
// CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.
var tr = table.insertRow(-1); // TABLE ROW.
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th"); // TABLE HEADER.
th.innerHTML = col[i];
tr.appendChild(th);
}
// ADD JSON DATA TO THE TABLE AS ROWS.
for (var i = 0; i < arrItems.length; i++) {
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
tabCell.innerHTML = arrItems[i][col[j]];
}
}
// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
var divContainer = document.getElementById("showData");
divContainer.innerHTML = "";
divContainer.appendChild(table);
});
});
Hi gusy, I am trying to convert the Array to an HTML Table using jQuery. However, the browser shows nothing from the JSON file. Please see my codes below.