JSONレスポンスの値がHTML要素のデータ値と一致するかどうか確認してください

Question

HTML要素の値と一致させるJSON応答をHTML要素に追加してください。

例： HTML私は私たちのサービスに標準のjQueryのAJAX呼び出しを行うと、.eachを（やって

{"result":[{"EventName":"EventOne","MaxCapacity": 0},{"EventName":"EventTwo","MaxCapacity": 0}]} 

<div class="product-item" data-mydatavalue="EventOne">Hello this is my div for Event One<span class="maxCapacityForEvent"></span></div> 

<div class="product-item" data-mydatavalue="EventTwo">Hello this is my div for Event Two<span class="maxCapacityForEvent"></span></div> 

JSON）、JSONの結果をループ。 次のように出力する私は何をしたいデータの値が一致していることEVENTNAME値と一致し、各HTML要素用で、MAXCAPACITY

マイjQueryのである：ここでは

$.ajax({ 
      url: "http://myservice.com/mycall", 
      type: "GET", 
      cache: false, 
      dataType: "json", 
      success: function (data) { 
       $.each(data, function (i, eventTypes) { 
        $.each(eventTypes, function(x, eventType) { 
//NEED TO GET THE EVENT NAME FROM SERVICE TO MATCH THIS HTML ELEMENT - HOW DO I DO THIS? 
         if (eventType.EventName == $('.product-item').data("mydatavalue")){ 
          $('.product-item').data("mydatavalue").find('.maxCapacityForEvent').text(eventType.Available); 
         } 
        }); 
       }); 
      }, 
      error: function(xhr, error, data) { 
       console.log(xhr, error, data); 
       alert("An error occurred getting the Event Types"); 


      } 
     }); 

は私のJSBinリンクは JSBINです

---

受け入れ答え

しかし、要素にデータ値があるのか​​どうかを知る必要がありますが、JSON応答には存在しません。しかし、私はすべてか何かを得ています。

私の現在のJS

$.ajax({ 
      url: url, 
      type: "GET", 
      cache: false, 
      dataType: "json", 
      }, 
      success: function (data) { 
       $.each(data.result, function (i, eventTypes) { 
      $('.product-item').each(function() { 
          if ($(this).attr('data-mydatavalue') == eventTypes.EventName) { 
            $(this).find('.maxCapacityForEvent').html(eventTypes.Available); 
          } else{ 
//This is giving filling in all elements with No Available if one of the 
//.product-item elements don't have a data value.  
         $(this).find('.maxCapacityForEvent').html("Not Available"); 
          } 
         }); 
    }); 

Answer 1

ここで働いフィドルhttps://jsfiddle.net/hse40g1a/1/

Answer 2

あなたはeventTypesを反復することなく、簡単にこれを行うことができます。

ここは例です。あなたはこの

$(document).ready(function() { 


    $.ajax({ 
         url: "service.php", 
         data: data, 
         type: "POST", 
         success: function (response) 
         { 
          $.each(response.result, function (index, event) { 
           console.log(event.MaxCapacity) 
           $(".product-item[data-mydatavalue='" + event.EventName + "']").find('.maxCapacityForEvent').text(event.MaxCapacity); 
          }); 

         $(".maxCapacityForEvent").each(function() { 
          if ($(this).html() === '') 
          { 
           $(this).html("Not Available"); 
          } 
         }); 

        } 
       }); 
      }); 

ようにそれを行う必要があり

function doIterateJSON() { 
 
    var json = '[{"EventName":"EventOne","MaxCapacity": 0},{"EventName":"EventTwo","MaxCapacity": 0}]'; 
 
    $.each($.parseJSON(json), function(key, value) { 
 
    $('.product-item').each(function() { 
 
     if ($(this).attr('data-mydatavalue') == value.EventName) { 
 
     $(this).find('.maxCapacityForEvent').html(value.MaxCapacity); 
 
     } 
 
    }); 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<button onclick="javascript:doIterateJSON();"> 
 
    YEAH DO IT! 
 
</button> 
 

 
<div class="product-item" data-mydatavalue="EventOne">Hello this is my div for Event One<span class="maxCapacityForEvent"></span> 
 
</div> 
 

 
<div class="product-item" data-mydatavalue="EventTwo">Hello this is my div for Event Two<span class="maxCapacityForEvent"></span> 
 
</div>