如何从XML检索图像并将其附加到我的网页？

时间：2019-04-12 19:23:59

标签： javascript jquery html json xml

您好，我正在做我的一个学校项目，而我在Javascript上还是一个新手，所以我需要帮助来解决我一直困扰的问题之一。我正在制作一个网页，显示当天在剧院上映的电影。我想像从XML数据中获得影片的标题和等级一样，将图像追加并显示到我的网页上。我怎么做？仅供参考，从XML可以看出，我需要的图像URL来自EventSmallImagePortrait>标记。希望您能为我提供帮助。提前致谢。

此代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>MovieInfo</title>
        <link rel="stylesheet" href="todostyle.css" />
        <link
            rel="stylesheet"
            href="https://bootswatch.com/4/darkly/bootstrap.min.css"
        />
    </head>
    <body>
        <h1><strong>List of FinnKino Cinemas in Finland</strong></h1>
        <br /><br />
        <table id="demo"></table>

        <div id="container">
            <ul class="list-group">
                <li class="list-group-item">
                    <button type="Buttn" onclick="loadXMLDoc()">
                        Espoo: OMENA
                    </button>
                </li>
                <li class="list-group-item">
                    <button type="Buttn" onclick="loadXMLSello()">
                        Finnkino SELLO
                    </button>
                </li>
                <li class="list-group-item">
                    <button type="Buttn" onclick="loadXMLItis()">
                        Finnkino ITIS
                    </button>
                </li>
                <li class="list-group-item">
                    <button type="Buttn" onclick="loadXMLKinopalatsi()">
                        KINOPALATSI
                    </button>
                </li>
                <li class="list-group-item">
                    <button type="Buttn" onclick="loadXMLMaxim()">MAXIM</button>
                </li>
                <li class="list-group-item">
                    <button type="Buttn" onclick="loadXMLTennispalatsi()">
                        TENISPALATSI
                    </button>
                </li>
                <li class="list-group-item">
                    <button type="Buttn" onclick="loadXMLFlamingo()">
                        FLAMINGO
                    </button>
                </li>
                <li class="list-group-item">
                    <button type="Buttn" onclick="loadXMLFantasia()">
                        FANTASIA
                    </button>
                </li>
                <li class="list-group-item">
                    <button type="Buttn" onclick="loadXMLScala()">SCALA</button>
                </li>
                <li class="list-group-item">
                    <button type="Buttn" onclick="loadXMLKuvapalatsi()">
                        KUVAPALATSI
                    </button>
                </li>
                <li class="list-group-item">
                    <button type="Buttn" onclick="loadXMLStrand()">
                        STRAND
                    </button>
                </li>
                <li class="list-group-item">
                    <button type="Buttn" onclick="loadXMLPlaza()">PLAZA</button>
                </li>
                <li class="list-group-item">
                    <button type="Buttn" onclick="loadXMLPromenadi()">
                        PROMENADI
                    </button>
                </li>
                <li class="list-group-item">
                    <button type="Buttn" onclick="loadXMLAtlas()">ATLAS</button>
                </li>
                <li class="list-group-item">
                    <button type="Buttn" onclick="loadXMLPlevna()">
                        PLEVNA
                    </button>
                </li>
                <li class="list-group-item">
                    <button type="Buttn" onclick="loadXMLTurkkinopalatsi()">
                        Turku KINOPALATSI
                    </button>
                </li>
            </ul>
        </div>

        <script>
            function loadXMLDoc() {
                var xmlhttp = new XMLHttpRequest();
                xmlhttp.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) {
                        myFunction(this);
                    }
                };

                xmlhttp.open('GET', 'http://www.finnkino.fi/xml/Schedule/', true);
                xmlhttp.send();
            }

            function loadXMLSello() {
                var xmlhttp = new XMLHttpRequest();
                xmlhttp.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) {
                        myFunction(this);
                    }
                };

                xmlhttp.open(
                    'GET',
                    'https://www.finnkino.fi/xml/Schedule/?area=1038',
                    true
                );
                xmlhttp.send();
            }

            function loadXMLItis() {
                var xmlhttp = new XMLHttpRequest();
                xmlhttp.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) {
                        myFunction(this);
                    }
                };

                xmlhttp.open(
                    'GET',
                    'https://www.finnkino.fi/xml/Schedule/?area=1045',
                    true
                );
                xmlhttp.send();
            }

            function loadXMLKinopalatsi() {
                var xmlhttp = new XMLHttpRequest();
                xmlhttp.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) {
                        myFunction(this);
                    }
                };

                xmlhttp.open(
                    'GET',
                    'https://www.finnkino.fi/xml/Schedule/?area=1031',
                    true
                );
                xmlhttp.send();
            }

            function loadXMLMaxim() {
                var xmlhttp = new XMLHttpRequest();
                xmlhttp.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) {
                        myFunction(this);
                    }
                };

                xmlhttp.open(
                    'GET',
                    'https://www.finnkino.fi/xml/Schedule/?area=1032',
                    true
                );
                xmlhttp.send();
            }

            function loadXMLTennispalatsi() {
                var xmlhttp = new XMLHttpRequest();
                xmlhttp.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) {
                        myFunction(this);
                    }
                };

                xmlhttp.open(
                    'GET',
                    'https://www.finnkino.fi/xml/Schedule/?area=1033',
                    true
                );
                xmlhttp.send();
            }

            function myFunction(xml) {
                var i;
                var xmlDoc = xml.responseXML;
                var table =
                    '<tr><th><h3>Genre</h3></th><th><h3>Title</h3></th><th><h3>Rating</h3></th></tr>';
                var x = xmlDoc.getElementsByTagName('Show');
                for (i = 0; i < x.length; i++) {
                    table +=
                        '<tr><td>' +
                        x[i].getElementsByTagName('Genres')[0].childNodes[0].nodeValue +
                        '</td><td>' +
                        x[i].getElementsByTagName('Title')[0].childNodes[0].nodeValue +
                        '</td><td>' +
                        x[i].getElementsByTagName('Rating')[0].childNodes[0].nodeValue +
                        '</td></tr>';
                }
                document.getElementById('demo').innerHTML = table;
            }
        </script>
    </body>
