How to display data from JSON

How to display data from JSON

Hi there,

I'm trying to get a data from cross-domain XML file using JSON. There are numerous examples out there but I'm having trouble displaying the data from the XML file. This is my first attempt at using JSON to fetch data from cross domain xml file.

My goal is to parse the xml file and based on the provinceCode create array or list for each provinceCode and add the cities that belong to same province to the appropriate array or list. E.g. cities belonging to province BC will be added to array or list named BC.

But I'm just trying to use the alert to test if I see anything and I don't know if I've got any XML data. Since this is my first example, please be patient and thanks in advance for your time and help.

Joe

  1. <!DOCTYPE html>
    <html>
    <head>
        <title>xyz</title>
       
        <meta name="viewport" content="width=device-width, initial-scale=1">
       
        <meta charset="utf-8" /> <!-- came from cordova -->
        <meta name="format-detection" content="telephone=no" /><!-- came from cordova -->
        <meta name="msapplication-tap-highlight" content="no" /><!-- came from cordova -->
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 --><!-- came from cordova -->
        <!--<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />--><!-- came from cordova -->
        <!--<link rel="stylesheet" type="text/css" href="css/index.css" />--><!-- custom stylsheet -->

      <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src="https://code.jquery.com/jquery-2.1.3.min.js" data-semver="2.1.3" data-require="jquery"></script>
      <script>
        $(document).bind('mobileinit',function(){
            $.mobile.pushStateEnabled = false;
        });
    </script>
      <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
      <script src="js/xml2json.js"></script>
      <script src="js/jquery.xdomainajax.js"></script>
      <!--<script type="text/javascript" src="js/cordova.js"></script>--> <!-- came from cordova -->

        </script>

        <script>

        $(document).ready(function() {
      $.ajax({
        url: "http://query.yahooapis.com/v1/public/yql",
        jsonp: "callback",
     
        // tell jQuery we're expecting JSONP
        dataType: "jsonp",
     
        // tell YQL what we want and that we want JSON
        data: {
            q: "use 'http://dd.weatheroffice.ec.gc.ca/citypage_weather/xml/siteList.xml'",
            format: "json"
        },
        success: function( response ) {
            alert("callback");
            //var headline = $(response.responseText).find('site code').text();
            var site = response.siteList.site;
            $.each(site, function(index, item){
                alert(site.provinceCode);
            }
        }
      });
    });


            $(function() {

                $("#pt").change(function() {
                    var selectedPT = $('#pt').val();
                    alert(selectedPT);
                });
                });
            //}
        </script>

    </head>
    <body>

    <!-- Start of first page -->
    <div data-role="page" id="home">

        <div data-role="header">
            <h1>Canadian Weather</h1>
        </div><!-- /header -->

        <div data-role="content">   
            <div data-role="main" class="ui-content">
              <fieldset class="ui-field-contain">
                <select name="pt" id="pt">
                  <option value="" selected>Select Province or Territory</option>
                  <option value="AB">Alberta</option>
                  <option value="BC">British Columbia</option>
                  <option value="MB">Manitoba</option>
                  <option value="NB">New Brunswick</option>
                  <option value="NL">Newfoundland and Labrador</option>
                  <option value="NT">Northwest Territories</option>
                  <option value="NS">Nova Scotia</option>
                  <option value="NU">Nunavut</option>
                  <option value="ON">Ontario</option>
                  <option value="PE">Prince Edward Island</option>
                  <option value="QC">Quebec</option>
                  <option value="SK">Saskatchewan</option>
                  <option value="YT">Yukon</option>
                </select>
                <select name="cities" id="cities">
                  <option value="" selected>Please Select Province or Territory</option>
                </select>
                <a id='btn_search_db' href="#db_result" data-role="button">Search Database</a>       
              </fieldset>
              <hr>
              <a href="#etg" data-role="button">ETG</a>
              <a href="#ddc" data-role="button">DDC</a>
            </div>
        </div><!-- /content -->

        <div data-role="footer">
            <h4>Page Footer</h4>
        </div><!-- /footer -->
       
        <script>

           
           
        </script>   
       
       
    </div><!-- end of first page -->


    <!-- Start of second page -->
    <div data-role="page" id="db_result">
        <div data-role="header">
            <h1>db_result</h1>
        </div><!-- /header -->

        <div data-role="content">   
            <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>
            <p id="lblWeek1Day"></p>
            <p id="lblWeek2Day"></p>
            <ul id="test">
                <!-- To be populated dynamically from SQLite. -->
            </ul>       
            <p><a href="#home">Back to Home</a></p>   
        </div><!-- /content -->

        <div data-role="footer">
            <h4>Page Footer</h4>
        </div><!-- /footer -->
       
    </div><!-- end of second page -->

    <!-- Start of third page -->
    <div data-role="page" id="etg">

        <div data-role="header">
            <h1>ETG</h1>
        </div><!-- /header -->

        <div data-role="content">   
            <p>Some content will go here...</p>
            <p><a href="#home">Back to Home</a></p>   
        </div><!-- /content -->

        <div data-role="footer">
            <h4>Page Footer</h4>
        </div><!-- /footer -->
    </div><!-- end of third page -->

        <!-- Start of fourth page -->
        <div data-role="page" id="ddc">
       
            <div data-role="header">
                <h1>DDC</h1>
            </div><!-- /header -->
       
            <div data-role="content">   
                <p>Some Other content will go here...</p>       
                <p><a href="#home">Back to Home</a></p>   
            </div><!-- /content -->
       
            <div data-role="footer">
                <h4>Page Footer</h4>
            </div><!-- /footer -->
        </div><!-- end of fourth page -->

       
        <!--<script type="text/javascript" src="js/index.js"></script> came from cordova -->


    </body>
    </html>