Skip to content

Instantly share code, notes, and snippets.

@alenthomas

alenthomas/index.html

Forked from etherealm13/index.html
Created July 4, 2018 13:15
Show Gist options
  • Save alenthomas/5f190c2ee4e37ae3a64a1c62f06a25d9 to your computer and use it in GitHub Desktop.
Save alenthomas/5f190c2ee4e37ae3a64a1c62f06a25d9 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/wimixab
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="demo"></div>
<button onclick="start();">Start</button>
<button onclick="start2();">Update</button>
<button onclick="clearInterval(myVar);">Stop</button>
<button onclick="clearInterval(myVar2);">Stop 2</button>
<script id="jsbin-javascript">
arrayObj = [
{ "name": "batman", "powerlevel": 4572, "powers": 'rich, genius', "weakness": 'poker' },
{ "name": "goku", "powerlevel": 34572, "powers": 'martial arts', "weakness": 'food' },
{ "name": "superman", "powerlevel": 324172, "powers": 'super strength', "weakness": 'kryptonite' }
]
myData= { "name": "goku", "powerlevel": 324572, "powers": 'super saiyan', "weakness": 'food' }
function update(arr1, arr2){
return arr1.reduce((newArr, item) => {
(item.name === arr2.name) ? newArr.push(arr2) : newArr.push(item);
return newArr;
}, []);
}
function createTable(){
addTable(arrayObj);
}
function mainFunc(){
var myTableDiv = document.getElementById("demo");
myTableDiv.innerHTML = '';
let newArr = update(arrayObj,myData);
addTable(newArr);
}
function addTable(tableData) {
var myTableDiv = document.getElementById("demo");
var table = document.createElement('TABLE');
table.border = '1';
myTableDiv.innerHTML = '';
addTableHead(tableData, table);
addTableBody(tableData, table);
myTableDiv.appendChild(table);
}
function addTableHead(tableData, table) {
var tableHead = document.createElement('THEAD');
table.appendChild(tableHead);
var tr = document.createElement('TR');
tableHead.appendChild(tr);
Object.keys(tableData[0]).map(field => {
var th = document.createElement('TH');
th.width = '75';
th.appendChild(document.createTextNode(field));
tr.appendChild(th);
return th;
})
}
function addTableBody(tableData, table) {
var tableBody = document.createElement('TBODY');
table.appendChild(tableBody);
tableData.map((item) => {
var tr = document.createElement('TR');
tableBody.appendChild(tr);
console.log(item)
Object.keys(item).map(field => {
var td = document.createElement('TD');
td.width = '75';
td.appendChild(document.createTextNode(item[field]));
tr.appendChild(td);
return td;
})
return tr;
})
}
var myVar, myVar2;
function start() {
createTable();
myVar = setInterval(createTable,4000);
}
function start2() {
mainFunc();
myVar2 = setInterval(mainFunc,5000);
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">
arrayObj = [
{ "name": "batman", "powerlevel": 4572, "powers": 'rich, genius', "weakness": 'poker' },
{ "name": "goku", "powerlevel": 34572, "powers": 'martial arts', "weakness": 'food' },
{ "name": "superman", "powerlevel": 324172, "powers": 'super strength', "weakness": 'kryptonite' }
]
myData= { "name": "goku", "powerlevel": 324572, "powers": 'super saiyan', "weakness": 'food' }
function update(arr1, arr2){
return arr1.reduce((newArr, item) => {
(item.name === arr2.name) ? newArr.push(arr2) : newArr.push(item);
return newArr;
}, []);
}
function createTable(){
addTable(arrayObj);
}
function mainFunc(){
var myTableDiv = document.getElementById("demo");
myTableDiv.innerHTML = '';
let newArr = update(arrayObj,myData);
addTable(newArr);
}
function addTable(tableData) {
var myTableDiv = document.getElementById("demo");
var table = document.createElement('TABLE');
table.border = '1';
myTableDiv.innerHTML = '';
addTableHead(tableData, table);
addTableBody(tableData, table);
myTableDiv.appendChild(table);
}
function addTableHead(tableData, table) {
var tableHead = document.createElement('THEAD');
table.appendChild(tableHead);
var tr = document.createElement('TR');
tableHead.appendChild(tr);
Object.keys(tableData[0]).map(field => {
var th = document.createElement('TH');
th.width = '75';
th.appendChild(document.createTextNode(field));
tr.appendChild(th);
return th;
})
}
function addTableBody(tableData, table) {
var tableBody = document.createElement('TBODY');
table.appendChild(tableBody);
tableData.map((item) => {
var tr = document.createElement('TR');
tableBody.appendChild(tr);
console.log(item)
Object.keys(item).map(field => {
var td = document.createElement('TD');
td.width = '75';
td.appendChild(document.createTextNode(item[field]));
tr.appendChild(td);
return td;
})
return tr;
})
}
var myVar, myVar2;
function start() {
createTable();
myVar = setInterval(createTable,4000);
}
function start2() {
mainFunc();
myVar2 = setInterval(mainFunc,5000);
}
</script></body>
</html>
Raw
jsbin.wimixab.js
arrayObj = [
{ "name": "batman", "powerlevel": 4572, "powers": 'rich, genius', "weakness": 'poker' },
{ "name": "goku", "powerlevel": 34572, "powers": 'martial arts', "weakness": 'food' },
{ "name": "superman", "powerlevel": 324172, "powers": 'super strength', "weakness": 'kryptonite' }
]
myData= { "name": "goku", "powerlevel": 324572, "powers": 'super saiyan', "weakness": 'food' }
function update(arr1, arr2){
return arr1.reduce((newArr, item) => {
(item.name === arr2.name) ? newArr.push(arr2) : newArr.push(item);
return newArr;
}, []);
}
function createTable(){
addTable(arrayObj);
}
function mainFunc(){
var myTableDiv = document.getElementById("demo");
myTableDiv.innerHTML = '';
let newArr = update(arrayObj,myData);
addTable(newArr);
}
function addTable(tableData) {
var myTableDiv = document.getElementById("demo");
var table = document.createElement('TABLE');
table.border = '1';
myTableDiv.innerHTML = '';
addTableHead(tableData, table);
addTableBody(tableData, table);
myTableDiv.appendChild(table);
}
function addTableHead(tableData, table) {
var tableHead = document.createElement('THEAD');
table.appendChild(tableHead);
var tr = document.createElement('TR');
tableHead.appendChild(tr);
Object.keys(tableData[0]).map(field => {
var th = document.createElement('TH');
th.width = '75';
th.appendChild(document.createTextNode(field));
tr.appendChild(th);
return th;
})
}
function addTableBody(tableData, table) {
var tableBody = document.createElement('TBODY');
table.appendChild(tableBody);
tableData.map((item) => {
var tr = document.createElement('TR');
tableBody.appendChild(tr);
console.log(item)
Object.keys(item).map(field => {
var td = document.createElement('TD');
td.width = '75';
td.appendChild(document.createTextNode(item[field]));
tr.appendChild(td);
return td;
})
return tr;
})
}
var myVar, myVar2;
function start() {
createTable();
myVar = setInterval(createTable,4000);
}
function start2() {
mainFunc();
myVar2 = setInterval(mainFunc,5000);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment