Creating table from json in javascript using jquery for any field - javascript

I so far can view the json response. Now I wanted to convert them to tables. I am using the following code to parse data about weather of cities. I am trying to use the following code.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
function goTo() {
$.getJSON("http://api.openweathermap.org/data/2.5/weather?key=api&format=json&q=" + link_id.value, function(result, status, jqXHR) {
var myList = (jqXHR.responseText);
var columns = addAllColumnHeaders(myList);
for (var i = 0; i < myList.length; i++) {
var row$ = $('<tr/>');
for (var colIndex = 0; colIndex < columns.length; colIndex++) {
var cellValue = myList[i][columns[colIndex]];
if (cellValue == null) {
cellValue = "";
}
row$.append($('<td/>').html(cellValue));
}
$("#excelDataTable").append(row$);
}
}
);}
function addAllColumnHeaders(myList) {
var columnSet = [];
var headerTr$ = $('<tr/>');
for (var i = 0; i < myList.length; i++) {
var rowHash = myList[i];
for (var key in rowHash) {
if ($.inArray(key, columnSet) == -1) {
columnSet.push(key);
headerTr$.append($('<th/>').html(key));
}
}
}
$("#excelDataTable").append(headerTr$);
return columnSet;
}​
</script>
</head>
<body>
<h2> Search box </h2>
<input type='text' id='link_id'>
<input type='button' id='link' value='Search' onClick='goTo()'>
<table id="excelDataTable" border="1" />
<div></div>
</body>
</html>
I got the following result:
And in chrome, i can't even view that

