Announcement

Collapse
No announcement yet.

Parsing CDATA from XML file

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Parsing CDATA from XML file

    Dear all,

    I've been trying to parse the <![CDATA[ section from the XML file at http://rss.weather.gov.hk/rss/CurrentWeather.xml but haven't been having much luck. I am trying to only get the weather icon, air temperature, and relative humidity. Can anyone help me out please?

  • #2
    Hi there flat_stanley,

    this is the best that I can do...

    PHP Code:
    <?php
       $xml
    =new DOMDocument();
       
    $xml->load('http://rss.weather.gov.hk/rss/CurrentWeather.xml');
       
    $description=$xml->getElementsByTagName("description");

       foreach(
    $description as $description) {
       foreach(
    $description->childNodes as $child) {
          if(
    $child->nodeType==XML_CDATA_SECTION_NODE) {
             
    $content=$child->textContent;
           }
        }
     }
    ?>
    <!DOCTYPE html>
    <html lang="en">
    <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

    <title>untitled document</title>

    <link rel="stylesheet" href="screen.css" media="screen">

    <style media="screen">
    body {
        background-color: #f0f0f0;
        font: 1em/1.62em aria, helvetica, sans-serif;
        text-align: center;
     }

    #weather {
        display: inline-block;
        padding: 2em 2em 0;
        margin: auto;
        border: 0.06em solid #999;
        border-radius: 1em;
        background-color: #fff;
        box-shadow: inset 0 0 1em #999, 0.3em 0.3em 0.3em #999;
     }

    #weather table,
    #weather font {
        display: none;
     }

    #weather img {
        border: 0.3em double #38c6ff;
     }

    #weather p:first-of-type {
        padding: 1em;
        margin-bottom: 0;
        border: 0.06em dotted #666;
        background-color: #f9f9f9;
     }
    </style>

    </head>
    <body>

    <div id="weather">
       <?php echo $content?>
    </div>

    <script>
    (function() {
       'use strict';
       var d=document.getElementById('weather');
       d.innerHTML=
       d.innerHTML.replace('The air temperatures at other places were:','');
    }());
    </script>

    </body>
    </html>


    ~ the original bald headed old fart ~

    Comment


    • #3
      Holy cow... that is super brilliant. Thanks a bunch. May I also ask how I can incorporate this into a .html page so I can do away with the .php extension?

      Comment


      • #4
        Hi there flat_stanley,

        the page does not work with an .html extension.

        Don't you want the hourly update?



        ~ the original bald headed old fart ~

        Comment


        • #5
          Oh I see. So even if I turn the page into .html, the weather content will still not be dynamic. Alright, I understand now. Thanks a lot. However, I still just want the numbers of the air temperature and relative humidity separately, without all the other words. Is it possible to do that?

          Comment


          • #6
            Hi there flat_stanley,

            what you require is not possible with that particular XML file.

            I would suggest that you search for a more precise alternative which allows "pick-and-choose".

            Is that a good possibility for you?



            ~ the original bald headed old fart ~

            Comment


            • #7
              Hi there flat_stanley,

              I found this site...
              http://openweathermap.org/price
              ...which offers a free service and I signed up for it..

              You can see the Hong Kong information that it supplied to me here...

              Code:
              
              <current>
               <city id="1819729" name="Hong Kong">
                <coord lon="114.16" lat="22.29"></coord>
                <country>HK</country>
                <sun rise="2017-01-01T23:03:19" set="2017-01-02T09:51:51"></sun>
               </city>
               <temperature value="293.72" min="293.15" max="294.15" unit="kelvin"></temperature>
               <humidity value="82" unit="%"></humidity>
               <pressure value="1018" unit="hPa"></pressure>
               <wind>
                <speed value="2.6" name="Light breeze"></speed>
                <gusts></gusts>
                <direction value="160" code="SSE" name="South-southeast"></direction>
               </wind>
               <clouds value="0" name="clear sky"></clouds>
               <visibility value="10000"></visibility>
               <precipitation mode="no"></precipitation>
               <weather number="701" value="mist" icon="50d"></weather>
               <lastupdate value="2017-01-02T09:30:00"></lastupdate>
              </current>
              
              As you can see, this would allow me to "pick-and-choose" specific items to display.

              What do you think about that?



              ~ the original bald headed old fart ~

              Comment


              • #8
                That looks awesome. I just signed up an account for the free service. But how do I get your code above that is like an XML file?

                Comment


                • #9
                  Never mind. I've got it.

                  Comment


                  • #10
                    Hi there flat_stanley,

                    check out the attachment, which contains a fully working example for Hong Kong.
                    Obviously, I have used my appID for this, your will have to use yours.

                    I have attached an image of what it looks like.

                    Click image for larger version

Name:	example.jpg
Views:	1
Size:	28.5 KB
ID:	1443328


                    Attached Files


                    ~ the original bald headed old fart ~

                    Comment


                    • #11
                      Thanks a lot. I really appreciate it. This is how far I have gotten at the moment: http://megaexplorer.net/weathertest.phtml
                      As you can see, I'm using the same colour text and background to cover it up. Lol! I am still trying to get Hong Kong Observatory to rewrite their XML file so that I can get those values and weather icon individually.

                      Comment


                      • #12
                        Hi there flat_stanley,

                        I thought that you were going to use...
                        http://openweathermap.org/
                        ...instead of the Hong Kong Observatory rubbish XML.


                        ~ the original bald headed old fart ~

                        Comment


                        • #13
                          I used openweathermap for the temperature and humidity, but the icon from HKO.

                          Comment


                          • #14
                            Hi there flat_stanley,

                            if you just want the icon then this...

                            PHP Code:
                            <?php
                               $xml
                            =new DOMDocument();
                               
                            $xml->load('http://rss.weather.gov.hk/rss/CurrentWeather.xml');
                               
                            $description=$xml->getElementsByTagName("description");

                               foreach(
                            $description as $description) {
                               foreach(
                            $description->childNodes as $child) {
                                  if(
                            $child->nodeType==XML_CDATA_SECTION_NODE) {
                                     
                            $icon=$child->textContent;
                                   }
                                }
                             }
                            ?>
                            <!DOCTYPE html>
                            <html lang="en">
                            <head>

                            <meta charset="utf-8">
                            <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

                            <title>untitled document</title>

                            <style media="screen">
                            #icon table,
                            #icon p  {
                                display: none;
                             }
                            </style>

                            </head>
                            <body>

                            <div id="icon">
                               <?php echo $icon?>
                            </div>

                            <script>
                            (function() {
                               'use strict';
                               var d=document.getElementById('icon');
                               d.innerHTML=
                               d.innerHTML.replace('The air temperatures at other places were:','');
                            }());
                            </script>
                            </body>
                            </html>
                            ...will provide it.


                            ~ the original bald headed old fart ~

                            Comment


                            • #15
                              Thanks so much!!! What about resizing the weather icon??

                              Comment

                              Working...
                              X