Loop through Struts iterator in JavaScript

Question

I have a list of items (from a backend db) that is dynamically populated using Struts iterator in a .jsp file. The file also has a JavaScript function to insert a new item into the database. But before I do the insert, I need to check that the item ID (which is a unique key) does not already exist. I've tried something like this:

item.jsp

<s:form name="ItemForm" id="ItemForm" action="Item.action">
    <table>
      <tbody>
        <s:iterator value="itemForm.allItems">
          <tr class="pointer" align="left">
            <td align="left"><s:property value="itemID" /></td>
            <td align="left"><s:property value="itemName" /></td>
          </tr>
        </s:iterator>
      </tbody>
    </table>

    <label>Item ID</label>
    <s:textfield name="itemForm.itemID" id="itemID"/>

    <label>Item Name</label>
    <s:textfield name="itemForm.itemName" id="itemName"/>

    <button type="button" id="insertBtn" onclick="insertItem()">Add New Item</button>
</s:form>

<script>
function insertItem() {
    // check if item already exist
    var inputID = document.getElementById("itemID").value;
    var allItems = $("#itemForm.allItems"); // doesn't work - allItems remain undefined
    for (var item in allItems) {
        if (item["itemID"] == inputID) {
            alert("Item ID already exist");
            return; // exit if already exist
        }
    }


// code to insert item

}
</script>

How do I use the struts iterator to loop through the list of items in JavaScript? If that's not possible, what would be the recommended way to do it at the JS level?

EDIT:

I have also tried the following as per a suggestion.

        var inputID = document.getElementById("itemID").value;

        // Get all itemIDs and look for a match
        var matchingElement = $("#itemForm\\.allItems tr td:first-child").filter(function() {
            return this.textContent.trim.value() = inputID; // returns an array of matching values
        });

        console.log("matchingElement length: " + matchingElement.length);

        if (matchingElement.length > 0) {
            alert("Item ID already exist");
            return; // exit if already exist
        }

This always returns an empty array (length=0) no matter what itemID I enter. I tried it without the .filter() and still got the same results, which leads me to believe that the problem is with obtaining the actual list (i.e the same problem I have originally), and not with the filter.

var matchingElement = $("#itemForm\\.allItems tr td:first-child");

Here is a sample of the generated html. Apologies if it's not too helpful. I've had to omit and mask a lot of this stuff as it pertains to my work.

            <table class="table table-striped jambo_table bulk_action" id="searchResults">
            <caption>Search Results</caption>
            <thead>
              <tr class="headings">
                <th align="left" class="column-title"><a class="sort" href="javascript:sortItem('itemID')">Item ID</th>
                <th align="left" class="column-title"><a class="sort" href="javascript:sortItem('itemName')">Item Name</th>
              </tr>
            </thead>
            <tbody>
                <tr class="pointer" align="left">
                  <td align="left">BT </td>
                  <td align="left">Item BT</td>
                </tr>   
                <tr class="pointer" align="left">
                  <td align="left">CLM</td>
                  <td align="left">Item CLM</td>
                </tr>   
                <tr class="pointer" align="left">
                  <td align="left">CR </td>
                  <td align="left">Item CR</td>
                </tr>   
                <tr class="pointer" align="left">
                  <td align="left">FA </td>
                  <td align="left">Item FA</td>
                </tr>   
                <tr class="pointer" align="left">
                  <td align="left">HN </td>
                  <td align="left">Item HN</td>
                </tr>   
                <tr class="pointer" align="left">
                  <td align="left">LA  </td>
                  <td align="left">Item LA</td>
                </tr>   
            </tbody>
            </table>

Answer 1

You may want to try this:

function insertItem() {
    // check if item already exist
    var inputID = document.getElementById("itemID").value;
    $("#searchResults tbody tr td:first-child").each( function( index){
    alert( $(this).text().trim() );
    if ( $(this).text().trim() == inputID) {
        alert("Item ID already exist");
        return; // exit if already exist
    }
    });
// code to insert item
}

Or you can access your allItems using :

var allItems = "<s:property value='itemForm.allItems'/>"