The response I'm getting is an object not an array. Process the response as an object.
function goTo() {
$.getJSON("http://api.openweathermap.org/data/2.5/weather?key=api&format=json&q=" + link_id.value, function(result, status, jqXHR) {
var myList = (jqXHR.responseText);
myList = JSON.parse(myList);
console.log(myList);
var keys = [];
for (var key in myList) {
keys.push(key);
}
addAllColumnHeaders(myList, keys);
var row$ = $('<tr/>');
for (var i = 0; i < keys.length; i++) {
var key = keys[i];
var cellValue = myList[key];
if (cellValue == null) {
cellValue = "";
} else if (typeof cellValue == "object") {
cellValue = JSON.stringify(cellValue);
}
row$.append($('<td/>').html(cellValue));
}
$("#excelDataTable").append(row$);
});
}
function addAllColumnHeaders(myList, keys) {
var columnSet = [];
var headerTr$ = $('<tr/>');
for (var i = 0; i < keys.length; i++) {
var key = keys[i];
headerTr$.append($('<th/>').html(key));
}
$("#excelDataTable").append(headerTr$);
return columnSet;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2> Search box </h2>
<input type='text' id='link_id'>
<input type='button' id='link' value='Search' onClick='goTo()'>
<table id="excelDataTable" border="1" />
<div></div>

Related

Is there anyway I can check for duplicate in localStorage

I am creating a shopping cart with products fetch from a fake json-server. Each time I click the "add to cart" button, I want the product to be push into an array, and if it does exist in the array, I want to increase it by 1
const productGrid = document.querySelector('.grid__product');
const addToCartBtn = document.getElementsByClassName('add-to-cart-btn');
const tableBody = document.querySelector('.table__body');
eventListeners();
//all event listeners
function eventListeners() {
window.addEventListener('DOMContentLoaded', () => {
loadJSON();
loadCart();
})
productGrid.addEventListener('click', purchaseProduct)
}
//load json file into grid display
function loadJSON() {
fetch('http://localhost:3000/products').then(response => {
response.json().then(data => {
let html = '';
data.forEach(product => {
html += `<div class="legacy__items__detail" id='product-${product.id}'><img class='product__img' src="${product.img}" alt="OHUI">
<div class="legacy__items__detail__content legacy-content">
<h4 class='product__name'>${product.productName}</h4><a href="">
<p class='product__category'>${product.name}</p></a><span class="price">${product.price}<small>vnd</small></span>
</div>
<div class="legacy__items__detail__icon">
<div class="legacy-cta">
<button class='add-to-cart-btn'>Mua hàng</button>
<i class="fas fa-heart"></i><i class="fas fa-sync-alt"></i>
</div>
</div>
</div>`;
})
productGrid.innerHTML = html;
})
})}
function purchaseProduct(e) {
if (e.target.classList.contains('add-to-cart-btn')) {
let product = e.target.parentElement.parentElement.parentElement;
getProductInfo(product);
}
}
//get product info after add-cart btn is clicked
function getProductInfo(product) {
let productInfo = {
name: product.querySelector('.product__name').textContent,
imgSrc: product.querySelector('.product__img').src,
category: product.querySelector('.product__category').textContent,
price: parseInt(product.querySelector('.price').textContent),
count: 1,
}
saveProductInStorage(productInfo);
}
function saveProductInStorage(item) {
let products = []
localStorage.setItem('products', JSON.stringify(products));
if(products.indexOf(item) === -1) {
products.push(item)
} else {
item.count++;
}
console.log(products)
}
I have tried several method but the more I try, the more I getting stuck. Can someone please help me with this ?
Edit :
I have succeed in pushing the item in the array and when there is duplicate,the quantity of the item increase, however, I wanna set the products array in the localStorage. Any help is appreciated!
if (products.length === 0) {
products.push(item);
console.log(products);
return;
}
for (let i = 0; i < products.length; i++) {
if (products[i].name === item.name) {
products[i].count++;
console.log(products);
return;
}
}
products.push(item);
}
Slight change to the above answer:
var myContent = document.getElementById("myTextarea").value;
var savedProducts = JSON.parse(localStorage.getItem("products")) || [];
for (var i = 0; i < savedProducts.length; i++) {
if (JSON.parse(myContent).name === savedProducts[i].name) {
savedProducts[i].count++;
alert(`Found Duplicate. Not inserting again ${myContent}`)
} else if (i == savedProducts.length - 1) {
alert(`Inserted ${myContent}`)
savedProducts.push(JSON.parse(myContent));
localStorage.setItem("names", JSON.stringify(savedProducts))
return;
}
}
Tested and seems to be working.
Here is a fully functional code:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>Product Retrieve from Locastorage demo</h1>
<textarea id="myTextarea" rows="10" cols="80"></textarea>
<p></p>
<button onclick="saveToCart()">Save to Cart</button>
<button onclick="loadCart()">Load from Cart</button>
<p id="myCart"></p>
<script>
var products = [];
localStorage.setItem("products", JSON.stringify(products))
function saveToCart() {
var productInfo = document.getElementById("myTextarea").value;
var savedProducts = JSON.parse(localStorage.getItem("products")) || [];
if (products.length === 0) {
products.push(JSON.parse(productInfo));
localStorage.setItem("products", JSON.stringify(products))
//console.log(savedProducts.length)
} else {
for (var i = 0; i <= savedProducts.length; i++) {
if (JSON.parse(productInfo).name === savedProducts[i].name) {
savedProducts[i].count++;
//alert(`Found Duplicate at position ${i}. Not inserting again ${productInfo}`)
alert(`${JSON.parse(productInfo).name} already exists`)
} else if (i == savedProducts.length - 1) {
alert(`Inserted ${productInfo} at position ${i}`)
savedProducts.push(JSON.parse(productInfo));
localStorage.setItem("products", JSON.stringify(savedProducts))
console.log(savedProducts.length)
return;
}
}
}
}
function loadCart() {
var products = localStorage.getItem("products");
products = JSON.parse(products)
var col = [];
for (var i = 0; i < products.length; i++) {
for (var key in products[i]) {
if (col.indexOf(key) === -1) {
col.push(key);
}
}
}
///creating a table to load data-- start
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 < products.length; i++) {
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
tabCell.innerHTML = products[i][col[j]];
}
}
var finalOutput = document.getElementById("myCart");
finalOutput.innerHTML = "";
finalOutput.appendChild(table);
///creating a table to load data-- end
}
</script>
</body>
</html>
I may be misunderstanding the question but if you have all of their purchased products in local storage couldn't you use JSON.parse(localStorage.getItem("products") to get all the products then use a for loop to check if the item being purchased already exists
savedProducts = JSON.parse(localStorage.getItem("products"));
for(var i = 0; i < savedProducts.length; i++){
if(item.name == savedProducts[i].name){
savedProducts[i].count++;
}else if(i == savedProducts.length-1){
savedProducts.push(item);
}
}
localStorage.setItem("products", JSON.stringify(savedProducts));
I haven't tested that but there's an example

create dynamic JSON table HTML JS

My Sample JSON data looks something like:
the data fields are not the same set of fields for all my rows.
[{"date":"2020-04-05 18:26:01", "mydata":{"city":{"name":"paris"},"travel":{"frequency":"5","climate":"cold"}}},
{"date":"2020-04-05 18:26:17", "mydata":{"city":{"name":"amsterdam"},"fly":{"airports":"1","type":"international"}}}]
This is saved into a column in my MariaDB.
I want to retrieve this in a table format like:
Date mydata-city-name travel-frequency travel-climate fly-airports fly-type
2020-04-05 18:26:01 paris 5 cold null/blank null/blank
2020-04-05 18:26:17 amsterdam null/blank null/blank 1 international
so far i tried the below js and html
but im not able to get the data as expected:
Javascript:
var myList
$.ajax({
type: "GET",
url: "symptom_list.php",
success: function (data) {
console.log(data)
myList = JSON.parse(data)
console.log(JSON.parse(
data)
);
/* alert(data); */ // show response from the php script.
},
});
function buildHtmlTable(selector) {
var columns = addAllColumnHeaders(myList, selector);
for (var i = 0; i < myList.length; i++) {
var row$ = $('<tr/>');
for (var colIndex = 0; colIndex < columns.length; colIndex++) {
var cellValue = myList[i][columns[colIndex]];
if (cellValue == null) cellValue = "";
row$.append($('<td/>').html(cellValue));
}
$(selector).append(row$);
}
}
// Adds a header row to the table and returns the set of columns.
// Need to do union of keys from all records as some records may not contain
// all records.
function addAllColumnHeaders(myList, selector) {
var columnSet = [];
var headerTr$ = $('<tr/>');
for (var i = 0; i < myList.length; i++) {
var rowHash = myList[i];
for (var key in rowHash) {
if ($.inArray(key, columnSet) == -1) {
columnSet.push(key);
headerTr$.append($('<th/>').html(key));
}
}
}
$(selector).append(headerTr$);
return columnSet;
}
HTML:
<body onLoad="buildHtmlTable('#excelDataTable')">
<table id="excelDataTable" border="1">
</table>
</body>
My output is rightnow:
Date mydata
2020-04-05 18:26:01 <blank>
2020-04-05 18:26:17 <blank>
how do i get my expected output?
If you have nested data structure you also have to traverse in nested elements
function buildHtmlTable(selector) {
var columns = addAllColumnHeaders(myList, selector);
for (var i = 0; i < myList.length; i++) {
var row$ = $('<tr/>');
for (var colIndex = 0; colIndex < columns.length; colIndex++) {
var cellValue = getCellValue(myList[i], columns[colIndex]);
if (cellValue == null)
cellValue = "";
row$.append($('<td/>').html(cellValue));
}
$(selector).append(row$);
}
}
function addAllColumnHeaders(myList, selector) {
var columnSet = [];
var headerTr$ = $('<tr/>');
for (var i = 0; i < myList.length; i++) {
var rowHash = myList[i];
recursiveHeaderCheck(rowHash, selector, "", columnSet, headerTr$);
}
$(selector).append(headerTr$);
return columnSet;
}
function recursiveHeaderCheck(ListElement, selector, parentKeyname, columnSet, headerTr$) {
if (typeof ListElement === 'object') {
if (parentKeyname != '')
parentKeyname = parentKeyname + '-';
for (var key in ListElement) {
var keyname = parentKeyname + key;
recursiveHeaderCheck(ListElement[key], selector, keyname, columnSet, headerTr$);
}
} else {
if ($.inArray(parentKeyname, columnSet) == -1) {
columnSet.push(parentKeyname);
headerTr$.append($('<th/>').html(parentKeyname));
}
}
}
function getCellValue(nestedStructure, columnHeader) {
var subElement = nestedStructure;
var subHeaders = columnHeader.split("-");
for (var k = 0; k < subHeaders.length; k++) {
if (typeof subElement === 'object' && subElement != null)
subElement = subElement[subHeaders[k]];
}
return subElement;
}