</html>

这是一些XML数据，仅供您参考：

<Schedule xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<PubDate>2019-04-12T00:00:00+03:00</PubDate>
<Shows>
    <Show>
        <ID>1324160</ID>
        <dtAccounting>2019-04-12T00:00:00</dtAccounting>
        <dttmShowStart>2019-04-12T10:30:00</dttmShowStart>
        <dttmShowStartUTC>2019-04-12T07:30:00Z</dttmShowStartUTC>
        <dttmShowEnd>2019-04-12T12:22:00</dttmShowEnd>
        <dttmShowEndUTC>2019-04-12T09:22:00Z</dttmShowEndUTC>
        <ShowSalesStartTime>2000-01-01T00:00:00</ShowSalesStartTime>
        <ShowSalesStartTimeUTC>2000-01-01T00:00:00Z</ShowSalesStartTimeUTC>
        <ShowSalesEndTime>2019-04-12T10:15:00</ShowSalesEndTime>
        <ShowSalesEndTimeUTC>2019-04-12T07:15:00Z</ShowSalesEndTimeUTC>
        <ShowReservationStartTime>2000-01-01T00:00:00</ShowReservationStartTime>
        <ShowReservationStartTimeUTC>2000-01-01T00:00:00Z</ShowReservationStartTimeUTC>
        <ShowReservationEndTime>2019-04-12T09:00:00</ShowReservationEndTime>
        <ShowReservationEndTimeUTC>2019-04-12T06:00:00Z</ShowReservationEndTimeUTC>
        <EventID>302748</EventID>
        <Title>Hölmö nuori sydän</Title>
        <OriginalTitle>Hölmö nuori sydän</OriginalTitle>
        <ProductionYear>2018</ProductionYear>
        <LengthInMinutes>102</LengthInMinutes>
        <dtLocalRelease>2018-10-12T00:00:00</dtLocalRelease>
        <Rating>12</Rating>
        <RatingLabel>12</RatingLabel>
        <RatingImageUrl>https://media.finnkino.fi/images/rating_large_12.png</RatingImageUrl>
        <EventType>Movie</EventType>
        <Genres>Draama, Kotimainen</Genres>
        <TheatreID>1038</TheatreID>
        <TheatreAuditriumID>1270</TheatreAuditriumID>
        <Theatre>Tennispalatsi, Helsinki</Theatre>
        <TheatreAuditorium>sali 11</TheatreAuditorium>
        <TheatreAndAuditorium>Tennispalatsi, Helsinki, sali 11</TheatreAndAuditorium>
        <PresentationMethodAndLanguage>2D, suomi</PresentationMethodAndLanguage>
        <PresentationMethod>2D</PresentationMethod>
        <EventSeries/>
        <ShowURL>http://www.finnkino.fi/websales/show/1324160/</ShowURL>
        <EventURL>http://www.finnkino.fi/event/302748/title/h%C3%B6lm%C3%B6_nuori_syd%C3%A4n/</EventURL>
        <SpokenLanguage>
        <Name>suomi</Name>
        <NameInLanguage/>
        <ISOTwoLetterCode>FI</ISOTwoLetterCode>
        </SpokenLanguage>
        <SubtitleLanguage1>
        <Name>ruotsi</Name>
        <NameInLanguage/>
        <ISOTwoLetterCode>SV</ISOTwoLetterCode>
        </SubtitleLanguage1>
        <Images>
            <EventSmallImagePortrait>http://media.finnkino.fi/1012/Event_12096/portrait_small/HolmoNuoriSydan_1080.jpg</EventSmallImagePortrait>
            <EventMediumImagePortrait>http://media.finnkino.fi/1012/Event_12096/portrait_medium/HolmoNuoriSydan_1080.jpg</EventMediumImagePortrait>
            <EventLargeImagePortrait>http://media.finnkino.fi/1012/Event_12096/portrait_small/HolmoNuoriSydan_1080.jpg</EventLargeImagePortrait>
            <EventSmallImageLandscape>http://media.finnkino.fi/1012/Event_12096/landscape_small/HolmoNuoriSydan_444v.jpg</EventSmallImageLandscape>
            <EventLargeImageLandscape>http://media.finnkino.fi/1012/Event_12096/landscape_large/HolmoNuoriSydan_670v.jpg</EventLargeImageLandscape>
        </Images>
        <ContentDescriptors>
            <ContentDescriptor>
                <Name>Violence</Name>
                <ImageURL>https://media.finnkino.fi/images/content_Violence.png</ImageURL>
            </ContentDescriptor>
            <ContentDescriptor>
                <Name>SexualContent</Name>
                <ImageURL>https://media.finnkino.fi/images/content_SexualContent.png</ImageURL>
            </ContentDescriptor>
        </ContentDescriptors>
    </Show>
    <Show>
        <ID>1324165</ID>
        <dtAccounting>2019-04-12T00:00:00</dtAccounting>
        <dttmShowStart>2019-04-12T10:30:00</dttmShowStart>
        <dttmShowStartUTC>2019-04-12T07:30:00Z</dttmShowStartUTC>
        <dttmShowEnd>2019-04-12T12:28:00</dttmShowEnd>
        <dttmShowEndUTC>2019-04-12T09:28:00Z</dttmShowEndUTC>
        <ShowSalesStartTime>2000-01-01T00:00:00</ShowSalesStartTime>
        <ShowSalesStartTimeUTC>2000-01-01T00:00:00Z</ShowSalesStartTimeUTC>
        <ShowSalesEndTime>2019-04-12T10:15:00</ShowSalesEndTime>
        <ShowSalesEndTimeUTC>2019-04-12T07:15:00Z</ShowSalesEndTimeUTC>
        <ShowReservationStartTime>2000-01-01T00:00:00</ShowReservationStartTime>
        <ShowReservationStartTimeUTC>2000-01-01T00:00:00Z</ShowReservationStartTimeUTC>
        <ShowReservationEndTime>2019-04-12T09:00:00</ShowReservationEndTime>
        <ShowReservationEndTimeUTC>2019-04-12T06:00:00Z</ShowReservationEndTimeUTC>
        <EventID>302750</EventID>
        <Title>Oma maa</Title>
        <OriginalTitle>Oma maa</OriginalTitle>
        <ProductionYear>2018</ProductionYear>
        <LengthInMinutes>108</LengthInMinutes>
        <dtLocalRelease>2018-10-26T00:00:00</dtLocalRelease>
        <Rating>7</Rating>
        <RatingLabel>7</RatingLabel>
        <RatingImageUrl>https://media.finnkino.fi/images/rating_large_7.png</RatingImageUrl>
        <EventType>Movie</EventType>
        <Genres>Draama, Kotimainen</Genres>
        <TheatreID>1038</TheatreID>
        <TheatreAuditriumID>1267</TheatreAuditriumID>
        <Theatre>Tennispalatsi, Helsinki</Theatre>
        <TheatreAuditorium>sali 9</TheatreAuditorium>
        <TheatreAndAuditorium>Tennispalatsi, Helsinki, sali 9</TheatreAndAuditorium>
        <PresentationMethodAndLanguage>2D, suomi</PresentationMethodAndLanguage>
        <PresentationMethod>2D</PresentationMethod>
        <EventSeries/>
        <ShowURL>http://www.finnkino.fi/websales/show/1324165/</ShowURL>
        <EventURL>http://www.finnkino.fi/event/302750/title/oma_maa/</EventURL>
        <SpokenLanguage>
            <Name>suomi</Name>
            <NameInLanguage/>
            <ISOTwoLetterCode>FI</ISOTwoLetterCode>
        </SpokenLanguage>
        <SubtitleLanguage1>
            <Name>ruotsi</Name>
            <NameInLanguage/>
            <ISOTwoLetterCode>SV</ISOTwoLetterCode>
        </SubtitleLanguage1>
        <Images>
            <EventSmallImagePortrait>http://media.finnkino.fi/1012/Event_12098/portrait_small/OmaMaa_1080.jpg</EventSmallImagePortrait>
            <EventMediumImagePortrait>http://media.finnkino.fi/1012/Event_12098/portrait_medium/OmaMaa_1080.jpg</EventMediumImagePortrait>
            <EventLargeImagePortrait>http://media.finnkino.fi/1012/Event_12098/portrait_small/OmaMaa_1080.jpg</EventLargeImagePortrait>
            <EventSmallImageLandscape>http://media.finnkino.fi/1012/Event_12098/landscape_small/OmaMaa_444_kke.jpg</EventSmallImageLandscape>
            <EventLargeImageLandscape>http://media.finnkino.fi/1012/Event_12098/landscape_large/OmaMaa_670_kke.jpg</EventLargeImageLandscape>
        </Images>
        <ContentDescriptors>
            <ContentDescriptor>
                <Name>Violence</Name>
                <ImageURL>https://media.finnkino.fi/images/content_Violence.png</ImageURL>
            </ContentDescriptor>
            <ContentDescriptor>
                <Name>Disturbing</Name>
                <ImageURL>https://media.finnkino.fi/images/content_Disturbing.png</ImageURL>
            </ContentDescriptor>
        </ContentDescriptors>
    </Show>
