JSON-ARRAY
Quellcode

// <![CDATA[

function createTable(objs, str_numberDefinition, pindexnr, str_calledit, str_calldelete) {
let nl = '\n';
let obj = objs[0];
let captions = Object.keys(obj);

let s='';
s +='<table>' + nl;
s +='<tr>' + nl;
if (str_numberDefinition.length>0) {
s +=' <th>' + str_numberDefinition + '</th>' + nl;
}
for(var i in captions){
let scaption = captions[i];
let sfirst = captions[i].substring(0,1).toUpperCase();
s +=' <th>' + sfirst + scaption.substring(1,scaption.length) + '</th>' + nl;
}
if (str_calledit!='') {
s +=' <th>' + '-' + '</th>' + nl;
}
if (str_calldelete!='') {
s +=' <th>' + '-' + '</th>' + nl;
}
s +='</tr>' + nl;

for (let i in objs) {
s +='<tr>' + nl;
if (str_numberDefinition.length>0) {
s +=' <td>' + (i+1) + '</td>' + nl;
}
let obj = objs[i];
for(var j in obj){
//alert(j);
s +=' <td>' + obj[j] + '</td>' + nl;
}
if (str_calledit!='') {
s+=' <td class="tdbutton">' + '<input type="button" value="Edit" onclick="'+str_calledit+'(' + obj[pindexnr] + ')"/>' + '</td> ' + nl;
}
if (str_calldelete!='') {
s+=' <td class="tdbutton">' + '<input type="button" value="Delete" onclick="'+str_calldelete+'(' + obj[pindexnr] + ')"/>' + '</td> ' + nl;
}

s +='</tr>' + nl;
}

s +='</table>' + nl;
return s;
}








// ]]>












Json-Array

[
{"pindex":11,"cnr":1111,"lastname":"Meier","firstname":"Hans","street":"Friedrichstrasse 55","birthday":"2018-03-14"},
{"pindex":13,"cnr":23468,"lastname":"Brandteri","firstname":"Torsteni","street":"Marktstrasse 5a","birthday":"2018-03-07"},
{"pindex":14,"cnr":42,"lastname":"Dent","firstname":"Arthur","street":"Magarethea Weg 12","birthday":"1996-08-07"},
{"pindex":15,"cnr":142,"lastname":"Braun","firstname":"Werner","street":"Nasa 1969","birthday":"1969-07-20"},
{"pindex":16,"cnr":145,"lastname":"Brandt","firstname":"Willi","street":"Kastanieallee 12a","birthday":"1971-02-10"},
{"pindex":17,"cnr":345,"lastname":"Schmitt","firstname":"Dorethea","street":"Martkstrasse 3","birthday":"2001-12-24"},
{"pindex":18,"cnr":11,"lastname":"Schwarzenau","firstname":"Paul","street":"Kreuzerweg 12a","birthday":"2001-04-17"},
{"pindex":19,"cnr":55,"lastname":"Gisin","firstname":"Nicola","street":"Springerallee 1","birthday":"1999-12-24"},
{"pindex":20,"cnr":123,"lastname":"Genius","firstname":"Chantal","street":"Hallenser Strasse 3","birthday":"1991-02-10"},
{"pindex":21,"cnr":77,"lastname":"Schoen","firstname":"Jaqueline","street":"Einkaufsallee 123","birthday":"1991-02-11"},
{"pindex":22,"cnr":14,"lastname":"Schwarz","firstname":"Hans-Georg","street":"Lange Strasse 3","birthday":"1985-06-27"},
{"pindex":23,"cnr":35,"lastname":"Maurer","firstname":"Fritz","street":"Handwerkerweg 5","birthday":"1979-02-29"},
{"pindex":24,"cnr":113,"lastname":"Bosch","firstname":"Hieronymus","street":"Kunstweg 42","birthday":"1998-05-11"},
{"pindex":25,"cnr":57,"lastname":"Brandtner","firstname":"Andrea","street":"Rosenweg 2","birthday":"2001-02-03"},
{"pindex":42,"cnr":12345,"lastname":"Ki","firstname":"Ki","street":"Ki 61a","birthday":"2001-01-01"}
]




Aufruf

let objs = JSON.parse(xmlhttpMain.responseText);
let elementAjax = document.getElementById("ajaxtabelle");
elementAjax.innerHTML = createTable(objs,'No', "pindex", 'calledit', 'calldelete');





Ergebnis der Umwandlung


Bsp2
Json-Dialogelemente