CODEWITHSUNDEEP
javascriptjquery
Hairi
Hairi

Reputation: 3725

Add object to an object from a function in JavaScript

First I hit the button Add then 'Show' and lastly Show Object

The problem is that when I hit the button Show Object I get only one object for the last input element instead one object for each input element.

How can I add new objects from inside a function without loosing most of them?

Here is the code:

$(document).ready(function() {
  // body...
  var tableInput = "<tr><td><input type='text'/></td><td><input type='text'/></td></tr>";
  var obj = {};
  const rowNo = 2;

  $("h1").text("Helllo Sonq");
  console.log("function called!");

  $("#add").click(function() {
    $("#table").append(tableInput)
  })

  $("#show").click(function() {
    $(":text").each(function(index) {
      console.log(index + ': ' + $(this).val());
      var rowno = "row" + parseInt(index / rowNo)
      obj[rowno] = new Object()
      obj[rowno]["element" + index.toString()] = $(this).val();
      // obj[rowno]["element" + index.toString()] = $(this).val();
    })
  })

  $("#show-object").click(function() {
    console.log(obj);
  })
})
<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
</head>

<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript" src="js/js.js"></script>
  <h1>Hello Riko!</h1>
  <button id="add">Add</button>
  <button id="show">Show</button>
  <button id="show-object">Show Object</button>
  <table id="table">
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </table>
</body>

</html>

Into the function :

$("#show").click(function(){
    $(":text").each(function(index) {

I want to add an object to the global obj for each iterated input type=text element.

Upvotes: 2

Views: 65

Answers (3)

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

Since you target the rows then you should loop through them first then inside every row loop throug the inputs just like :

$("tbody>tr").each(function(index) {
  var rowno = "row" + index;
  obj[rowno] = {};

  $(":text", this).each(function(index) {
    console.log(index + ': ' + $(this).val());

    obj[rowno]["element" + index] = $(this).val();
  });
});

NOTE : My suggestion adjust also the table using thead/tbody.

$(document).ready(function() {
  var tableInput = "<tr><td><input type='text'/></td><td><input type='text'/></td></tr>";
  var obj = {};
  const rowNo = 2;

  $("h1").text("Helllo Sonq");
  console.log("function called!");

  $("#add").click(function() {
    $("#table>tbody").append(tableInput)
  })

  $("#show").click(function() {
    $("tbody>tr").each(function(index) {
      var rowno = "row" + index;
      obj[rowno] = {};

      $(":text", this).each(function(index) {
        console.log(index + ': ' + $(this).val());

        obj[rowno]["element" + index] = $(this).val();
      })
    })
  })

  $("#show-object").click(function() {
    console.log(obj);
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1>Hello Riko!</h1>
<button id="add">Add</button>
<button id="show">Show</button>
<button id="show-object">Show Object</button>
<table id="table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

Upvotes: 2

Sajib Khan
Sajib Khan

Reputation: 24156

Just create obj[rowno] = new Object() if it does not exist:

if (!obj[rowno]) {
  obj[rowno] = new Object()
}

because it is recreating the new instance so, the previous one has vanished.

$("#show").click(function() {
  $(":text").each(function(index) {
    console.log(index + ': ' + $(this).val());
    var rowno = "row" + parseInt(index / rowNo)
    if (!obj[rowno]) {
      obj[rowno] = new Object()
    }
    obj[rowno]["element" + index.toString()] = $(this).val();
  })
})

N.B.

parseInt(index / 2) returns 0 when index = 0
parseInt(index / 2) returns 0 when index = 1

Upvotes: 1

BabaNew
BabaNew

Reputation: 976

The first time you do var rowno = "row" + parseInt(index/rowNo) , var rowno is filled with row0. Since 0/2 is 0.

But then, the second time, the same row, var rowno = "row" + parseInt(index/rowNo) gives you also a value of 0, since 1/2 does 0.5, wich gets truncated to 0. By doing so, you are replacing the object at position 'row0', wich is what an object in javascript does.

You should not use parseInt

Upvotes: 1

Related Questions