jqueryを使用してhtml Domのjson値を印刷するにはどうすればよいですか？

Question

jsonデータをhtml domで印刷する方法は？

以下

は

<div class="UserData"> 
      <h1><a href="moviebooking.html">MyMovie-Ticket-Booking</a></h1> 
      <select class="selectCity" id="selectCity"> 
       <option value="City">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> 
     </div> 

以下の私のhtmlです...私は映画のJSONを持っていると私は、タグを選択するために追加していますし、映画を選択するとき、私はアンカータグに映画の名を追加したいですあるselectタグで映画の名前を選択した後、劇場名や映画名を追加する方法

$(document).ready(function() { 
    var cityData = [{ 
     cityName: 'Bengaluru', 
     value: "Bengaluru", 
     data: [{ 
      movieName: 'ABC', 
      theaterName: 'Tulsi Theatre' 
     }, 
     { 
      movieName: 'DEF', 
      theaterName: 'PVR' 
     }, 
     { 
      movieName: 'GHI', 
      theaterName: 'Srinivasa Theatre' 
     } 
     ] 
    }, 


    { 
     cityName: 'Hyderabad', 
     value: "Hyderabad", 
     data: [{ 
      movieName: '123', 
      theaterName: 'Theatre1' 
     }, 
     { 
      movieName: '456', 
      theaterName: 'PVR2' 
     }, 
     { 
      movieName: '789', 
      theaterName: 'Theatre3' 
     } 
     ] 
    }, 

    { 
     cityName: 'Guntur', 
     value: "Guntur", 
     data: [{ 
      movieName: 'ABC1', 
      theaterName: 'Theatre4' 
     }, 
     { 
      movieName: 'DEF2', 
      theaterName: 'PVR3' 
     }, 
     { 
      movieName: 'GHI3', 
      theaterName: 'Theatre5' 
     } 
     ] 
    }, 

    { 
     cityName: 'Ongole', 
     value: "Ongole", 
     data: 'currently not available' 
    } 
    ]; 
    $("#selectCity").on('change', function() { 
    var locations = cityData.filter(c => c.cityName === $(this).val())[0].data; 
    var locationString = ''; 
    var locationString2 = ''; 
    console.log(locations) 
    $.each(locations, function(i, item) { 

     console.log(JSON.stringify(item)); 
     locationString += '<option value="' + item.theaterName + '">' + item.theaterName + '</option>'; 
     locationString2 += '<option value="' + item.movieName + '">' + item.movieName + '</option>'; 
    }); 
    $('#secondselectbox').html(locationString); 
    $('#thirdselectbox').html(locationString2); 
}); 

}); 

....

をJS

とどのように.....別途

Answer 1

を、映画や演劇をフィルタリングするためにあなたのHTML内の任意の#secondselectboxとselectと#thirdselectboxを持っていません。それでも、あなたはそれらにhtmlを入れようとしています。あなたのhtmlのidを2つ追加してselectとしてください。あなたが動けなくない

$(document).ready(function() { 
 
    var cityData = [{ 
 
     cityName: 'Bengaluru', 
 
     value: "Bengaluru", 
 
     data: [{ 
 
      movieName: 'ABC', 
 
      theaterName: 'Tulsi Theatre' 
 
     }, 
 
     { 
 
      movieName: 'DEF', 
 
      theaterName: 'PVR' 
 
     }, 
 
     { 
 
      movieName: 'GHI', 
 
      theaterName: 'Srinivasa Theatre' 
 
     } 
 
     ] 
 
    }, 
 

 

 
    { 
 
     cityName: 'Hyderabad', 
 
     value: "Hyderabad", 
 
     data: [{ 
 
      movieName: '123', 
 
      theaterName: 'Theatre1' 
 
     }, 
 
     { 
 
      movieName: '456', 
 
      theaterName: 'PVR2' 
 
     }, 
 
     { 
 
      movieName: '789', 
 
      theaterName: 'Theatre3' 
 
     } 
 
     ] 
 
    }, 
 

 
    { 
 
     cityName: 'Guntur', 
 
     value: "Guntur", 
 
     data: [{ 
 
      movieName: 'ABC1', 
 
      theaterName: 'Theatre4' 
 
     }, 
 
     { 
 
      movieName: 'DEF2', 
 
      theaterName: 'PVR3' 
 
     }, 
 
     { 
 
      movieName: 'GHI3', 
 
      theaterName: 'Theatre5' 
 
     } 
 
     ] 
 
    }, 
 

 
    { 
 
     cityName: 'Ongole', 
 
     value: "Ongole", 
 
     data: [] 
 
    } 
 
    ]; 
 
    $("#selectCity").on('change', function() { 
 
    var 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); 
 
}); 
 
    $("#thirdselectbox").on("change", function(){ 
 
    $("span#selectedMovie").text($(this).val()); 
 
    }); 
 
    $("#secondselectbox").on("change", function(){ 
 
    $("span#selectedTheater").text($(this).val()); 
 
    }); 
 

 
    $('#theaterButton').click(function(){ 
 
    var arrTheater = []; 
 
    cityData.forEach(function(theater, i){ 
 
     var allTheaters = theater.data.map(t => t.theaterName); 
 
     arrTheater = arrTheater.concat(allTheaters); 
 
    }); 
 
    $('#container').html('<b>Theaters: </b><br/>' + arrTheater.join(', ')); 
 
    }); 
 
    
 
    $('#movieButton').click(function(){ 
 
    var arrMovie = []; 
 
    cityData.forEach(function(movie, i){ 
 
     var allMovies = movie.data.map(m => m.movieName); 
 
     arrMovie = arrMovie.concat(allMovies); 
 
    }); 
 
    $('#container').html('<b>Movies: </b><br/>'+ arrMovie.join(', ')) 
 
    }); 
 
    
 
    
 
});

<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="City">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> 
 
    <select class="selectTheater" id="secondselectbox"> 
 
    </select> 
 
    <select class="selectMovie" id="thirdselectbox"> 
 
    </select> 
 
</div> 
 
<fieldset style="margin-top:20px;"> 
 
    <legend>Your Selection</legend> 
 
    <div>Theater: <span id="selectedTheater"></span></div> 
 
    <div>Movie: <span id="selectedMovie"></span></div> 
 
</fieldset> 
 
<div style="margin-top:20px;"> 
 
    <input type="button" id="theaterButton" value="Get Theater"/> 
 
    <input type="button" id="movieButton" value="Get Movie"/> 
 
    <div id="container"></div> 
 
</div>