Question 10925 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

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:

<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>[email protected]</td>
      <td>
        <button type="button" class="btn btn-danger btn-lg remove-btn">
          X
        </button>
      </td>
    </tr>
    <tr>
      <td>Smith</td>
      <td>[email protected]</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
Tags:

3

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    Just change var obj = {} to var obj = [] and:

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

    to:

    obj.push(Object.assign({}, { name: name, email: email }));

    because there in the array of tbody>tr, only the last element which success retrieved. So if you want to get all name and email, create an array of objects instead of a single object.

    $(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.push(Object.assign({}, { name: name, email: email }));
  }); //each() finish

  console.log(obj);
}); //ready() finish
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>[email protected]</td>
      <td>
        <button type="button" class="btn btn-danger btn-lg remove-btn">
          X
        </button>
      </td>
    </tr>
    <tr>
      <td>Smith</td>
      <td>[email protected]</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>
    Login or Signup to reply.
  3. 0

    Please try with this code-

    $(document).ready(function () {
  console.log("rendered.");
  var obj = [];
  $("#myTable tbody>tr").each(function (index, content) {
    var data = {};
    var name = jQuery(this).find("td:eq(0)").text();
    var email = jQuery(this).find("td:eq(1)").text();
    data.name = name;
    data.email = email;
    obj.push(data);
}); 
console.log(obj);
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search