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>

Shantaram Tupe · Accepted Answer · 2016-12-09 12:49:45Z

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'/>"

answered Dec 9, 2016 at 12:49

Shantaram Tupe

1,6664 gold badges17 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sml485 Over a year ago

Thank you! I've tested both solutions. I couldn't quite get var allItems = "<s:property value='itemForm.allItems'/>" to work (it returns an array much larger than the size of my original list), but the first solution works perfectly.

Shantaram Tupe Over a year ago

at Java side convert allItems array to JSONArray, then access It in your javascript code as : var allItems = "<s:property value='itemForm.allItems'/>"

Collectives™ on Stack Overflow

Loop through Struts iterator in JavaScript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related