</Shows>

2 个答案:

答案 0 :(得分：1)

您可以获取包含在标签EventMediumImagePortrait中的图像的url，例如，由于图像有多个尺寸，我认为这是适合这种情况的尺寸，请参阅这个例子

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>MovieInfo</title>
        <link rel="stylesheet" href="todostyle.css" />
        <link
            rel="stylesheet"
            href="https://bootswatch.com/4/darkly/bootstrap.min.css"
        />
    </head>
    <body>
        <h1><strong>List of FinnKino Cinemas in Finland</strong></h1>
        <br /><br />
        <table id="demo"></table>

        <div id="container">
            <ul class="list-group">
                <li class="list-group-item">
                    <button type="Buttn" onclick="loadXMLDoc()">
                        Espoo: OMENA
                    </button>
                </li>
                <li class="list-group-item">
                    <button type="Buttn" onclick="loadXMLSello()">
                        Finnkino SELLO
                    </button>
                </li>
                <li class="list-group-item">
                    <button type="Buttn" onclick="loadXMLItis()">
                        Finnkino ITIS
                    </button>
                </li>
                <li class="list-group-item">
                    <button type="Buttn" onclick="loadXMLKinopalatsi()">
                        KINOPALATSI
                    </button>
                </li>
                <li class="list-group-item">
                    <button type="Buttn" onclick="loadXMLMaxim()">MAXIM</button>
                </li>
                <li class="list-group-item">
                    <button type="Buttn" onclick="loadXMLTennispalatsi()">
                        TENISPALATSI
                    </button>
                </li>
                <li class="list-group-item">
                    <button type="Buttn" onclick="loadXMLFlamingo()">
                        FLAMINGO
                    </button>
                </li>
                <li class="list-group-item">
                    <button type="Buttn" onclick="loadXMLFantasia()">
                        FANTASIA
                    </button>
                </li>
                <li class="list-group-item">
                    <button type="Buttn" onclick="loadXMLScala()">SCALA</button>
                </li>
                <li class="list-group-item">
                    <button type="Buttn" onclick="loadXMLKuvapalatsi()">
                        KUVAPALATSI
                    </button>
                </li>
                <li class="list-group-item">
                    <button type="Buttn" onclick="loadXMLStrand()">
                        STRAND
                    </button>
                </li>
                <li class="list-group-item">
                    <button type="Buttn" onclick="loadXMLPlaza()">PLAZA</button>
                </li>
                <li class="list-group-item">
                    <button type="Buttn" onclick="loadXMLPromenadi()">
                        PROMENADI
                    </button>
                </li>
                <li class="list-group-item">
                    <button type="Buttn" onclick="loadXMLAtlas()">ATLAS</button>
                </li>
                <li class="list-group-item">
                    <button type="Buttn" onclick="loadXMLPlevna()">
                        PLEVNA
                    </button>
                </li>
                <li class="list-group-item">
                    <button type="Buttn" onclick="loadXMLTurkkinopalatsi()">
                        Turku KINOPALATSI
                    </button>
                </li>
            </ul>
        </div>

        <script>
            function loadXMLDoc() {
                var xmlhttp = new XMLHttpRequest();
                xmlhttp.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) {
                        myFunction(this);
                    }
                };

                xmlhttp.open(
                    'GET',
                    'http://www.finnkino.fi/xml/Schedule/',
                    true
                );
                xmlhttp.send();
            }

            function loadXMLSello() {
                var xmlhttp = new XMLHttpRequest();
                xmlhttp.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) {
                        myFunction(this);
                    }
                };

                xmlhttp.open(
                    'GET',
                    'https://www.finnkino.fi/xml/Schedule/?area=1038',
                    true
                );
                xmlhttp.send();
            }

            function loadXMLItis() {
                var xmlhttp = new XMLHttpRequest();
                xmlhttp.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) {
                        myFunction(this);
                    }
                };

                xmlhttp.open(
                    'GET',
                    'https://www.finnkino.fi/xml/Schedule/?area=1045',
                    true
                );
                xmlhttp.send();
            }

            function loadXMLKinopalatsi() {
                var xmlhttp = new XMLHttpRequest();
                xmlhttp.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) {
                        myFunction(this);
                    }
                };

                xmlhttp.open(
                    'GET',
                    'https://www.finnkino.fi/xml/Schedule/?area=1031',
                    true
                );
                xmlhttp.send();
            }

            function loadXMLMaxim() {
                var xmlhttp = new XMLHttpRequest();
                xmlhttp.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) {
                        myFunction(this);
                    }
                };

                xmlhttp.open(
                    'GET',
                    'https://www.finnkino.fi/xml/Schedule/?area=1032',
                    true
                );
                xmlhttp.send();
            }

            function loadXMLTennispalatsi() {
                var xmlhttp = new XMLHttpRequest();
                xmlhttp.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) {
                        myFunction(this);
                    }
                };

                xmlhttp.open(
                    'GET',
                    'https://www.finnkino.fi/xml/Schedule/?area=1033',
                    true
                );
                xmlhttp.send();
            }

            function myFunction(xml) {
                var i;
                var xmlDoc = xml.responseXML;
                var table =
                    '<tr><th><h3>Genre</h3></th><th><h3>Title</h3></th><th><h3>Rating</h3></th><th><h3>Image</h3></th></tr>';
                var x = xmlDoc.getElementsByTagName('Show');
                for (i = 0; i < x.length; i++) {
                    const imageUrl = x[i].getElementsByTagName('Images')[0]
                        .firstElementChild.textContent;
                    table +=
                        '<tr><td>' +
                        x[i].getElementsByTagName('Genres')[0].childNodes[0]
                            .nodeValue +
                        '</td><td>' +
                        x[i].getElementsByTagName('Title')[0].childNodes[0]
                            .nodeValue +
                        '</td><td>' +
                        x[i].getElementsByTagName('Rating')[0].childNodes[0]
                            .nodeValue +
                        '</td><td><img src=' +
                        imageUrl +
                        '></td></tr>';
                }
                document.getElementById('demo').innerHTML = table;
            }
        </script>
    </body>
