How to display JSON object in table format using javascript or jquery?

Question

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.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
        </script>

        </head>
    <body>
        <div id="wrap">
        <header>
            <h1>Task Tracker</h1>
            <h4>v2.0</h4>
        </header>
        <div id="main">
            <div id="left-side">
                <h3>Create a Task</h3>
                <form action="" method="post">
                    <div id="taskname" class="task-details">
                    <label>Name</label><br><input name="name" type="text">
                </div>
                <div id="taskdate" class="task-details">
                    <label>Date</label><br><input name="date" type="text">
                </div>
                <div id="assigned" class="task-details">
                    <label>Assigned To</label><br><input name="assigne" type="text">
                </div>
                    <input type="submit" value="Submit">
                </form>
            </div>
            <div id="right-side">
                <h3>Existing Tasks</h3>
                <div id="div1"> 
                </div>
            </div>
        </div>
    </div>
        <script>

$.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=$("<table/>").attr("id","mytable");
$("#div1").append(tbl);
for(var i=0;i<obj.length;i++)
{
    var tr="<tr>";
    var td1="<td>"+obj[i]["name"]+"</td>";
    var td2="<td>"+obj[i]["date"]+"</td>";
    var td3="<td>"+obj[i]["assigned"]+"</td></tr>";

   $("#mytable").append(tr+td1+td2+td3); 
}
            });



        </script>

    </body>
</html>

Rayon · Accepted Answer · 2016-02-16 05:43:42Z

Use e.preventDefault(); to prevent form-submit action.

Do not stringify to serializeObject otherwise it will push string in obj array

Append tr in table on submit action

Try this:

$.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(e) {
    e.preventDefault();
    var data = $('form').serializeObject();
    var tr = "<tr>";
    tr += "<td>" + data["name"] + "</td>";
    tr += "<td>" + data["date"] + "</td>";
    tr += "<td>" + data["assigned"] + "</td></tr>";
    $("#mytable").append(tr);
    obj.push(data);
    this.reset();
  });
  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 = $("<table/>").attr("id", "mytable");
  $("#div1").append(tbl);
  var html = '';
  for (var i = 0; i < obj.length; i++) {
    html += "<tr>";
    html += "<td>" + obj[i]["name"] + "</td>";
    html += "<td>" + obj[i]["date"] + "</td>";
    html += "<td>" + obj[i]["assigned"] + "</td></tr>";
  }
  $("#mytable").append(html);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrap">
  <header>
    <h1>Task Tracker</h1>
    <h4>v2.0</h4>
  </header>
  <div id="main">
    <div id="left-side">
      <h3>Create a Task</h3>
      <form action="" method="post">
        <div id="taskname" class="task-details">
          <label>Name</label>
          <br>
          <input name="name" type="text">
        </div>
        <div id="taskdate" class="task-details">
          <label>Date</label>
          <br>
          <input name="date" type="date" type="text">
        </div>
        <div id="assigned" class="task-details">
          <label>Assigned To</label>
          <br>
          <input name="assigned" type="text">
        </div>
        <input type="submit" value="Submit">
      </form>
    </div>
    <div id="right-side">
      <h3>Existing Tasks</h3>
      <div id="div1">
      </div>
    </div>
  </div>
</div>

Fiddle here

kp singh · Accepted Answer · 2016-02-16 05:51:18Z

0

just update your submit handler and also update name field "assigned" in your html

$('form').submit(function(e) {
    e.preventDefault();
    var data= $('form').serializeObject();
    $("#mytable").append("<tr><td>"+data["name"]+"</td><td>"+data["date"]+"</td><td>"+data["assigned"]+"</td></tr>");
    obj.push("data");
});

answered Feb 16, 2016 at 5:51

kp singh

1,4609 silver badges22 bronze badges

Collectives™ on Stack Overflow

How to display JSON object in table format using javascript or jquery?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related