i passed data fetched database via ajax displayed in html page. managed pass in multidimensional array php script. json string i'm unsure on how display output in html table.
script
$("#submit").on("click",function() { $("#set_setting").submit(function(){ data = $(this).serialize() $.ajax({ type: "post", datatype: "html", url: "submit_setting.php", //relative or absolute path response.php file data: data, success: function(data) { alert(data); //hide form $("#set_setting").slideup("slow"); //show result /* (i = 0; < data.length; i++) { console.log(data); $(".the-return").html(data); }*/ console.log(data); $(".the-return").html(data); } }); return false; }); }); php script
$json=array(); array_push($json,array("type"=>$cartype,"maker"=>$carmaker)); echo json_encode($json); output of data
hondahonda maker[{"type":["flying car","3 wheleer","weird car","miracle car","tata car","see car","star car","mn car","jkcar","car test","ting","honda"],"maker":["test maker","diamond car","ruby car","dont know car","titi car","saw car","moon car","ty car","ty car","car maker test","ting maker","honda maker"]}] how display json string in html table?
here's vanilla js trick. it's worth mentioning you're returning array of results, has single element in it. cause parsedresult[0] in code. if wanted return data multiple html tables, you'd have parsedresult[1], parsedresult[2] etc, etc. code doesn't account such situation - i've hard-coded work first.
result: (excuse text formatting of html table, if would)
type maker flying car test maker 3 wheleer diamond car weird car ruby car miracle car dont know car tata car titi car see car saw car star car moon car mn car ty car jkcar ty car car test car maker test ting ting maker honda honda maker code:
<!doctype html> <html> <head> <script> "use strict"; function newel(tag){return document.createelement(tag);} window.addeventlistener('load', ondocloaded, false); var dummyresultstring = '[{"type":["flying car","3 wheleer","weird car","miracle car","tata car","see car","star car","mn car","jkcar","car test","ting","honda"],"maker":["test maker","diamond car","ruby car","dont know car","titi car","saw car","moon car","ty car","ty car","car maker test","ting maker","honda maker"]}]'; function ondocloaded() { var ajaxresult = dummyresultstring; var tblofresults = parseandcreatetable( ajaxresult ); document.body.appendchild(tblofresults); } function parseandcreatetable(inputstring) { var rawresult = inputstring; var parsedresult = json.parse(rawresult); var tableheadings = []; // extract name of properties object has. (var property in parsedresult[0]) { if (parsedresult[0].hasownproperty(property)) tableheadings.push(property); } // make table var tbl = newel('table'); var tbody = newel('tbody'); tbl.appendchild(tbody); // make first row, headings in var tr = newel('tr'); var i, n = tableheadings.length; (i=0; i<n; i++) { var th = newel('th'); th.innertext = tableheadings[i]; tr.appendchild(th); } tbody.appendchild(tr); // 'fun' part - body itself. var currowindex, curcolindex, nrows = parsedresult[0][tableheadings[0]].length, ncols = tableheadings.length; (currowindex=0; currowindex<nrows; currowindex++) { var tr = newel('tr'); (curcolindex=0; curcolindex<ncols; curcolindex++) { var td = newel('td'); td.innertext = parsedresult[0][ tableheadings[curcolindex] ][currowindex]; tr.appendchild(td); } tbody.appendchild(tr); } return tbl; } </script> <style> </style> </head> <body> </body> </html> 
Comments
Post a Comment