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 [mcve]. What is `mynumber` ? Where does `mynumber` come from? What, if any, console errors do you get? — Jon P, Feb 25 '19 at 01:01
Sorry,... var rows = document.getElementById(myTable).getElementsByTagName("myRow").length; — larry, Feb 25 '19 at 01:14
We still can't test this properly without your HTML. Please [edit](https://stackoverflow.com/posts/54858019/edit) your question to include enough code to replicate the issue. Also, check for console errors and fix or report those. — Jon P, Feb 25 '19 at 01:17

Michael Cerne · Answer 1 · 2019-02-27T00:51:04.520

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 '19 at 00:51

answered Feb 25 '19 at 02:04

Michael Cerne

3
3

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. – Michael Cerne Feb 25 '19 at 02:05

score 0 · Accepted Answer · answered Feb 25 '19 at 03:39

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>

Creating an Array in javascript

2 Answers2