Assign multiple value into obj using jquery

Advertisements

Check following html and jQuery code. I just simply need to assign name and email into obj variable as a object where name and email will be the property name and its value from the table td>tr text. I already tried like obj = Object.assign(obj, {'name':name, 'email': email}); but seems its unable to assign name and email value.

Any idea how to fix it? Here is fiddle

Html:

<table class="table table-hover" id="myTable">
  <thead>
    <tr>
      <th scope="col">Full Name</th>
      <th scope="col">Email</th>
      <th>#Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>john@example.com</td>
      <td>
        <button type="button" class="btn btn-danger btn-lg remove-btn">
          X
        </button>
      </td>
    </tr>
    <tr>
      <td>Smith</td>
      <td>smith@example.com</td>
      <td>
        <button type="button" class="btn btn-danger btn-lg remove-btn">
          X
        </button>
      </td>
    </tr>

    <tr class="insert_td_after_it">
      <td>
        <input
          type="text"
          class="form-control"
          id="fullname_td"
          placeholder="Applicant Full Name"
          value=""
        />
      </td>
      <td>
        <input
          type="text"
          class="form-control"
          id="email_td"
          placeholder="Applicant Email"
          value=""
        />
      </td>
      <td>
        <button type="button" class="btn btn-info btn-lg" id="addAlert">
          +
        </button>
      </td>
    </tr>
  </tbody>
</table>

Jquery:

$(document).ready(function () {
  console.log("rendered.");

  var trs = $("#myTable").find("tbody>tr");

  var obj = {};

  $(trs).each(function (index, content) {
    var name = jQuery(content).find("td:eq(0)").text();
    var email = jQuery(content).find("td:eq(1)").text();

    obj = Object.assign(obj, { name: name, email: email });
  }); //each() finish

  console.log(obj);
}); //ready() finish

>Solution :

To assign name and email values as properties of the obj object, you need to create a new object for each row and assign the name and email values as properties of that object. Then you can add each new object to an array using the push() method. Here’s the modified jQuery code:

 $(document).ready(function(){
    console.log("rendered.");

    var trs = $("#myTable").find("tbody>tr");

    var objArr = [];

    $( trs ).each(function( index, content ) {

        var name = jQuery(content).find('td:eq(0)').text();
        var email = jQuery(content).find('td:eq(1)').text();

        var newObj = {};
        newObj['name'] = name;
        newObj['email'] = email;

        objArr.push(newObj);
    });

    console.log(objArr);
});

In this code, we first create an empty array objArr to hold the new objects. Then, inside the each() loop, we create a new object newObj and assign the name and email values as properties of that object. Finally, we push the new object to the objArr array. At the end of the loop, objArr will contain an array of objects, each with a name and email property corresponding to the values from each row of the table.

Leave a ReplyCancel reply