Creating an Array in javascript

Question

I'm try to create an array but data come back empty, it does not seem to be working, any help would be appreciated. I've updated the and added the html. appreciate you all for your patience.

I'm still getting [object Array]: [] when my the results are yielded.

 <table class="table table-bordered table-framed" id="seconDTable" style="display:block;" i>
                        <tbody id="secondtbody">

                                    <tr name="myRow">
                                        <td style="width: 100%;">
                                           <input type="text" name="ParentTitle" value="book1">
                                            <select id="ddlPageCount" style=" width: 35px; padding - top: 1px; height: 20px; font - size: 14px;  color: #555555; vertical - align: left; background - color: #ffffff;1px solid #cccccc;border - radius: 1px; ">
                                                @for (int i = 1; i < 10 + 1; i++)
                                                {
                                                    <option value="@i">
                                                        @i
                                                    </option>
                                                }
                                            </select>
                                        </td>
                                    </tr>
                                    <tr name="myRow">
                                        <td style="width: 100%;">
                                           <input type="text" name="ParentTitle" value="book2">
                                            <select id="ddlPageCount" style=" width: 35px; padding - top: 1px; height: 20px; font - size: 14px;  color: #555555; vertical - align: left; background - color: #ffffff;1px solid #cccccc;border - radius: 1px; ">
                                                @for (int i = 1; i < 10 + 1; i++)
                                                {
                                                    <option value="@i">
                                                        @i
                                                    </option>
                                                }
                                            </select>
                                        </td>
                                    </tr>                                                                                

                                    </tr>
                                }
                            }
                        </tbody>
                    </table>

var rows = document.getElementById("seconDTable").getElementsByTagName("myRow").length;
var data = [];
$("table tbody tr").each(function () {
    var textval = $(this).find("td").find("input[type=text][name=ParentTitle]").val();
    var ddlval = $(this).find("td").find("select option:selected").val();
    for (var i = 0; i < rows ; i++) {
               data.push{[
                    "Title": textval,
                    "PageNumber": ddlval
                ]};
    }
    console.log(data);
})

Please include enough for us to replicate the issue, preferably as a minimal reproducible example. What is mynumber ? Where does mynumber come from? What, if any, console errors do you get? — Jon P
– Jon P, Commented Feb 25, 2019 at 1:01
Sorry,... var rows = document.getElementById(myTable).getElementsByTagName("myRow").length; — larry
– larry, Commented Feb 25, 2019 at 1:14

Jon P · Accepted Answer · 2019-02-25 03:39:36Z

There is a fair bit broken in your code. I've attempted to address these with comments in the code below.

Always address errors in the console.

//There is no tag "myRow", so the length attribute and therefor rows will be 0. 
//So your for loop won't run and nothing will be assigned to the array.
//var rows = document.getElementById("seconDTable").getElementsByTagName("myRow").length;
//the use of the "name" attribute here is unususal, maybe you meant to use a class
//Use querySelectorAll 
var rows = document.querySelectorAll("#seconDTable tr[name=myRow]").length;
var data = [];
$("table tbody tr").each(function() {
  var textval = $(this).find("td").find("input[type=text][name=ParentTitle]").val();
  var ddlval = $(this).find("td").find("select option:selected").val();
  for (var i = 0; i < rows; i++) {
    //Incorrect syntax for push
    //data.push{[
    data.push({
      "Title": textval,
      "PageNumber": ddlval
    });
  }
  console.log(data);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<table class="table table-bordered table-framed" id="seconDTable" style="display:block;" i>
  <tbody id="secondtbody">

    <tr name="myRow">
      <td style="width: 100%;">
        <input type="text" name="ParentTitle" value="book1">
        <select id="ddlPageCount" style=" width: 35px; padding - top: 1px; height: 20px; font - size: 14px;  color: #555555; vertical - align: left; background - color: #ffffff;1px solid #cccccc;border - radius: 1px; ">
          <!-- Angualr?? @for (int i = 1; i < 10 + 1; i++)
                                                {
                                                    <option value="@i">
                                                        @i
                                                    </option>
                                                } -->
          <option value="1">1</option>
          <option value="2">2</option>
        </select>
      </td>
    </tr>
    <tr name="myRow">
      <td style="width: 100%;">
        <input type="text" name="ParentTitle" value="book2">
        <select id="ddlPageCount" style=" width: 35px; padding - top: 1px; height: 20px; font - size: 14px;  color: #555555; vertical - align: left; background - color: #ffffff;1px solid #cccccc;border - radius: 1px; ">
          <option value="1">1</option>
          <option value="2">2</option>
        </select>
      </td>
    </tr>
    <!-- What!!??
                                    </tr>
                                    
                                }
                            }-->
  </tbody>
</table>

Your next question should be, "why do I end up with 4 items in the array?". Basically you are looping over the table rows twice. Once in the jquery each() function, then in your for loop. Just do it in the each() function. You should end up with something like the below:

var data = [];
$("table tbody tr").each(function() {
  var textval = $(this).find("td").find("input[type=text][name=ParentTitle]").val();
  var ddlval = $(this).find("td").find("select option:selected").val();

  data.push({
    "Title": textval,
    "PageNumber": ddlval
  });
});

console.log(data);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<table class="table table-bordered table-framed" id="seconDTable" style="display:block;" i>
  <tbody id="secondtbody">

    <tr class="myRow">
      <td style="width: 100%;">
        <input type="text" name="ParentTitle" value="book1">
        <select id="ddlPageCount" style=" width: 35px; padding - top: 1px; height: 20px; font - size: 14px;  color: #555555; vertical - align: left; background - color: #ffffff;1px solid #cccccc;border - radius: 1px; ">
          <!-- Angualr?? @for (int i = 1; i < 10 + 1; i++)
                                                {
                                                    <option value="@i">
                                                        @i
                                                    </option>
                                                } -->
          <option value="1">1</option>
          <option value="2">2</option>
        </select>
      </td>
    </tr>
    <tr class="myRow">
      <td style="width: 100%;">
        <input type="text" name="ParentTitle" value="book2">
        <select id="ddlPageCount" style=" width: 35px; padding - top: 1px; height: 20px; font - size: 14px;  color: #555555; vertical - align: left; background - color: #ffffff;1px solid #cccccc;border - radius: 1px; ">
          <option value="1">1</option>
          <option value="2">2</option>
        </select>
      </td>
    </tr>
    <!-- What!!??
                                    </tr>
                                    
                                }
                            }-->
  </tbody>
</table>

Michael Cerne · Accepted Answer · 2019-02-27 00:51:04Z

0

It looks like you need to add data to the array. JavaScript does not recognize data[i]{} as a way to do so. You can use the data.push() function instead:

var data = [];
$("table tbody tr").each(function () {
    var textval = $(this).find("td").find("input[type=text][name=ParentTitle]").val();
    var ddlval = $(this).find("td").find("select option:selected").val();

    data.push({
      "Title": textval,
      "PageNumber": ddlval
    })
})

Check out the documentation for the function, and read up a bit more on JavaScript's array syntax. These both have great examples to check out.

edited Feb 27, 2019 at 0:51

answered Feb 25, 2019 at 2:04

Michael Cerne

33 bronze badges

1 Comment

Michael Cerne Over a year ago

Also, always try to include your HTML as well. JS and HTML work together, and I wasn't able to truly test the function without it.

Collectives™ on Stack Overflow

Creating an Array in javascript

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related