How to embed the link into value in a table using Javascript and HTML

My script is shown below. There is a table with 2 columns (Name and URL).
How to use second column value (URL) to embed in the name (like hyperlink)?
Also, is it possible to show all names in a single row? (e.g. name 1 name 2 name 3 ...)
So that, i can click the name and redirect to web site.
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
var spData = null;
function doData(json) {
spData = json.feed.entry;
}
function drawCell(tr, val) {
var td = $("<td/>");
tr.append(td);
td.append(val);
return td;
}
function drawRow(table, rowData) {
if (rowData == null) return null;
if (rowData.length == 0) return null;
var tr = $("<tr/>");
table.append(tr);
for(var c=0; c<2; c++) {
drawCell(tr, rowData[c]);
}
return tr;
}
function drawTable(parent) {
var table = $("<table/>");
parent.append(table);
return table;
}
function readData(parent) {
var data = spData;
var table = drawTable(parent);
var rowData = [];
for(var r=0; r<data.length; r++) {
var cell = data[r]["gs$cell"];
var val = cell["$t"];
if (cell.col <= 1) {
drawRow(table, rowData);
rowData = [];
}
rowData.push(val);
}
drawRow(table, rowData);
}
$(document).ready(function(){
readData($("#data"));
});
</script>
<script src="https://spreadsheets.google.com/feeds/cells/1uwdoylX-De2A8XiIefAJqUBukpy8T2FAEraNN-PzCRE/1/public/values?alt=json-in-script&callback=doData"></script>
</head>
<body>
<h1>Parse Google Spreadsheet with JavaScript</h1>
<p><div id="data"/></p>
</body>
</html>
Debugging your code, I found out that rowData can be empty and is an array.
Inside that array, you have several different values. The array itself can be empty, contain only non url values or contain urls.
I would first make sure you are getting the data you want from rowData correctly.
Then, in your drawCell method, find out if the value is a link by figuring out if it starts with http/s.
To create an anchor element, do the following:
let anchorElement = document.createElement("a");
anchorElement.setAttribute("href", YOUR_LINK);
td.append(anchorElement);
EDIT
Per OP's latest comment, I am adding the requested code.
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
var spData = null;
function doData(json) {
spData = json.feed.entry;
}
function drawCell(tr, val) {
var td = $("<td/>");
tr.append(td); //CODE ADDED HERE
if (val.indexOf("http") !== -1) {
let anchorElement = document.createElement("a");
anchorElement.setAttribute("href", val);
anchorElement.innerHTML = "Link";
td.append(anchorElement);
} else {
td.append(val);
}
return td;
}
function drawRow(table, rowData) {
if (rowData == null) return null;
if (rowData.length == 0) return null;
var tr = $("<tr/>");
table.append(tr);
for(var c=0; c<2; c++) {
drawCell(tr, rowData[c]);
}
return tr;
}
function drawTable(parent) {
var table = $("<table/>");
parent.append(table);
return table;
}
function readData(parent) {
var data = spData;
var table = drawTable(parent);
var rowData = [];
for(var r=0; r<data.length; r++) {
var cell = data[r]["gs$cell"];
var val = cell["$t"];
if (cell.col <= 1) {
drawRow(table, rowData);
rowData = [];
}
rowData.push(val);
}
drawRow(table, rowData);
}
$(document).ready(function(){
readData($("#data"));
});
</script>
<script src="https://spreadsheets.google.com/feeds/cells/1uwdoylX-De2A8XiIefAJqUBukpy8T2FAEraNN-PzCRE/1/public/values?alt=json-in-script&callback=doData"></script>
</head>
<body>
<h1>Parse Google Spreadsheet with JavaScript</h1>
<p><div id="data"/></p>
</body>
</html>
Check the code below,
<body>
<h1>Parse Google Spreadsheet with JavaScript</h1>
<div id="data"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
var spData = null;
function doData(json) {
spData = json.feed.entry;
}
function drawCell(tr, val) {
var td = $("<td/>");
tr.append(td);
td.append(val);
return td;
}
function drawRow(table, rowData) {
if (rowData == null) return null;
if (rowData.length == 0) return null;
var tr = $("<tr/>");
table.append(tr);
for(var c=0; c<2; c++) {
drawCell(tr, rowData[c]);
}
return tr;
}
function drawTable(parent) {
var table = $("<table/>");
parent.append(table);
return table;
}
function readData(parent) {
var data = spData;
var table = drawTable(parent);
var rowData = [];
for(var r=0; r<data.length; r++) {
var cell = data[r]["gs$cell"];
var val = cell["$t"];
if (cell.col <= 1) {
drawRow(table, rowData);
rowData = [];
}
rowData.push(val);
}
drawRow(table, rowData);
}
$(document).ready(function(){
readData($("#data"));
});
</script>
<script src="https://spreadsheets.google.com/feeds/cells/1uwdoylX-De2A8XiIefAJqUBukpy8T2FAEraNN-PzCRE/1/public/values?alt=json-in-script&callback=doData"></script>
</body>

