如何通過從 JavaScript 中的數組對象生成數據來更新 HTML 中的內容？

Question

我是 JavaScript 的新手，希望我能在這里得到一些指導。 因此，我的任務是在選擇相應選項時更新 HTML 塊中的內容。
我需要在 javascript 中使用 2 個函數來從包含 object ZA3CBC3F9D0CE2F2C1554E1B6719Z 的 javascript 生成內容。
我已經設置了從保管箱中選擇選項的代碼，並且效果很好。 問題是我需要更新相應電影院的信息（movies.js 中的電影名稱、日期時間和房子）。 每當我選擇電影院時，必須根據所選電影院更改內容。 我試圖運行一個循環，它看起來真的很愚蠢並且如預期的那樣失敗了。 如何編輯我的代碼，以便在選擇相應的選項（電影）時更新內容？ 感謝您的寶貴時間，非常感謝您的幫助。 我在這一步卡了很長時間:(

這是我的代碼（選擇一個相關的電影院），我試圖運行循環但失敗了:(:

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

對於cinema.js，給出的數組是：

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
                        }
                    ]
                }
            ]
        }
    ]
} 

對於movies.js，給定的數組是：

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

必須學習一些JS技巧...

 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>