Question

我正在尝试在数组内的JSON中调用变量，我希望当人们搜索城市时，屏幕上会出现模态，模态出现，但值不会加载JSON的结构是

    "title": "",
    "start": "",
    "tags": "",
    "imageurl": "",
    "products": [
      {
        "name":"this is the value I want to call",
        "url": "",
        "time":"",
        "location":""
      }
    ]
   $("#search").change(function () {
       var selectedCity = $("#searchcity").val();
        $.getJSON('events.json', 
       function (data) {
       render(selectedCity, data);
        });
    });

    function render(selectedCity, data) {
        $(".order-details-table").empty();
        $(data).each(function (i, v) {                
            if (selectedCity == 'all' || v.products.name == selectedcity)  {
                if (v.products)
                    $(v.products).each(function (index, p) {
                        $(".order-details-table").append('<tr><td class="o-box-name"><a name="detailsevent">' + p.name + '</a></td><td class="o-box-name">' + v.title + '<br><small>' + p.time + '</small><small>&nbsp' + p.location + '</small></td><td><a href="' + p.url + '" class="cancel-del-text" target=_"blank">Register!</a></td></tr>');
                    });
            }                
        });
    }

html

 <p><span> Filter by City: </span><select id="searchcity" class="modal-trigger" name="searchcity" data-modal="modal-name">
<option selected="selected" value="select">Select a City</option>
<option value="chicago">Chicago</option>
<option value="denver">Denver</option>

<option value="all">All</option>
</select></p>

Answer 1

它在您身边出现错字错误。 selectedCity的类型错误为selectedcity，其searchcity更改功能而不是search

v.products.name == selectedcity

应该是

v.products.name == selectedCity

修改后的JS

jQuery(document).ready(function(){
       jQuery("#searchcity").change(function () {
       var selectedCity = $("#searchcity").val();
        jQuery.getJSON('events.json', 
       function (data) {
             render(selectedCity, data);
        });
    });


    });

     function render(selectedCity, data) {
        $(".order-details-table").empty();
        $(data).each(function (i, v) {                
            if (selectedCity == 'all' || v.products.name == selectedCity )  {
                if (v.products)
                    $(v.products).each(function (index, p) {
                        console.log(p);
                    $("#order-details-table").append('<tr><td class="o-box-name"><a name="detailsevent">' + p.name + '</a></td><td class="o-box-name">' + v.title + '<br><small>' + p.time + '</small><small>&nbsp' + p.location + '</small></td><td><a href="' + p.url + '" class="cancel-del-text" target=_"blank">Register!</a></td></tr>');
                });
        }                
    });
}

Answer 2

if (selectedCity == 'all' || v.products.name == selectedCity ) {行中有一个问题。

v.products是一个数组，因此请尝试使用selectedCity检查产品名称是否为v.products.name == selectedCity。

array.some是一个可能有用的功能。

some（）方法测试数组中的至少一个元素是否通过了由提供的函数实现的测试。

您的render函数的修复程序：

function render(selectedCity, data) {
    $(".order-details-table").empty();
    if(!v.products){
        return;
    }
    var fnFilterCity = function(product){
        return product.name == selectedCity;
    }
    $(data).each(function (i, v) {                
        if (selectedCity == 'all' || v.products.some(fnFilterCity)) {
            $(v.products).each(function (index, p) {
                $("#order-details-table").append('<tr><td class="o-box-name"><a name="detailsevent">' + p.name + '</a></td><td class="o-box-name">' + v.title + '<br><small>' + p.time + '</small><small>&nbsp' + p.location + '</small></td><td><a href="' + p.url + '" class="cancel-del-text" target=_"blank">Register!</a></td></tr>');
            }); 
        }
    });  
}

Answer 3

您可以参考下面的代码，这可能给您解决方案的提示。

var arr= {"title": "abc",
    "start": "",
    "tags": "",
    "imageurl": "",
    "products": [
      {
        "name":"this is the value I want to call",
        "url": "url1",
        "time":"00.00.00",
        "location":"xyz"
      }
    ]};
    
    var products=arr['products'];
     $("#searchcity").change(function () {
       var selectedCity = $("#searchcity").val();
        
       render(selectedCity, products)
    });
    function render(selectedCity, data) {    
        $(".order-details-table").empty();
        $(data).each(function (i, v) {      
              $(".order-details-table").append('<tr><td class="o-box-name"><a name="detailsevent">' + v.name + '</a></td><td class="o-box-name">' + arr['title'] + '<br><small>' + v.time + '</small><small>&nbsp' + v.location + '</small></td><td><a href="' + v.url + '" class="cancel-del-text" target=_"blank">Register!</a></td></tr>');
    });            
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

 <p><span> Filter by City: </span><select id="searchcity" class="modal-trigger" name="searchcity" data-modal="modal-name">
<option selected="selected" value="select">Select a City</option>
<option value="chicago">Chicago</option>
<option value="denver">Denver</option>

<option value="all">All</option>
</select></p>
<table border="1" class="order-details-table"></table>

在Jquery中的数组内循环和调用数组

3 个答案: