Looping and Calling arrays inside an array in Jquery

Question

I am trying to call a variable in JSON that is inside an array , I want that when people search a city a modal will appear in the screen, the modal appeared but the value wont load the structure of JSON is

    "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>

If it was your answer, Please mark it as answer :-)

Sudharshan Nair
– Sudharshan Nair

2018-09-28 12:57:16 +00:00
Commented Sep 28, 2018 at 12:57 — Sudharshan Nair
– Sudharshan Nair, Commented Sep 28, 2018 at 12:57

Sudharshan Nair · Accepted Answer · 2018-09-28 12:47:15Z

Its typo error from your side. selectedCity is mistyped as selectedcity and its searchcity change function instead of search

v.products.name == selectedcity

should be

v.products.name == selectedCity

modified 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>');
                });
        }                
    });
}

Denys Vega · Accepted Answer · 2018-09-28 13:08:42Z

There are an issue in the line if (selectedCity == 'all' || v.products.name == selectedCity ) {.

The v.products is an array, so try to check if any product name is selectedCity using v.products.name == selectedCity is incorrect.

A function who may help is the array.some.

The some() method tests whether at least one element in the array passes the test implemented by the provided function.

A fix for your render function:

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>');
            }); 
        }
    });  
}

Ketan_Hirapara · Accepted Answer · 2018-09-28 13:12:15Z

you can refer below code this may give you a hint towards your solution.

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>

Collectives™ on Stack Overflow

Looping and Calling arrays inside an array in Jquery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related