javascript - how to use json parsed data to be displayed in html table -


like so how use json parsed data displayed in html table. display data in each row using html parsed data.

<!doctype html> <html> <head> <script> function tjsonparse() { var i=0; var j=0; alert('1'); var obj = json.parse('{"employeelist":       [{"name":"john","age":"40","gender":"male", "employment":   [{"company":"tml","tenure":"2"},   {"company":"sys","tenure":"4"},    {"company":"rew","tenure":"5"}]}, {"name":"john2","age":"402","gender":"male2",   "employment":[{"company":"tml2","tenure":"22"},  {"company":"sys2","tenure":"42"},    {"company":"rew2","tenure":"52"}]}]}'); alert('2');    while(i<obj.employeelist.length)   {   alert(obj.employeelist[i].name);  document.getelementbyid("name").innerhtml=obj.employeelist[i].name;  alert(obj.employeelist[i].age);  document.getelementbyid("age").innerhtml=obj.employeelist[i].age;  alert(obj.employeelist[i].gender);  document.getelementbyid("gender").innerhtml=obj.employeelist[i].gender;   j=0;  while(j<obj.employeelist[i].employment.length)  {  alert(obj.employeelist[i].employment[j].company); document.getelementbyid("company").innerhtml=obj.employeelist[i].employment[j].company; alert(obj.employeelist[i].employment[j].tenure); document.getelementbyid("tenure").innerhtml=obj.employeelist[i].employment[j].tenure; j++; } i++;  }  }  </script>  </head>  <body>  <table border="1", cellspacing="2", cellpadding="20">  <tr>  <th>name:   </th>  <th>age:    </th>  <th>gender:  </th>  <th>company:  </th>  <th>tenure:  </th>  </tr>  <tr> <td><span id="name"></span></td> <td><span id="age"></span></td> <td><span id="gender"></span></td> <td><span id="company"></span></td> <td><span id="tenure"></span></td>  </tr> <tr> <td><span id="name"></span></td> <td><span id="age"></span></td> <td><span id="gender"></span></td> <td><span id="company"></span> <td><span id="tenure"></span></td> </tr> <tr> <td><span id="name"></span></td> <td><span id="age"></span></td> <td><span id="gender"></span></td> <td><span id="company"></span></td>   <td><span id="tenure"></span></td> </tr> <tr>    <td><span id="name"></span></td>       <td><span id="age"></span></td> <td><span id="gender"></span></td> <td><span id="company"></span></td> <td><span id="tenure"></span></td> </tr> <tr> <td><span id="name"></span></td> <td><span id="age"></span></td> <td><span id="gender"></span></td> <td><span id="company"></span></td> <td><span id="tenure"></span></td> </tr> <tr> <td><span id="name"></span></td> <td><span id="age"></span></td> <td><span id="gender"></span></td> <td><span id="company"></span></td> <td><span id="tenure"></span></td> </tr> </table> <button  value="submit"   onclick="tjsonparse();">testjson</button> </body> </html>

you're missing couple of column titles? should work if understand you're after? http://jsfiddle.net/ngemh/1/

<div id="table"></div>  <script>  var i=0; var j=0; var table = " <table border=\"1\", cellspacing=\"2\", cellpadding=\"20\"> "+  "<tr>" +  "<th>name:   </th>" +  "<th>age:    </th>" +      "<th>gender:  </th>" +  "<th>company:  </th>" +  "<th>tenure:  </th>" +  "</tr>";  var obj = json.parse('{"employeelist":       [{"name":"john","age":"40","gender":"male","employment": [{"company":"tml","tenure":"2"}, {"company":"sys","tenure":"4"}, {"company":"rew","tenure":"5"}]}, {"name":"john2","age":"402","gender":"male2", "employment":[{"company":"tml2","tenure":"22"}, {"company":"sys2","tenure":"42"}, {"company":"rew2","tenure":"52"}]}]}');   while(i<obj.employeelist.length) { table += "<tr><td>"+obj.employeelist[i].name+"</td><td>"+obj.employeelist[i].age+"</td><td>"+obj.employeelist[i].gender+"</td>";  //alert(obj.employeelist[i].name);  //document.getelementbyid("name").innerhtml=obj.employeelist[i].name;  //alert(obj.employeelist[i].age);  //document.getelementbyid("age").innerhtml=obj.employeelist[i].age;  //alert(obj.employeelist[i].gender);  //document.getelementbyid("gender").innerhtml=obj.employeelist[i].gender;   j=0;  while(j<obj.employeelist[i].employment.length)  {     table += "<td>"+obj.employeelist[i].employment[j].company+"</td><td>"+obj.employeelist[i].employment[j].tenure+"</td>";     //alert(obj.employeelist[i].employment[j].company);     //document.getelementbyid("company").innerhtml=obj.employeelist[i].employment[j].company;     //alert(obj.employeelist[i].employment[j].tenure);     //document.getelementbyid("tenure").innerhtml=obj.employeelist[i].employment[j].tenure;     j++; } table += "</tr>"; i++; } document.getelementbyid("table").innerhtml=table; </script>

alternatively use jquery parse json using .json , .each method iterate through each row. http://api.jquery.com/jquery.each/ http://api.jquery.com/jquery.parsejson/


Comments

Post a Comment

Popular posts from this blog

linux - xterm copying to CLIPBOARD using copy-selection causes automatic updating of CLIPBOARD upon mouse selection -

i've tried various ways coerce xterm (versions 285 , 292) copy selection clipboard clipboard whenever press ctrl-shift-c. promising way far has been, in ~/.xresources, put this: xterm*vt100.translations: #override \ ctrl shift <keypress> c: copy-selection(clipboard) \n\ ctrl shift <keypress> v: insert-selection(clipboard) ctrl-shift-v works perfectly, copying has nuance... if restart xterm, highlighting text puts things in primary clipboard; expected, proper, default behavior. if hit ctrl-shift-c, copies current selection clipboard clipboard. the bug, however, if highlight text after first time pressed ctrl-shift-c, you'll see highlighting copies both primary and clipboard. cannot figure out how stop xterm updating clipboard upon selection... , doesn't make sense me in first place. i said, @ specific point in time, copy selection clipboard... yet starts updating automatically upon selection after doing once... anyone have workaround...
Read more

c++ - qgraphicsview horizontal scrolling always has a vertical delta -

Image
i've subclassed qgraphicsview custom canvas used in cad application. i've reimplemented qgraphicsview::wheelevent check keyboard modifiers control key and, if control key pressed, zoom. i'm trying implement horizontal scroll when user holds shift , uses wheel. the problem i'm having horizontal scrolling always scrolls 0.279. not huge problem, hugely annoying , points else being wrong. so, here questions: is right way implement horizontal scrolling? if not, is? how eliminate delta of 0.279? thanks in advance. code , sample output below void myview::zoom(int delta) { double factor = pow(1.2, delta/abs(delta)); this->scale(factor, factor); } void myview::scrollhorizontal(int level) { qpointf center = maptoscene(viewport()->rect().center()); qdebug() << "center: " << center.x() << ", " << center.y(); centeron(qpointf(center.x() - level, center.y())); } void myview::wheelevent(qwheeleve...
Read more