Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Assign multiple value into obj using jquery

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:

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

<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.

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading