CODEWITHSUNDEEP
javascriptjqueryhtmljson
DSP
DSP

Reputation: 13

how to display the json values using jquery?

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!

Upvotes: 0

Views: 75

Answers (2)

WonderVanita
WonderVanita

Reputation: 26

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>

Upvotes: 0

sanatsathyan
sanatsathyan

Reputation: 1763

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.

Upvotes: 2

Related Questions