CODEWITHSUNDEEP
javascriptjson
rockmerockme
rockmerockme

Reputation: 129

create a dynamic table for json object

Here I have a json object with some elements are in the list, so I want to create a dynamic table for the object, that means if i generate a new json object, the table will be refreshed later. But now, I could not send the json object list to the table, do not know why. I am new to json, thanks.

<html>
<head>
  <title>Generate your own query</title> 
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">                      </script>
 <script type="text/javascript" language="javascript">
 $(document).ready(function() {
  $("#driver").click(function(event){
      $.getJSON('result.json', function(jd) {
         $('#stage').append('<p> Queries: ' + jd.queries_status+ '</p>');
         $('#stage').append('<p> Queries: ' + jd.list_of_queries[0].query_id+ '</p>');

       var table = document.getElementById("usertable");
         var tabledata = "";
       for(i=0;i<jd.list_of_queries.length;i++){
         tabledata += "<tr>";
         tabledata += "<td>" + jd.list_of_queries[i].query_id += "</td>";
         tabledata += "<td>" + jd.list_of_queries[i].query_status += "</td>";
         tabledata += "</tr>";
       }
       tabledata.innerHTML= tabledata; 
      ); //.appendTo('#records_table');
    console.log($tr.wrap('<p>').html());
     });
  });

      });
  });
 });
 </script>
  </head>
  <body>
  <p>Generate your own query</p>
  <div id="stage" >
     Query <input type="text" name="query" size="50">
   </div>
 </br>
   <table id="usertable" border="1" cellpadding="5" cellspacing=0>
     <tbody>
     <tr>
       <th>query_id</th>
       <th>query_status</th>
     </tr>
     </tbody>
   </table>
  </br>

  <input type="button" id="driver" value="submit query" />
  <form>
     <input type="submit" id="submit" value="go back"formaction="http://localhost/queryexample.html"  >
  </form>

result.json

{
  "queries_status": "under process",
  "list_of_queries":
  [
    { 
      "query_id": 1,
      "query_status": "under finished",
      "query_results number": "2",
      "detailed query results" : 
      [
        { "result 1":"string 1" },
        { "result 2":"string 2" }  
      ],
      "tasks_number" : 3,
      "list of tasks":
      [
        {
          "task id" :1,
          "task status": "finished",
          "task operation": "JOIN",
          "number of hits": 4,
          "finished hits":4,
          "task result number": "5"
        },
        {
          "task id" :2,
          "task status": "finished",
          "task operation": "SELECT",
          "number of hits": 5,
          "finished hits":5,
          "task result number": "3"
        },
        {
          "task id" :3,
          "task status": "finished",
          "task operation": "GROUPBY",
          "number of hits": 5,
          "finished hits":5,
          "task result number": 2
        }
      ] 
    },
    { 
      "query id": 2,
      "query status": "under process",
      "query results number": null,
      "detailed query results": 
      [
        null
      ],
      "tasks number" : 2,
      "list of tasks":
      [
        {
          "task id" :1,
          "task status": "finished",
          "task operation": "JOIN",
          "number of hits": 4,
          "finished hits":3,
          "task result number": "5"
        },   
        {
          "task id" :2,
          "task status": "under process",
          "task operation": "GROUPBY",
          "number of hits": 5,
          "finished hits":0,
          "task result number": "null"
        }
      ] 
    }
  ]
}

Upvotes: 0

Views: 4084

Answers (2)

Legendary
Legendary

Reputation: 2242

That fiddle with example (except getJson i use parse from html for visual test) : http://jsfiddle.net/Lpj5203v/2/

That ur answer: FIRST - u have error in your json results, look:

"query id": 2,
"query status": "under process",
"query results number": null,

In jd.list_of_queries[1] - u miss '_' in keys of hash.

That the javascript with answer:

<script type='text/javascript'>
  $(document).ready(function() {
    $("#driver").click(function(){
      $.getJSON('result.json', function(jd) {
        $('#stage').append('<p> Queries: ' + jd.queries_status+ '</p>');
        $('#stage').append('<p> Queries: ' + jd.list_of_queries[0].query_id+ '</p>');
        var $tbody = $("#usertable tbody");
        var tabledata = "";
        for(var i = 0; i < jd.list_of_queries.length; i++ ){
          tabledata = "";
          tabledata += "<tr>";
          tabledata += "<td>" + jd.list_of_queries[i].query_id + "</td>";
          tabledata += "<td>" + jd.list_of_queries[i].query_status + "</td>";
          tabledata += "</tr>";
          $tbody.append(tabledata);
        }
      }); 
    });
  }); 
</script>

And also i fix your html to valid:

<p>Generate your own query</p>
  <div id="stage">
      Query <input type="text" name="query" size="50" />
   </div>
      <br />
   <table id="usertable" border="1" cellpadding="5" cellspacing='0'>
     <thead>
       <tr>
         <th>query_id</th>
       <th>query_status</th>
     </tr>
     </thead>
       <tbody></tbody>
   </table>
<br />

Remember:

  • not </br>, but <br />
  • always close input and img tags by <input /> <img />

  • in table structure is:

    <table>
  <thead>
  </thead>
  <tbody>
  </tbody>
</table>

P.S. Also, u have a lot syntax errors in js, html, json - try to be more attentive to your error console log

P.P.S 

a += b

the same is

a = a + b

But a += a + b += c - is syntax error!

Upvotes: 2

david tallon
david tallon

Reputation: 424

From a Debugging perspective, you could try dumping the JSON objects to the web console and run the site. Does the console (accessed thru F12 on most browsers) show the expected data that you are trying to put into that table? This is just a good practice to help yourself understand the error and more effeciently find solutions.

My hunch on this one is that you may need to use the .stringify function on the JSON object in order to use the JSON fields in HTML.

Upvotes: 0

Related Questions