Add object to an object from a function in JavaScript

Question

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.

var rowno = "row" + parseInt(index/rowNo) What are you trying to achieve here? you are trying to divide index with rowNo and assign it to rowNo? — Eddie
– Eddie, Commented Dec 16, 2017 at 15:06
if the input text elements are two for example I expect: {obj: {row0: {element0: "text-input2", element1: "text-input2"}}} — Hairi
– Hairi, Commented Dec 16, 2017 at 15:07
There are 2 text fields per roll. I want an object that reflects the structure of the table. Row0 would have element0 and element1, then Row1 would have element0 and element1 and so on — Hairi
– Hairi, Commented Dec 16, 2017 at 15:09

halfer · Accepted Answer · 2018-01-23 21:42:29Z

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>

BabaNew · Accepted Answer · 2017-12-16 15:20:14Z

1

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

answered Dec 16, 2017 at 15:20

BabaNew

1,0081 gold badge16 silver badges32 bronze badges

6 Comments

Hairi Over a year ago

The example above is only for demonstration, If I omit this line: obj[rowno] = new Object() I get the error Cannot set property 'subSubObj0' of undefined. How on earth In javaScript one can APPEND object to an object?

BabaNew Over a year ago

So ... the other guy steals my answer and gets the answer LOL

Hairi Over a year ago

You were first - Fixed :D

Sajib Khan Over a year ago

@BabaNew you mentioned, "You should not use parseInt". if parseInt() is not be used then first time row0 & second time it should row0.5 (rowno is changed)?

BabaNew Over a year ago

@SajibKhan since paraseInt is leading to this undesired behaviour, it should be avoided in favor of other approaches

|

Sajib Khan · Accepted Answer · 2017-12-16 15:52:18Z

1

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

edited Dec 16, 2017 at 15:52

answered Dec 16, 2017 at 15:38

Sajib Khan

24.4k9 gold badges69 silver badges79 bronze badges

1 Comment

Hairi Over a year ago

The other workarounds would do the job as well, but due to my BAD example, the didn't understand that I wanted to know want happens really, not how to get the job done. Now I get what happens :O, Tricky for noobsies like me :D.

Collectives™ on Stack Overflow

Add object to an object from a function in JavaScript

3 Answers 3

Comments

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related