title: How to display JSON object in table format using javascript or jquery?
body: <p>I have set of JSON objects that I would like to display in table format and I have few input fields. The value entered in form fields should be updated in Json object and should be displayed in the existing table. Following is the code. I am unable to update the JSON object in the table. </p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"&gt;
          &lt;/script&gt;
  
          &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="wrap"&gt;
          &lt;header&gt;
              &lt;h1&gt;Task Tracker&lt;/h1&gt;
              &lt;h4&gt;v2.0&lt;/h4&gt;
          &lt;/header&gt;
          &lt;div id="main"&gt;
              &lt;div id="left-side"&gt;
                  &lt;h3&gt;Create a Task&lt;/h3&gt;
                  &lt;form action="" method="post"&gt;
                      &lt;div id="taskname" class="task-details"&gt;
                      &lt;label&gt;Name&lt;/label&gt;&lt;br&gt;&lt;input name="name" type="text"&gt;
                  &lt;/div&gt;
                  &lt;div id="taskdate" class="task-details"&gt;
                      &lt;label&gt;Date&lt;/label&gt;&lt;br&gt;&lt;input name="date" type="text"&gt;
                  &lt;/div&gt;
                  &lt;div id="assigned" class="task-details"&gt;
                      &lt;label&gt;Assigned To&lt;/label&gt;&lt;br&gt;&lt;input name="assigne" type="text"&gt;
                  &lt;/div&gt;
                      &lt;input type="submit" value="Submit"&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
              &lt;div id="right-side"&gt;
                  &lt;h3&gt;Existing Tasks&lt;/h3&gt;
                  &lt;div id="div1"&gt; 
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
          &lt;script&gt;
  
  $.fn.serializeObject = function()
          {
              var o = {};
              var a = this.serializeArray();
              $.each(a, function() {
                  if (o[this.name] !== undefined) {
                      if (!o[this.name].push) {
                          o[this.name] = [o[this.name]];
                      }
                      o[this.name].push(this.value || '');
                  } else {
                      o[this.name] = this.value || '';
                  }
              });
              return o;
              };
  
              $(function() {
                  $('form').submit(function() {
                  var data= console.log(JSON.stringify($('form').serializeObject()));
                  return false;
                  obj.push("data");
              });
                  var obj=[
  
      {"name": "Task Name", "date": "12/01/2012", "assigned": "John Doe" },
      {"name": "Task Name", "date": "12/02/2012", "assigned": "John Doe" },
      {"name": "Task Name", "date": "12/03/2012", "assigned": "John Doe" },
      {"name": "Task Name", "date": "12/04/2012", "assigned": "John Doe" },
      {"name": "Task Name", "date": "12/05/2012", "assigned": "John Doe" },
      {"name": "Task Name", "date": "12/06/2012", "assigned": "John Doe" },
      {"name": "Task Name", "date": "12/07/2012", "assigned": "John Doe" }
  
  ]
  
  
  var tbl=$("&lt;table/&gt;").attr("id","mytable");
  $("#div1").append(tbl);
  for(var i=0;i&lt;obj.length;i++)
  {
      var tr="&lt;tr&gt;";
      var td1="&lt;td&gt;"+obj[i]["name"]+"&lt;/td&gt;";
      var td2="&lt;td&gt;"+obj[i]["date"]+"&lt;/td&gt;";
      var td3="&lt;td&gt;"+obj[i]["assigned"]+"&lt;/td&gt;&lt;/tr&gt;";
  
     $("#mytable").append(tr+td1+td2+td3); 
  }
              });
  
  
  
          &lt;/script&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>