how to display the json values using jquery?

Question

Below is my code that shows movie data from the JSON variable, and displays it on the drop down list based on the selected city. I need to show the show timings along with other details from the JSON content.

The following is my code :

$(document).ready(function() {
    var cityData = [
        {
            cityName: 'Bengaluru',
            value: 'Bengaluru',
            data: [
                {
                    movieName: 'ABC',
                    theaterName: 'Tulsi Theatre',
                    showTImings:['8:00AM','12:00PM','4:00PM','9:00PM']
                },
                {
                    movieName: 'DEF',
                    theaterName: 'PVR',
                    showTImings:['8:00AM','12:00PM','4:00PM','9:00PM']
                },
                {
                    movieName: 'GHI',
                    theaterName: 'Srinivasa Theatre',
                    showTImings:['8:00AM','12:00PM','4:00PM','9:00PM']
                },
            ],
        },
        {
            cityName: 'Hyderabad',
            value: 'Hyderabad',
            data: [
                {
                    movieName: '123',
                    theaterName: 'Theatre1',
                    showTImings:['8:00AM','12:00PM','4:00PM','9:00PM']
                },
                {
                    movieName: '456',
                    theaterName: 'PVR2',
                    showTImings:['8:00AM','12:00PM','4:00PM','9:00PM']
                },
                {
                    movieName: '789',
                    theaterName: 'Theatre3',
                    showTImings:['8:00AM','12:00PM','4:00PM','9:00PM']
                },
            ],
        },

        {
            cityName: 'Guntur',
            value: 'Guntur',
            data: [
                {
                    movieName: 'ABC1',
                    theaterName: 'Theatre4',
                    showTImings:['8:00AM','12:00PM','4:00PM','9:00PM']
                },
                {
                    movieName: 'DEF2',
                    theaterName: 'PVR3',
                    showTImings:['8:00AM','12:00PM','4:00PM','9:00PM']
                },
                {
                    movieName: 'GHI3',
                    theaterName: 'Theatre5',
                    showTImings:['8:00AM','12:00PM','4:00PM','9:00PM']
                },
            ],
        },

        {
            cityName: 'Ongole',
            value: 'Ongole',
            data: [],
        },
    ];
    
    var locations = [] ;
    $('#selectCity').on('change', function() {
        if ($(this).val().indexOf('City') === -1) {locations = cityData.filter( c => c.cityName === $(this).val(),)[0].data;
            var locationString = '';
            var locationString2 = '';
            $.each(locations, function(i, item) {
                locationString +='<option value="' +item.theaterName +'">' +item.theaterName +'</option>';
                locationString2 +='<option value="' +item.movieName +'">' +item.movieName +'</option>';
            });
            $('#secondselectbox').html(locationString);
            $('#thirdselectbox').html(locationString2);
            $('span#selectedMovie').text($('#thirdselectbox').val());
            $('span#selectedTheater').text($('#secondselectbox').val());
        }
    });

    $('#secondselectbox').on('change', function() {
        var theater = $(this).val();
        for(var i in locations){
            if(locations[i].theaterName===theater){
                $('span#selectedTheater').text(theater);
                $('span#selectedMovie').text(locations[i].movieName);
                $('#thirdselectbox').val(locations[i].movieName);
            }
        }
    });

    $('#thirdselectbox').on('change', function() {
        var movie = $(this).val();
        for(var i in locations){
            if(locations[i].movieName===movie){
                $('span#selectedMovie').text(movie);
                $('span#selectedTheater').text(locations[i].theaterName);
                $('#secondselectbox').val(locations[i].theaterName);
            }
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="UserData">
            <h1><a href="moviebooking.html">MyMovie-Ticket-Booking</a></h1>
            <select class="selectCity" id="selectCity">
                <option value="">Select City</option>
                <option value="Bengaluru">Bengaluru</option>
                <option value="Hyderabad">Hyderabad</option>
                <option value="Guntur">Guntur</option>
                <option value="Ongole">Ongole</option>
            </select>
            <span id="welcome"> </span>
            <p id="demo" class="cityName"></p>
        </div>
         <div class="MoviesList" id="List">
            <label class="TitleName">Movie Name:</label>
            <select id="thirdselectbox" class="TheaterList">
                <!--<option value="" selected disabled hidden>Select Movie</option>-->
                 <option selected="selected"> Select Movie </option>
            </select>
            <label class="TitleName">Theater Name:</label>
            <select id="secondselectbox" class="MovieList">
                 <option selected="selected"> Select Theater </option>
            </select>
          <fieldset class="Container">
            <legend class="selection">Your Selection</legend>
            <div class="TmName">
                Theater: <span id="selectedTheater"></span>
                <div style="width: 30%;margin: 0 auto;">
                    <button class="btn1" id="movieTimeings"></button><button class="btn1" id="movieTimeings"></button><button class="btn1" id="movieTimeings"></button><button class="btn1" id="movieTimeings"></button>
                </div>

                Movie: <span id="selectedMovie"></span>
            </div>
         </fieldset>
        </div>

I want to display the show timings along with selected movie or theater and display them in the buttons.

How do i do it? Pls help!

Thanks!

sanatsathyan · Accepted Answer · 2018-02-05 05:38:25Z

Do you mean like this?

I've just edited your code snippet.

$(document).ready(function() {
    var cityData = [
        {
            cityName: 'Bengaluru',
            value: 'Bengaluru',
            data: [
                {
                    movieName: 'ABC',
                    theaterName: 'Tulsi Theatre',
                    showTImings:['8:00AM','12:00PM','4:00PM','9:00PM']
                },
                {
                    movieName: 'DEF',
                    theaterName: 'PVR',
                    showTImings:['8:00AM','12:00PM','4:00PM','9:00PM']
                },
                {
                    movieName: 'GHI',
                    theaterName: 'Srinivasa Theatre',
                    showTImings:['8:00AM','12:00PM','4:00PM','9:00PM']
                },
            ],
        },
        {
            cityName: 'Hyderabad',
            value: 'Hyderabad',
            data: [
                {
                    movieName: '123',
                    theaterName: 'Theatre1',
                    showTImings:['8:00AM','12:00PM','4:00PM','9:00PM']
                },
                {
                    movieName: '456',
                    theaterName: 'PVR2',
                    showTImings:['8:00AM','12:00PM','4:00PM','9:00PM']
                },
                {
                    movieName: '789',
                    theaterName: 'Theatre3',
                    showTImings:['8:00AM','12:00PM','4:00PM','9:00PM']
                },
            ],
        },

        {
            cityName: 'Guntur',
            value: 'Guntur',
            data: [
                {
                    movieName: 'ABC1',
                    theaterName: 'Theatre4',
                    showTImings:['8:00AM','12:00PM','4:00PM','9:00PM']
                },
                {
                    movieName: 'DEF2',
                    theaterName: 'PVR3',
                    showTImings:['8:00AM','12:00PM','4:00PM','9:00PM']
                },
                {
                    movieName: 'GHI3',
                    theaterName: 'Theatre5',
                    showTImings:['8:00AM','12:00PM','4:00PM','9:00PM']
                },
            ],
        },

        {
            cityName: 'Ongole',
            value: 'Ongole',
            data: [],
        },
    ];
    
    var locations = [] ;
    $('#selectCity').on('change', function() {
        if ($(this).val().indexOf('City') === -1) {
        locations = cityData.filter( c => c.cityName === $(this).val(),)[0].data;
            var locationString = '';
            var locationString2 = '';
            
            if(locations.length == 0){
              $('#showTimings').html('No shows available');
            }
            
            $.each(locations, function(i, item) {
                locationString +='<option value="' +item.theaterName +'">' +item.theaterName +'</option>';
                locationString2 +='<option value="' +item.movieName +'">' +item.movieName +'</option>';
                
                $('#showTimings').html('');
                $.each(locations[i].showTImings,function(i,v){
                  var button = $('<button />').html(v);
                  $('#showTimings').append(button);
                });
            });
            $('#secondselectbox').html(locationString);
            $('#thirdselectbox').html(locationString2);
            $('span#selectedMovie').text($('#thirdselectbox').val());
            $('span#selectedTheater').text($('#secondselectbox').val());
            
            
        }
    });

    $('#secondselectbox').on('change', function() {
        var theater = $(this).val();
        for(var i in locations){
            if(locations[i].theaterName===theater){
                $('span#selectedTheater').text(theater);
                $('span#selectedMovie').text(locations[i].movieName);
                $('#thirdselectbox').val(locations[i].movieName);
                
                $('#showTimings').html('');
                $.each(locations[i].showTImings,function(i,v){
                  var button = $('<button />').html(v);
                  $('#showTimings').append(button);
                });
            }
        }
        
        
    });

    $('#thirdselectbox').on('change', function() {
        var movie = $(this).val();
        for(var i in locations){
            if(locations[i].movieName===movie){
                $('span#selectedMovie').text(movie);
                $('span#selectedTheater').text(locations[i].theaterName);
                $('#secondselectbox').val(locations[i].theaterName);
                
                $('#showTimings').html('');
                $.each(locations[i].showTImings,function(i,v){
                  var button = $('<button />').html(v);
                  $('#showTimings').append(button);
                });
                
                
                
            }
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="UserData">
            <h1><a href="moviebooking.html">MyMovie-Ticket-Booking</a></h1>
            <select class="selectCity" id="selectCity">
                <option value="">Select City</option>
                <option value="Bengaluru">Bengaluru</option>
                <option value="Hyderabad">Hyderabad</option>
                <option value="Guntur">Guntur</option>
                <option value="Ongole">Ongole</option>
            </select>
            <span id="welcome"> </span>
            <p id="demo" class="cityName"></p>
        </div>
         <div class="MoviesList" id="List">
            <label class="TitleName">Movie Name:</label>
            <select id="thirdselectbox" class="TheaterList">
                <!--<option value="" selected disabled hidden>Select Movie</option>-->
                 <option selected="selected"> Select Movie </option>
            </select>
            <label class="TitleName">Theater Name:</label>
            <select id="secondselectbox" class="MovieList">
                 <option selected="selected"> Select Theater </option>
            </select>
          <fieldset class="Container">
            <legend class="selection">Your Selection</legend>
            <div class="TmName">
                Theater: <span id="selectedTheater"></span>
                <div id="showTimings" style="width: 30%;margin: 0 auto;">
                    <button class="btn1" id="movieTimeings"></button><button class="btn1" id="movieTimeings"></button><button class="btn1" id="movieTimeings"></button><button class="btn1" id="movieTimeings"></button>
                </div>

                Movie: <span id="selectedMovie"></span>
            </div>
         </fieldset>
        </div>

But can be made even simpler by not repeating the same code and moving it into functions and calling them.

i have one more doubt@sanatsathyan how to display the error message when selecting Ongole in select city option with out displaying any data?
i am trying that one but it shows data with error message but i want only error message
Is it possible to don't display movie name and theater name drop down and your selection session when selecting the Ongole in city delection@sanatsathyan
yes. just hide if there are no results, where i am showing that "no shows available" text and show when there are results.

WonderVanita · Accepted Answer · 2018-02-05 06:05:57Z

Here is the edited code

<div class="UserData">
    ...
  <fieldset class="Container">
    <legend class="selection">Your Selection</legend>
    <div class="TmName">
        Theater: <span id="selectedTheater"></span>
        <div style="width: 30%;margin: 0 auto;" class="movieTimings">
            <button class="btn1" id="movieTimeings"></button>
            <button class="btn1" id="movieTimeings"></button>
            <button class="btn1" id="movieTimeings"></button>
            <button class="btn1" id="movieTimeings"></button>
        </div>

        Movie: <span id="selectedMovie"></span>
    </div>
 </fieldset>
</div>

And the Edited script

<script type="text/javascript">
$(document).ready(function() {
    var cityData = [
        {
            cityName: 'Bengaluru',
            value: 'Bengaluru',
            data: [
                {
                    movieName: 'ABC',
                    theaterName: 'Tulsi Theatre',
                    showTImings:['8:00AM','12:00PM','4:00PM','9:00PM']
                },
                {
                    movieName: 'DEF',
                    theaterName: 'PVR',
                    showTImings:['8:00AM','12:00PM','4:00PM','9:00PM']
                },
                {
                    movieName: 'GHI',
                    theaterName: 'Srinivasa Theatre',
                    showTImings:['8:00AM','12:00PM','5:00PM','9:00PM']
                },
            ],
        },

        {
            cityName: 'Hyderabad',
            value: 'Hyderabad',
            data: [
                {
                    movieName: '123',
                    theaterName: 'Theatre1',
                    showTImings:['8:00AM','12:00PM','4:00PM','9:00PM']
                },
                {
                    movieName: '456',
                    theaterName: 'PVR2',
                    showTImings:['8:00AM','12:00PM','4:00PM','9:00PM']
                },
                {
                    movieName: '789',
                    theaterName: 'Theatre3',
                    showTImings:['8:00AM','12:00PM','4:00PM','9:00PM']
                },
            ],
        },

        {
            cityName: 'Guntur',
            value: 'Guntur',
            data: [
                {
                    movieName: 'ABC1',
                    theaterName: 'Theatre4',
                    showTImings:['8:00AM','12:00PM','4:00PM','9:00PM']
                },
                {
                    movieName: 'DEF2',
                    theaterName: 'PVR3',
                    showTImings:['8:00AM','12:00PM','4:00PM','9:00PM']
                },
                {
                    movieName: 'GHI3',
                    theaterName: 'Theatre5',
                    showTImings:['8:00AM','12:00PM','4:00PM','9:00PM']
                },
            ],
        },

        {
            cityName: 'Ongole',
            value: 'Ongole',
            data: [],
        },
    ];

    // make locations global to track it
    var locations = [] ;
    $('#selectCity').on('change', function() {
        if ($(this).val().indexOf('City') === -1) {
            locations = cityData.filter( c => c.cityName === $(this).val(),)[0].data;
            var locationString = '';
            var locationString2 = '';
            $.each(locations, function(i, item) {
                locationString +='<option value="' +item.theaterName +'">' +item.theaterName +'</option>';
                locationString2 +='<option value="' +item.movieName +'">' +item.movieName +'</option>';
            });
            $('#secondselectbox').html(locationString);
            $('#thirdselectbox').html(locationString2);
            //    here we change the values of the current movie and theater
            $('span#selectedMovie').text($('#thirdselectbox').val());
            $('span#selectedTheater').text($('#secondselectbox').val());
        }
    });

    $('#secondselectbox').on('change', function() {
        // here the theater change
        // get the selected value
        var theater = $(this).val();
        // here we need to go through every element in locations
        for(var i in locations){
            // checks if the current element
            // check if its theater equal current theater
            // chenage the values
            if(locations[i].theaterName===theater){
                // here we change the data
                $('span#selectedTheater').text(theater);
                $('span#selectedMovie').text(locations[i].movieName);
                $('#thirdselectbox').val(locations[i].movieName);
            }
        }
    });

    $('#thirdselectbox').on('change', function() {
        // here the movie change
        // get the selected value
        var movie = $(this).val();
        // here we need to go through every element in locations
        for(var i in locations){
            // checks if the current element
            // check if its movie equal current movie
            // chenage the values
            if(locations[i].movieName===movie){
                    // here we change the data
                $('span#selectedMovie').text(movie);
                $('span#selectedTheater').text(locations[i].theaterName);
                // also we need the change the selection value
                $('#secondselectbox').val(locations[i].theaterName);


                var timingArray = locations[i].showTImings;
                var timingHtmlText = '';
                $.each( timingArray , function(k,v) {
                    timingHtmlText +='<button class="btn'+k+'" id="movieTimeings'+k+'">'+v+'</button>';
                });
                $('.movieTimings').html(timingHtmlText);
            }
        }
    });
});
</script>

Collectives™ on Stack Overflow

how to display the json values using jquery?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related