read data from json file and create html file

Hello I am new for jquery and json file,I want to create html file from json file.first data read from .json file then on the basis of json object create html file my json data is :--
{"userguid":"AB92DE99-D0D5-4081-802C-2E331F88AE84","sessguid":"AEA0774B-8CCE-4CB1-A6F8-484ADA1FB45F","transguid":"","ret_code":"ok","ret_mess":"","rec_guid":"5544F75A-4589-4605-B447-0AB123A1865D","parent_guid":"00000000-0000-0000-0000-000000000000","ElementName":"Main","elementtype":"Form","elementsource":"","onload":"","sequence":"0","isPublic":"0","attributes":{"width":"28%","height":"200px"}},{"userguid":"AB92DE99-D0D5-4081-802C-2E331F88AE84","sessguid":"AEA0774B-8CCE-4CB1-A6F8-484ADA1FB45F","transguid":"","ret_code":"ok","ret_mess":"","rec_guid":"6EB6C873-E2EC-4515-A6D8-2FBF0119F573","parent_guid":"5544F75A-4589-4605-B447-0AB123A1865D","ElementName":"MainTab","elementtype":"tab","elementsource":"","onload":"","sequence":"0","isPublic":"0","attributes":{"width":"65%"}},{"userguid":"AB92DE99-D0D5-4081-802C-2E331F88AE84","sessguid":"AEA0774B-8CCE-4CB1-A6F8-484ADA1FB45F","transguid":"","ret_code":"ok","ret_mess":"","rec_guid":"6E13FCBC-0DB2-4499-B200-61CD5A36F0C1","parent_guid":"6EB6C873-E2EC-4515-A6D8-2FBF0119F573","ElementName":"Results","elementtype":"tabdetail","elementsource":"","onload":"","sequence":"2","isPublic":"0","attributes":{"":""}},{"userguid":"AB92DE99-D0D5-4081-802C-2E331F88AE84","sessguid":"AEA0774B-8CCE-4CB1-A6F8-484ADA1FB45F","transguid":"","ret_code":"ok","ret_mess":"","rec_guid":"E5539403-9A58-4310-8013-AF4EEF62C217","parent_guid":"6EB6C873-E2EC-4515-A6D8-2FBF0119F573","ElementName":"Billing","elementtype":"tabdetail","elementsource":"","onload":"","sequence":"1","isPublic":"0","attributes":{"":""}},{"userguid":"AB92DE99-D0D5-4081-802C-2E331F88AE84","sessguid":"AEA0774B-8CCE-4CB1-A6F8-484ADA1FB45F","transguid":"","ret_code":"ok","ret_mess":"","rec_guid":"113293EE-0997-4398-8E4A-6BE7AEDC32C1","parent_guid":"6EB6C873-E2EC-4515-A6D8-2FBF0119F573","ElementName":"Utilities","elementtype":"tabdetail","elementsource":"","onload":"","sequence":"3","isPublic":"0","attributes":{"":""}},{"userguid":"AB92DE99-D0D5-4081-802C-2E331F88AE84","sessguid":"AEA0774B-8CCE-4CB1-A6F8-484ADA1FB45F","transguid":"","ret_code":"ok","ret_mess":"","rec_guid":"4EFA32EC-B37E-4DC2-A249-E7156196918F","parent_guid":"6E13FCBC-0DB2-4499-B200-61CD5A36F0C1","ElementName":"ResultsTab","elementtype":"tab","elementsource":"","onload":"","sequence":"0","isPublic":"0","attributes":{"":""}},{"userguid":"AB92DE99-D0D5-4081-802C-2E331F88AE84","sessguid":"AEA0774B-8CCE-4CB1-A6F8-484ADA1FB45F","transguid":"","ret_code":"ok","ret_mess":"","rec_guid":"F6FB6DAA-F6D9-43B0-88FD-688BEC0EAF32","parent_guid":"E5539403-9A58-4310-8013-AF4EEF62C217","ElementName":"BillingTabHeader","elementtype":"tab","elementsource":"","onload":"","sequence":"1","isPublic":"0","attributes":{"":""}},{"userguid":"AB92DE99-D0D5-4081-802C-2E331F88AE84","sessguid":"AEA0774B-8CCE-4CB1-A6F8-484ADA1FB45F","transguid":"","ret_code":"ok","ret_mess":"","rec_guid":"9E622E70-095A-4A1A-BA06-C67946D49549","parent_guid":"F6FB6DAA-F6D9-43B0-88FD-688BEC0EAF32","ElementName":"Current Billing","elementtype":"","elementsource":"","onload":"","sequence":"3","isPublic":"0","attributes":{"":""}},{"userguid":"AB92DE99-D0D5-4081-802C-2E331F88AE84","sessguid":"AEA0774B-8CCE-4CB1-A6F8-484ADA1FB45F","transguid":"","ret_code":"ok","ret_mess":"","rec_guid":"B41D9F7B-ED6F-47C5-8562-437D9F5F23AD","parent_guid":"F6FB6DAA-F6D9-43B0-88FD-688BEC0EAF32","ElementName":"Billing","elementtype":"","elementsource":"Sp_getBilling","onload":"","sequence":"1","isPublic":"0","attributes":{"":""}},{"userguid":"AB92DE99-D0D5-4081-802C-2E331F88AE84","sessguid":"AEA0774B-8CCE-4CB1-A6F8-484ADA1FB45F","transguid":"","ret_code":"ok","ret_mess":"","rec_guid":"151F6F13-C200-4EDA-8467-1D5AEB5F03A2","parent_guid":"F6FB6DAA-F6D9-43B0-88FD-688BEC0EAF32","ElementName":"PreBilling","elementtype":"","elementsource":"","onload":"","sequence":"2","isPublic":"0","attributes":{"":""}},{"userguid":"AB92DE99-D0D5-4081-802C-2E331F88AE84","sessguid":"AEA0774B-8CCE-4CB1-A6F8-484ADA1FB45F","transguid":"","ret_code":"ok","ret_mess":"","rec_guid":"91158CB4-C93B-4440-BAA4-771E9493EEA9","parent_guid":"F6FB6DAA-F6D9-43B0-88FD-688BEC0EAF32","ElementName":"Final Billing","elementtype":"","elementsource":"","onload":"","sequence":"4","isPublic":"0","attributes":{"":""}}
I tried this but this is not :-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<div style="margin: 20px auto; width: 500px;">
<form border="1" cellpadding="5" id="jsonTable" style="border-collapse: collapse;">
</form>
</div>
<script type="text/javascript">
function addAllColumnHeaders(myList) {
var columnSet = [];
var headerTr$ = $('<tr/>');
for (var i = 0; i < myList.length; i++) {
var rowHash = myList[i];
for (var key in rowHash) {
if ($.inArray(key, columnSet) == -1) {
columnSet.push(key);
headerTr$.append($('<th/>').html(key));
}
}
}
$("#jsonTable").append(headerTr$);
return columnSet;
}
$.getJSON("demo.json", function (data) {
var columns = addAllColumnHeaders(data);
for (var i = 0; i < data.length; i++) {
var row$ = $('<tr/>');
for (var colIndex = 0; colIndex < columns.length; colIndex++) {
var cellValue = data[i][columns[colIndex]];
if (cellValue == null) { cellValue = ""; }
row$.append($('<td/>').html(cellValue));
}
$("#jsonTable").append(row$);
}
});
I want to create html according to element type in JSON array. if like element type is form then html create form and if element type is tab then create tab.
for (var i = 0; i < data.length; i++) {
if (data[i].elementtype === "Form" {
//build form here
}
if (data[i].elementtype === "tab" {
var columns = addAllColumnHeaders(data);
//etc
}
}

Javascript table with for

I'm new to Javascript and I have been trying a Javascript table with a for loop all the day. I want to get the value of a cell. I'm doing like an "Excel app". Please check what is wrong. I just fixed things in answers ....
var MatriXcel = ( function( window, undefined ) {
var matriz = [];
var matrizJson;
var row = 5;
var col = 6;
function getData(){
return matriz;
}
function addRow(){
var newCol = [];
for (var i=0; i < col; i++){
newCol.push("");
}
matriz.push(newCol);
this.draw();
}
function drawTable(){
var table = "<tr><th></th><th>A</th><th>B</th><th>C</th><th>D</th><th>E</th></tr>";
for (var i=0; i < matriz.length; i++){
table += "<tr>";
for (var x=0; x < matriz[i].length; x++){
if (x == 0){
table += "<th>"+(i+1)+"</th>";
}else{
table += "<td><input type='text' onkeyup='MatriXcel.save("+i+","+x+",this)' value='"+matriz[i][x]+"'></td>";
}
}
table += "</tr>";
}
document.getElementById("tabla").innerHTML = table;
}
function saveInfo(irow, xcol, content){
matriz[irow][xcol] = content.value;
}
function getMatch(){
var tabla = document.getElementById("tabla");
search= document.getElementById("word").value;
var re = new RegExp(search,"gi");
var row;
var col;
for (var i = 0; i< tabla.rows.length; i++){
row = tabla.rows[i];
for (var j; j<row.cells.length; j++){
col = row.cells[j];
if(re.test(row.textContent)){
row.style.color="rgb(239, 19, 109)";
alert(row.textContent);
}else if(re.test(col.textContent)){
col.style.color="rgb(79, 2, 133)";
}
}
}
}
function saveLocal(){
matrizJson = JSON.stringify(matriz);
console.log(matrizJson);
window.localStorage.table = matrizJson;
// matrizJson = JSON.parse(matrizJson);
// console.log(matrizJson);
}
function init(){
if(typeof window.localStorage.table === 'string'){
matriz = JSON.parse(window.localStorage.table);
this.draw();
}
}
return {
addRow : addRow,
draw : drawTable,
save : saveInfo,
get : getData,
local : saveLocal,
init : init,
search : getMatch,
};
} )( window );
if (window.localStorage.length == 0){
MatriXcel.addRow();
MatriXcel.addRow();
MatriXcel.addRow();
MatriXcel.addRow();
MatriXcel.addRow();
}else{
MatriXcel.init();
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ExcelApp</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<input type="search" value="" placeholder="write here" id="word">
<input type="button" value="Search" id="trigger" onclick="MatriXcel.search()">
<table id="tabla">
</table>
</body>
<script type="text/javascript" src="script.js"></script>
</html>
It seems there is an issue with your way of checking regular expression.
For example, in place of this
if(re == row.value){
it should be
if(re.test(row.value)){
Additionally, please update the code as suggested by #Teemu in the comments
you've to check for col.textContent or col.innerHTML, not row.value

Categories