</html>

答案 1 :(得分：0)

对先前版本的另一个改进：由于有一种方法可以重复执行某些操作，因此只需简化将参数传递给loadXML的代码，就删除了多余的方法。您可以对所有按钮执行此操作。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>MovieInfo</title>
    <link rel="stylesheet" href="todostyle.css" />
    <link rel="stylesheet" href="https://bootswatch.com/4/darkly/bootstrap.min.css" />
</head>

<body>
    <h1><strong>List of FinnKino Cinemas in Finland</strong></h1>
    <br /><br />
    <table id="demo"></table>

    <div id="container">
        <ul class="list-group">
            <li class="list-group-item">
                <button onClick="loadXML()">
                    Espoo: OMENA
                </button>
            </li>
            <li class="list-group-item">
                <button onClick="loadXML(1038)">
                    Finnkino SELLO
                </button>
            </li>
            <li class="list-group-item">
                <button onClick="loadXML(1045)">
                    Finnkino ITIS
                </button>
            </li>
        </ul>
    </div>

    <script>
        function loadXML(id) {
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function() {
              if (this.readyState == 4 && this.status == 200) {
                myFunction(this);
              }
            };
    
            var url = "http://www.finnkino.fi/xml/Schedule/";
    
            if (id) {
              url += "?area=" + id;
            }
    
            xmlhttp.open("GET", url, true);
            xmlhttp.send();
          }
    
          function myFunction(xml) {
            var i;
            var xmlDoc = xml.responseXML;
            var table =
              "<tr><th><h3>Genre</h3></th><th><h3>Title</h3></th><th><h3>Rating</h3></th></tr>";
            var x = xmlDoc.getElementsByTagName("Show");
            for (i = 0; i < x.length; i++) {
              table +=
                "<tr><td>" +
                x[i].getElementsByTagName("Genres")[0].childNodes[0].nodeValue +
                "</td><td>" +
                x[i].getElementsByTagName("Title")[0].childNodes[0].nodeValue +
                "</td><td>" +
                x[i].getElementsByTagName("Rating")[0].childNodes[0].nodeValue +
                "</td><td>" +
                '<img src="' +
                x[i].getElementsByTagName("Images")[0].childNodes[1].childNodes[0]
                  .nodeValue +
                '"/>';
              ("</td></tr>");
            }
            document.getElementById("demo").innerHTML = table;
          }
    </script>
