Check if the value from JSON response matches a data value on an HTML element
<p>Have a JSON response that I want to match to the value on an HTML element and add a simple string to the HTML element.</p>

<p>Example:
HTML</p>

<pre><code>&lt;div class="product-item" data-mydatavalue="EventOne"&gt;Hello this is my div for Event One&lt;span class="maxCapacityForEvent"&gt;&lt;/span&gt;&lt;/div&gt;

&lt;div class="product-item" data-mydatavalue="EventTwo"&gt;Hello this is my div for Event Two&lt;span class="maxCapacityForEvent"&gt;&lt;/span&gt;&lt;/div&gt;
</code></pre>

<p>JSON</p>

<pre><code> {"result":[{"EventName":"EventOne","MaxCapacity": 0},{"EventName":"EventTwo","MaxCapacity": 0}]}
</code></pre>

<p>I am doing an standard jQuery AJAX call to our service and doing a .each(), looping through the JSON results.
What I want to do is match the EventName value and for each HTML element that the data value matches, to output the MaxCapacity</p>

<p>My jQuery is as follows:</p>

<pre><code> $.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");


            }
        });
</code></pre>

<p>Here is my JSBin link
<a href="https://jsbin.com/labukovaqa/edit?html,js,output" rel="nofollow">JSBIN</a></p>

<hr>

<p><strong>Accepted answer</strong> </p>

<p>But I need to know how to see if the element has a datavalue but does not exist in the JSON response.  But I am getting an all or nothing.</p>

<p>My current JS</p>

<pre><code> $.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");
                           }
                        });
   });
</code></pre>