Dynamic table to JSON

Question

I have dynamic table each time the user will add a new row to fill up the customer information. After hitting the submit button I need those data in JSON format.

HTML

<table class="table table-bordered table-hover" id="driver">
                <thead>
                    <tr>
                        <th class="text-center text-info">
                            #
                        </th>
                        <th class="text-center text-info">
                            first name
                        </th>
                        <th class="text-center text-info">
                            last name
                        </th>

                        <th class="text-center text-info">
                            mobile num
                        </th>
                        <th class="text-center text-info">
                            email id
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr id='addr0'>
                        <td>
                        1
                        </td>
                        <td>
                        <input type="text" name='firstname'  placeholder='first name' class="form-control"/>
                        </td>
                        <td>
                        <input type="text" name='lastname' placeholder='last name' class="form-control"/>
                        </td>
                        <td>
                        <input type="text" name='mobile' placeholder='mobile number' class="form-control"/>
                        </td>

                        <td>
                        <input type="text" name='email' placeholder='email' class="form-control"/>
                        </td>
                    </tr>
                    <tr id='addr1'></tr>
                </tbody>
            </table>

The JSON data must be in key & value pair. Can anybody suggest how we can do this?

[
    {
        "first name": "ashok",
        "last name": "kumar",
        "mobile num": 45,
        "email id": "xyx@gmail.com"
    },
    {
        "first name": "arun",
        "last name": "kumar",
        "mobile num": 789,
        "email id": "kum@as.com"
    }
]

Answer 1

serializeArray() will Help you once your array of object is formed to convert it to json you can use JSON.stringify

jQuery Source

Description: Encode a set of form elements as an array of names and values.

Updated

DEMO

$("form").submit(function(event) {
  var newFormData = [];
  jQuery('#driver tr:not(:first)').each(function(i) {
    var tb = jQuery(this);
    var obj = {};
    tb.find('input').each(function() {
      obj[this.name] = this.value;
    });
    obj['row'] = i;
    newFormData.push(obj);
  });
  console.log(newFormData);
  document.getElementById('output').innerHTML = JSON.stringify(newFormData);
  event.preventDefault();
});

pre {
  width: 100%;
  background-color: whitesmoke;
  white-space: pre-wrap;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <table class="table table-bordered table-hover" id="driver">
    <thead>
      <tr>
        <th class="text-center text-info">
          #
        </th>
        <th class="text-center text-info">
          first name
        </th>
        <th class="text-center text-info">
          last name
        </th>

        <th class="text-center text-info">
          mobile num
        </th>
        <th class="text-center text-info">
          email id
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          1
        </td>
        <td>
          <input type="text" name='firstname' placeholder='first name' class="form-control" />
        </td>
        <td>
          <input type="text" name='lastname' placeholder='last name' class="form-control" />
        </td>
        <td>
          <input type="text" name='mobile' placeholder='mobile number' class="form-control" />
        </td>

        <td>
          <input type="text" name='email' placeholder='email' class="form-control" />
        </td>
      </tr>
      <tr>
        <td>
          2
        </td>
        <td>
          <input type="text" name='firstname' placeholder='first name' class="form-control" />
        </td>
        <td>
          <input type="text" name='lastname' placeholder='last name' class="form-control" />
        </td>
        <td>
          <input type="text" name='mobile' placeholder='mobile number' class="form-control" />
        </td>

        <td>
          <input type="text" name='email' placeholder='email' class="form-control" />
        </td>
      </tr>
    </tbody>
  </table>
  <input type="submit" name="g" value="Submit">
  <pre id="output"></pre>
</form>

Since you want input field as your Key Name and its value as value inside Object so the code below is actually looping through each row and inside it is looping through each column and storing it in obj named Object and then push it into Array newFormData