</body>

</html>

下一步是使用一些外部库，angularjs和xml2json进行更好的重写，以将服务API的XML转换为javascript对象。 

<!DOCTYPE html>
<html>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/x2js/1.2.0/xml2json.min.js"></script>
  <link
    rel="stylesheet"
    href="https://bootswatch.com/4/darkly/bootstrap.min.css"
  />

  <body ng-app="myApp" ng-controller="myCtrl">
    <h1><strong>List of FinnKino Cinemas in Finland</strong></h1>

    <h3 ng-if="!shows">Choose a cinema to start</h3>

    <div id="container">
      <ul class="list-group">
        <li class="list-group-item" ng-repeat="area in areas">
          <button type="button" ng-click="getData(area.id)">
            {{ area.name }}
          </button>
        </li>
      </ul>
    </div>

    <table id="demo" ng-if="shows">
      <tr>
        <th>Genre</th>
        <th>Title</th>
        <th>Rating</th>
        <th>Preview</th>
      </tr>
      <tr ng-repeat="show in shows">
        <td>{{ show.Genres }}</td>
        <td>{{ show.Title }}</td>
        <td>{{ show.Rating }}</td>
        <td><img src="{{ show.Images.EventSmallImagePortrait }}" /></td>
      </tr>
    </table>

    <script>
      var app = angular.module("myApp", []);
      app.controller("myCtrl", function($scope, $http) {
        $scope.areas = [
          { name: "All cinemas", id: null },
          { name: "Sello", id: 1038 },
          { name: "Itis", id: 1045 },
          { name: "Kinopalatsi", id: 1031 },
          { name: "Maxim", id: 1032 },
          { name: "Tennispalatsi", id: 1033 }
        ];

        $scope.getData = function(areaId) {
          $http
            .get("https://www.finnkino.fi/xml/Schedule/", {
              params: { area: areaId }
            })
            .then(
              function(response) {
                $scope.shows = getConvertedData(response);
              },
              function(error) {
                console.log(error);
              }
            );
        };

        function getConvertedData(response) {
          var x2js = new X2JS();
          var jsonData = x2js.xml_str2json(response.data);
          return jsonData.Schedule.Shows.Show;
        }
      });
    </script>
  </body>
</html>

相关问题
最新问题