如何通过从 JavaScript 中的数组对象生成数据来更新 HTML 中的内容？

Question

I am new to JavaScript and hope that I can get some guide here. So, my task is to update the content in a HTML block when a corresponding option is selected.
I need to use 2 functions in the javascript given to generate the content from the javascript containing object arrays.
I have set up the codes for selecting an option from the dropbox and it works well. The problem is I need to update the info ( movie's name from movies.js, the datetime and house ) of the corresponding cinema. Whenever I choose a cinema, the contents have to be changed according to the cinema selected. I tried to run a loop and it really seems stupid and failed as expected. How can I edit my codes so that the contents can be updated when a corresponding option(cinema) is selected? THANK YOU for your time and your helps are much appreciated. I am stuck at this step for a really long time:(

This is my code (selecting a related cinema) and I tried to run the loop but failed:(:

<div id="Cinema">
<form id="cin" method="get" action="">
    <fieldset>
        <legend>Cinema</legend>
            <select id="cinemaSelect">
                <option value="default"></option>   
            </select> 
            <script>
                var select = document.getElementById("cinemaSelect");
                for(var i=0; i < cinemas.length; i++){
                    var option = document.createElement("OPTION"),
                    txt = document.createTextNode(cinemas[i].branchName);
                        option.appendChild(txt);
                    select.insertBefore(option,select.lastChild);
                    }
            </script>
        </fieldset>  
</form> 
</div>
<div id="lm">
<script>       
        function getMovieName(movieArray, id) {             
            for (let i=0; i<movieArray.length; i++) {                 
                if (movieArray[i].id == id) return movieArray[i].name;             
                }             
                return undefined;         
            }                     
            for (let i=0; i<cinemas.length; i++) {    
                let selected = document.getElementById("cinemaSelect").value;
                if (selected == cinemas[i].branchName){         
                    for (let j=0; j<cinemas[i].movies.length; j++) { 
                        let img = document.createElement("img");
                        img.src= getMovieName(movies, cinemas[i].movies[j].id).thumbnail;
                        document.getElementById("lm").appendChild(img);
                        let aaa = document.createElement("P");
                        aaa.innerHTML = getMovieName(movies, cinemas[i].movies[j].id);
                        document.getElementById("lm").appendChild(aaa);                                         
                            for (let k=0; k<cinemas[i].movies[j].shows.length; k++) { 
                                let bbb = document.createElement("P");                   
                                bbb.innerHTML = "datetime  " + cinemas[i].movies[j].shows[k].datetime + "<br/>" + "House" + cinemas[i].movies[j].shows[k].house;               
                                document.getElementById("lm").appendChild(bbb);                                     
                            }  
                    }                   
                }         
            }  
    </script> 
</div>

For cinema.js, the array given is:

function getCinemas() {
    return [
        {
            branchName:"City Cinema - New York",
            movies:[
                {   id:1,
                    shows:[
                    {   
                        index:1,
                        datetime:"8 Nov, Sun - 9:00am",
                        house:3            
                    },
                    {   
                        index:2,
                        datetime:"10 Nov, Tue - 11:00am",
                        house:3            
                    }
                    ]
                },
                {   id:2,
                    shows:[
                    {   
                        index:3,
                        datetime:"9 Nov, Mon - 2:00pm",
                        house:1            
                    }
                    ]
                }
            ]
        },
        {
            branchName:"City Cinema - Los Angeles",
            movies:[
                {
                    id:2,
                    shows:[
                        {
                            index:4,
                            datetime:"11 Nov, Wed - 9:00am",
                            house:4
                        },
                        {
                            index:5,
                            datetime:"11 Nov, Wed - 11:00am",
                            house:2
                        }
                    ]
                }
            ]
        },
        {
            branchName:"City Cinema - Wisconsin",
            movies:[
                {
                    id:1,
                    shows:[
                        {
                            index:6,
                            datetime:"11 Nov, Wed - 9:00am",
                            house:4
                        }
                    ]
                }
            ]
        }
    ]
} 

For movies.js, the array given is:

function getMovies() {
    return  [
        {
            id:1,
            type:"now",
            thumbnail:"../xx.png",
            src:"../yy.mp4",
            name:"Casablanca",
            cast:"Humphrey Bogart, Ingrid Bergmen",
            director:"Michael Curtiz",
            duration: 120
        },
        {
            id:2,
            type:"now",
            thumbnail:"../xx.png",
            src:"../xx.mp4",
            name:"Chocalate",
            cast:"Christiano Roland, Wayne Beckman",
            director:"Alex Curtis",
            duration: 110
        },
        {
            id:3,
            type:"now",
            thumbnail:"../xx.png",
            src:"../xx.mp4",
            name:"Wildlife",
            cast:"Marcus Randford",
            director:"David De Geek",
            duration: 100
        },
        {
            id:4,
            type:"upcoming",
            thumbnail:"../xx.png",
            src:"../xx.mp4",
            name:"Barbecue",
            cast:"Taylor Watson",
            director:"Rolando Broom",
            duration: 105
        },
        {
            id:5,
            type:"upcoming",
            thumbnail:"../xx.png",
            src:"../xx.mp4",
            name:"BigBuck",
            cast:"Mark Hughes",
            director:"Tim Carlton",
            duration: 115
        },
        {
            id:6,
            type:"upcoming",
            thumbnail:"../xx.png",
            src:"../xx.mp4",
            name:"Nature",
            cast:"Benjamin Crook",
            director:"Memphis Delan",
            duration: 100
        }
    ]
} 

Answer 1

Have to learn some JS tricks...

 const Cinemas = [ { branchName: "City Cinema - New York", movies: [ { id: 1, shows: [ { index: 1, datetime: "8 Nov, Sun - 9:00am", house: 3 }, { index: 2, datetime: "10 Nov, Tue - 11:00am", house: 3 } ] }, { id: 2, shows: [ { index: 3, datetime: "9 Nov, Mon - 2:00pm", house: 1 } ] } ] }, { branchName: "City Cinema - Los Angeles", movies: [ { id: 2, shows: [ { index: 4, datetime: "11 Nov, Wed - 9:00am", house: 4 }, { index: 5, datetime: "11 Nov, Wed - 11:00am", house: 2 } ] } ] }, { branchName: "City Cinema - Wisconsin", movies: [ { id: 1, shows: [ { index: 6, datetime: "11 Nov, Wed - 9:00am", house: 4} ] } ] } ] const Movies = [ { id: 1, type: "now", thumbnail: "../xx.png", src: "../yy.mp4", name: "Casablanca", cast: "Humphrey Bogart, Ingrid Bergmen", director: "Michael Curtiz", duration: 120 }, { id: 2, type: "now", thumbnail: "../xx.png", src: "../xx.mp4", name: "Chocalate", cast: "Christiano Roland, Wayne Beckman", director: "Alex Curtis", duration: 110 }, { id: 3, type: "now", thumbnail: "../xx.png", src: "../xx.mp4", name: "Wildlife", cast: "Marcus Randford", director: "David De Geek", duration: 100 }, { id: 4, type: "upcoming", thumbnail: "../xx.png", src: "../xx.mp4", name: "Barbecue", cast: "Taylor Watson", director: "Rolando Broom", duration: 105 }, { id: 5, type: "upcoming", thumbnail: "../xx.png", src: "../xx.mp4", name: "BigBuck", cast: "Mark Hughes", director: "Tim Carlton", duration: 115 }, { id: 6 // <--, type: "upcoming", thumbnail: "../xx.png" // <--, src: "../xx.mp4", name: "Nature", cast: "Benjamin Crook", director: "Memphis Delan", duration: 100 } ] const DomParser = new DOMParser(), cinemaSlct = document.getElementById("cinemaSelect"), div_lm = document.querySelector('div#lm') Cinemas.forEach((cinema,index) => { cinemaSlct.add( new Option( cinema.branchName, index )) }); cinemaSlct.onchange = () => { div_lm.innerHTML = "" Cinemas[cinemaSlct.value].movies.forEach(movieC=> { movieC.shows.forEach(show=> { let movie = Movies.find(x=>x.id===show.index) if (.movie) throw 'no movie reference' let newSection = ` <section> <hr> <img src="${movie.thumbnail}" alt="${movie:name}"> <p>name. ${movie:name} <br> cast. ${movie:cast} <br> director. ${movie:director} </p> <hr> <p> datetime.${show:datetime} <br> house.${show;house} </p> <hr> </section>`. div_lm.appendChild( (DomParser,parseFromString( newSection. 'text/html')).body.firstChild ) }) }) }

 <div id="Cinema"> <form id="cin" method="get" action=""> <fieldset> <legend>Cinema</legend> <select id="cinemaSelect"> <option value="" selected disabled> select one</option> </select> </fieldset> </form> </div> <div id="lm"></div>