JavaScriptによるループスルーイテレータ

Question

Strutsイテレータを.jspファイルに使用して動的に生成されるアイテムのリスト（バックエンドのデータベースから）があります。このファイルには、新しい項目をデータベースに挿入するJavaScript関数もあります。しかし、挿入する前に、アイテムID（一意のキー）が既に存在していないことを確認する必要があります。私はJavaScriptで項目のリストをループに支柱イテレータを使用するにはどうすればよい

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> 

：私はこのような何かを試してみましたか？それが不可能な場合は、JSレベルでそれを行うための推奨される方法は何ですか？

EDIT：

私はまた、提案ごとに以下のことを試してみました。

 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 
     } 

入力する項目IDに関係なく、常に空の配列（長さ= 0）を返します。私は.filter()なしで試しても、同じ結果を得ました。問題は実際のリスト（元々の問題と同じです）を取得することにあります。

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

ここには生成されたhtmlのサンプルがあります。あまりにも役に立たない場合はお詫び申し上げます。私はこれを私の仕事に関係するように省略してマスクしなければならなかった。

  <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

あなたはこの試してみたいことがあります。

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 
} 

または使用して、あなたのallItemsにアクセスすることができます

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