Check if the value from JSON response matches a data value on an HTML element

Question

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.

Example: HTML

<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

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

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

My jQuery is as follows:

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


            }
        });

Here is my JSBin link JSBIN

---

Accepted answer

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.

My current 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

You need to do it like this

$(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");
                            }
                         });

                    }
                });
            });

Here is the working fiddle https://jsfiddle.net/hse40g1a/1/

Answer 2

You can do this easily without having to iterate over the eventTypes.

Here is an example.

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>