locked
Best way to display my xml information RRS feed

  • Question

  • I am building an app that gets xml data of a website (Roller Coaster / Theme Parks and I want to know the best way to display it and then go to another page where that information will be shown.

    App so far.

    I pull the xml data of a webserver and display the items in a list.

    http://prntscr.com/gbl91

    What I want to do is get them to display in a grid layout as I want to have pictures of them on each box I think.

     

    My code so far:

     

    default.html

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>Hello_World</title>
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
        <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
        <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
    
        <!-- Hello_World references -->
        <link href="/css/default.css" rel="stylesheet" />
        <script src="/js/default.js"></script>
        <!-- now need to get the javascript files for theme park/ roller Coasters and news. -->
        <script src="/js/getData.js"></script>
        <!--<script src="/js/getRC.js"></script>-->
        <!--<script src="/js/getTP.js"></script>-->
    </head>
    <body>
        <div id="mainContent"> 
            <header id="header" aria-lable="Header Content" role="banner">
            	<h1 class="titlearea win-type-ellipsis"><span class="pagetitle">Roller Coaster Mad</span>
            	</h1>
            </header>
            <section id="section" aria-label="Main content" role="main">
                <div id="rollerCoasters" class="subsection" aria-label="Roller Coaster">
                    <h2 class="group-title" role="heading">
                        Roller Coasters
                    </h2>
                    <div id="rcOutput" class="groupInformation">
    					
                    </div>
                </div>
                <div id="themeParks" class="subsection" aria-label="Theme Parks">
                    <h2 class="group-title" role="heading">
                        Theme Parks
                    </h2>
                    <div id="tpOutput" class="groupInformation">
    					
                    </div>
                </div>
    			<div id="news" class="subsection" aria-label="News">
    				<h2 class="group-title" role="heading">
    					News
    				</h2>
    			</div>
            </section>
        </div>
    </body>
    </html>
    

    getData.js

    //Get the 
    (function () {
        "use strict";
    
        var app = WinJS.Application;
    
        // This function responds to all application activations.
        app.onactivated = function (eventObject) {
            if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
                // TODO: Initialize your application here.
                WinJS.UI.processAll();
                loadThemeParkFeed();
                loadRollerCoasterFeed();
                
            }
        };
    
        function loadRollerCoasterFeed() {
    
            document.getElementById("rcOutput").innerHTML = "";
            WinJS.xhr({ url: "http://rollercoastermad.com/test/xmldata/rollercoaster.xml" }).then(
                parseRollerCoasterFeed, errorRollerCoasterFeed
                );
        }
    
        function loadThemeParkFeed() {
    
            document.getElementById("tpOutput").innerHTML = "";
            WinJS.xhr({ url: "http://rollercoastermad.com/test/xmldata/themepark.xml" }).then(
                parseloadThemeParkFeed, errorloadThemeParkFeed
                );
        }
    
        function parseRollerCoasterFeed(result) {
    
            var outputArea = document.getElementById("rcOutput");
            var xml = result.responseXML;
    
            if (xml) {
                var items = xml.querySelectorAll("rollercoasters > item");
                if (items) {
                    var length = Math.min(10, items.length);
                    for (var i = 0; i < length; i++) {
                        var link = document.createElement("a");
                        var newLine = document.createElement("br")
                        link.setAttribute("href", items[i].querySelector("Link").textContent);
                        link.innerText = items[i].querySelector("Name").textContent;
                        outputArea.appendChild(link);
                        outputArea.appendChild(newLine);
                    }
                } else {
                    outputArea.innerHTML = "There are no items available at this time";
                }
            } else {
                outputArea.innerHTML =
                    "Unable to retrieve data at this time. Status code: " + statusCode;
            }
        }
    
        function parseloadThemeParkFeed(result) {
    
            var outputArea = document.getElementById("tpOutput");
            var xml = result.responseXML;
    
            if (xml) {
                var items = xml.querySelectorAll("themeparks > item");
                if (items) {
                    var length = Math.min(10, items.length);
                    for (var i = 0; i < length; i++) {
                        var link = document.createElement("a");
                        var newLine = document.createElement("br")
                        link.setAttribute("href", items[i].querySelector("Link").textContent);
                        link.innerText = items[i].querySelector("Name").textContent;
                        outputArea.appendChild(link);
                        outputArea.appendChild(newLine);
                    }
                } else {
                    outputArea.innerHTML = "There are no items available at this time";
                }
            } else {
                outputArea.innerHTML =
                    "Unable to retrieve data at this time. Status code: " + statusCode;
            }
        }
    
        function errorRollerCoasterFeed(result) {
    
            var statusCode = result.status;
            var outputArea = document.getElementById("rcOutput");
            outputArea.innerHTML = "Unable to retrieve data at this time. Status code: " + statusCode;
        }
    
        function errorloadThemeParkFeed(result) {
    
            var statusCode = result.status;
            var outputArea = document.getElementById("tpOutput");
            outputArea.innerHTML = "Unable to retrieve data at this time. Status code: " + statusCode;
        }
    
        app.start();
    })();

    default.css

    body{
    	display: -ms-grid;
    	-ms-grid-columns: 1fr;
    	-ms-grid-rows: 1fr;
    	background-color: #2733C5;
    }
    
    #mainContent {
    	display: -ms-grid;
    	-ms-grid-columns: 1fr;
    	-ms-grid-rows: 128px 1fr 60px;
    }
    
    #header {
    	-ms-grid-row: 1;
    	display: -ms-grid;
    	-ms-grid-columns: 128px 1fr 40px;
    	-ms-grid-column: 1;
    	-ms-grid-rows: 1fr;
    }
    
    #section {
    	display: -ms-grid;
    	-ms-grid-column: 1;
    	-ms-grid-row: 2;
    	-ms-grid-columns: 120px 1fr 40px 1fr 40px 1fr 40px;
    	-ms-grid-rows: 1fr;
    }
    
    .titlearea {
    	-ms-grid-column: 2;
    	-ms-grid-row: 1;
    	margin-top: 37px;
    }
    
    #rollerCoasters {
    }
    
    .subsection {
    	display: -ms-grid;
    	-ms-grid-columns: 1fr;
    	-ms-grid-rows: 40px 1fr;
    }
    
    #themeParks {
    	-ms-grid-column: 4;
    	-ms-grid-row: 1;
    }
    
    #rollerCoasters {
    	-ms-grid-column: 2;
    	-ms-grid-row: 1;
    }
    
    #news {
    	-ms-grid-column: 6;
    	-ms-grid-row: 1;
    }
    
    .group-title {
    	-ms-grid-column: 1;
    	-ms-grid-row: 1;
    }
    	
    @media screen and (-ms-view-state: fullscreen-landscape) {
    }
    
    @media screen and (-ms-view-state: filled) {
    }
    
    @media screen and (-ms-view-state: snapped) {
    }
    
    @media screen and (-ms-view-state: fullscreen-portrait) {
    }
    
    .groupInformation {
    	-ms-grid-column: 1;
    	-ms-grid-row: 2;
    }
    
    

    If you would like more information please post.

    Thursday, September 27, 2012 2:01 PM

All replies