Jquery 检查JSON响应中的值是否与HTML元素上的数据值匹配

有一个JSON响应，我想与HTML元素上的值匹配，并向HTML元素添加一个简单的字符串

例如： HTML

我正在对我们的服务执行一个标准的jQuery AJAX调用，并执行一个.each（），循环处理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链接

---

接受答案

但我需要知道如何查看元素是否具有datavalue，但在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");
                           }
                        });
   });

---

无需迭代

eventTypes

即可轻松完成此操作

这里有一个例子

函数doIterateJSON（）{
var json='[{“EventName”：“EventOne”，“MaxCapacity”：0}，{“EventName”：“EventTwo”，“MaxCapacity”：0}]；
$.each（$.parseJSON（json）、函数（键、值）{
$（'.product item'）。每个（函数（）{
if（$（this.attr（'data-mydatavalue'）==value.EventName）{
$（this.find（'.maxCapacityForEvent'）.html（value.MaxCapacity）；
}
});
});
}

是的，做吧！
你好，这是我在第一场比赛的节目
你好，这是我第二次活动的节目组

无需迭代

事件类型即可轻松完成此操作

这里有一个例子


函数doIterateJSON（）{
var json='[{“EventName”：“EventOne”，“MaxCapacity”：0}，{“EventName”：“EventTwo”，“MaxCapacity”：0}]；
$.each（$.parseJSON（json）、函数（键、值）{
$（'.product item'）。每个（函数（）{
if（$（this.attr（'data-mydatavalue'）==value.EventName）{
$（this.find（'.maxCapacityForEvent'）.html（value.MaxCapacity）；
}
});
});
}

是的，做吧！
你好，这是我在第一场比赛的节目
你好，这是我第二次活动的节目组
你需要这样做

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

                    }
                });
            });

这是工作小提琴
你需要这样做

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

                    }
                });
            });

这是工作小提琴
你能为它创建一个JS小提琴吗？如果（$（“.product item[data mydatavalue='”+eventType.EventName+“]]）{$（“.product item[data mydatavalue='”“+eventType.EventName+“]”）。text（eventType.Available）；}可以创建一个JS小提琴吗？如果（$（“.product item[data mydatavalue='”+eventType.EventName+']]）{$（“.product item[data mydatavalue='”“+eventType.EventName+']”）。text（eventType.Available）；}稍后，如果有人使用
data（'mydatavalue'，'new value'）
更改数据，
.attr（'data-mydatavalue'）
将无法识别更改。@Mikemcaughan我实际上不知道
data（）
。我想我应该在回答之前回答。或者你可以对我的答案做出贡献，我会非常感激：DUp投票支持我走上正轨。使用您的技术找到了我的解决方案。@Jay，我发布了一个关于使用IF语句的问题的更新，该语句表示页面的HTML中是否有元素，但JSON结果不包含值。在ELSE语句中，如果使用ELSE语句，页面上的所有元素都会得到一个“No Available”文本。有什么想法吗？@ClosDesign让我们稍后再讨论，如果有人使用
data（'mydatavalue'，'new value'）
更改数据，则
.attr（'data-mydatavalue'）
将无法识别更改。@Mikemcaughan我实际上不知道
data（）
。我想我应该在回答之前回答。或者你可以对我的答案做出贡献，我会非常感激：DUp投票支持我走上正轨。使用您的技术找到了我的解决方案。@Jay，我发布了一个关于使用IF语句的问题的更新，该语句表示页面的HTML中是否有元素，但JSON结果不包含值。在ELSE语句中，如果使用ELSE语句，页面上的所有元素都会得到一个“No Available”文本。有什么想法吗？@ClosDesign让我们在“我更喜欢这个答案”中讨论这个问题，使用与我相同的AJAX调用。针对不存在的值发布了一个附加问题，但HTML页面上的一个元素与响应中的任何值都不匹配。许多方法都可以这样做。可以在循环完成后检查空白范围，并将其text/html设置为notavailable。检查更新的fiddle我更喜欢这个答案，使用和我一样的AJAX调用。针对不存在的值发布了一个附加问题，但HTML页面上有一个元素与响应中的任何值都不匹配。许多方法都可以这样做。可以在循环完成后检查空白范围，并将其text/html设置为notavailable。检查更新的小提琴
$(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");
                            }
                         });

                    }
                });
            });