Loading an XML file from local computer into a web page

571 512MB

Not sure if I am in the right forum for this question.

I am developing a server-less web page that will load an XML file so I can reformat the data and put it back on the computer.

I use FireFox 8.0.

I have no problem reading the file into the web page with "new FileReader();"

I tried both of these formats:

Expand|Select|Wrap|Line Numbers

  
reader.readAsBinaryString(in Blob blob);

reader.readAsText(in Blob blob, [optional] in DOMString encoding);

and both seem to load the data just fine. Although I have not figured out how to to use DOMString encoding option nor do I know if I need it.

It appears to me that I have the data in a string format even though it is a well formatted XML data.

I have not been able to convert the string into an XML object nor have I been able to read the XML nodes as if it was an xml document.

I could parse the data with indexOf(), but I would really rather try to read the data from the document nodes.

My question is this. Is there an easy way to convert the data I have read into the page, into embedded xml data?

Attached are both my app and a sample file with data to be read.

Attached Files

myFileReader.zip (475.0 KB, 197 views)

Nov 9 '11 #1

Subscribe Post Reply

✓ answered by Dormilich

yea, the problem is that FileReader returns a string (reader.result) and not a Document instance. thus, before calling any XML functionality (note: .innerHTML is not part of the DOM) either use DOMParser or Document’s loadXML() method to do that conversion.

the cookbook example uses the internal parser of XMLHttpRequest (which it is doing in the background) to directly get the XMLDOM.

4451

Dormilich

8,658

Expert Mod 8TB

Although I have not figured out how to to use DOMString encoding option nor do I know if I need it.

if you encoded it in UTF-8 you don’t need it (default encoding), otherwise

Expand|Select|Wrap|Line Numbers

 // XML/document encoded in Latin-1

reader.readAsText(blob, "ISO-8859-1");

Nov 9 '11 #2

Claus Mygind

571

512MB

Ok so that is not going to help me get a xml doc. What else can I do to present the data in an xml format to the web page's javaScript?

Nov 9 '11 #3

Dormilich

8,658

Expert Mod 8TB

didn’t look into myFileReader.zip, but does it have an output method (compareable to PHP’s file_get_contents() or something simple like .toString())?

Nov 9 '11 #4

Claus Mygind

571

512MB

Here's the link to Mozilla online documentation

https://developer.mozilla.org/en/DOM/FileReader

In answer to your question the output is obtained from
reader.result which can be obtained after the "onload" eventhandler fires.

Here are excerpts from my implementation of the code

Expand|Select|Wrap|Line Numbers

 
var reader = new FileReader();
 
    reader.onload = function () {  

        g.f1 = reader.result;

        g.fileList.innerHTML = g.f1; 

        var waypoints = XML2JS(reader.result, "gpx");

    }
 
    function docStartUp(obj)

    {

        g.fileList = document.getElementById("fileList");

        //assignEventListeners();
 
            var fileSelect = document.getElementById("fileSelect"),  

              fileElem = document.getElementById("fileElem");  
 
            fileSelect.addEventListener("click", function (e) {  

              if (fileElem) 

              {  

                fileElem.click();  

              }  

              e.preventDefault(); // prevent navigation to "#"  

            }, false);      
 
            fileElem.addEventListener("change", function (e) {

                 handleFiles(this.files);

            }, false);      
 
    }

    function handleFiles(files) {
 
      if (!files.length) {

        g.fileList.innerHTML = "<p>No files selected!</p>";

      } else {

        var list = document.createElement("ul");

        for (var i = 0; i < files.length; i++) {

          var li = document.createElement("li");

          list.appendChild(li);

          var info = document.createElement("span");

          info.innerHTML = files[i].name + ": " + files[i].size + " bytes";

          li.appendChild(info);

        }

        g.fileList.appendChild(list);
 
        reader.readAsText( files[0] );

        //reader.readAsBinaryString(files[0]);

      }

    }
 
 <body onload="docStartUp(this)">

  <form method="post" action="">
 
    <input type="file" id="fileElem" multiple="true" accept="xml/*" style="display:none">  

    <a href="#" id="fileSelect">Select some files</a> 
 
    <div id="fileList" name="fL" style="display: none;">

    </div>

 </form> 

 </body>

I can understand your reluctance to opening a zip file, but the only two items in there are the html page and a .gpx (xml) file of waypoints for geocaching.

Perhaps the online documentation will more clearly explain what I am not seeing how to extract the data as an xml document.

Thanks for your help

Nov 9 '11 #5

Claus Mygind

571

512MB

Here is what the file structure looks like that I am trying to extract.

I want to parse the data between the tags
<wpt ...> and </wpt>
I have bolded it in the code below

The sample file I posted in the zip file contains about 121 of these tags. A normal file I would process would contain between 500 to 1000 waypoints.

I am trying to extract a limited amount of information and create a new .gpx file (see sample output at bottom)

Expand|Select|Wrap|Line Numbers

 <?xml version="1.0" encoding="utf-8"?>

<gpx xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" version="1.0" creator="Groundspeak Pocket Query" xsi:schemaLocation="http://www.topografix.com/GPX/1/0 http://www.topografix.com/GPX/1/0/gpx.xsd http://www.groundspeak.com/cache/1/0 http://www.groundspeak.com/cache/1/0/cache.xsd" xmlns="http://www.topografix.com/GPX/1/0">

  <name>busse woods</name>

  <desc>Geocache file generated by Groundspeak</desc>

  <author>Groundspeak</author>

  <email>contact@groundspeak.com</email>

  <time>2011-10-30T16:04:44.2275627Z</time>

  <keywords>cache, geocache, groundspeak</keywords>

  <bounds minlat="41.897883" minlon="-88.1792" maxlat="42.124867" maxlon="-87.871917" />

  <wpt lat="42.0118" lon="-88.0251">

    <time>2007-04-19T07:00:00Z</time>

    <name>GC1298V</name>

    <desc>Chicago Geo C-A-C-H-E: Game Clue #4 by fitzgeo, Traditional Cache (1/3)</desc>

    <url>http://www.geocaching.com/seek/cache_details.aspx?guid=52e5c6c4-162e-44d9-af11-3dab8b671f46</url>

    <urlname>Chicago Geo C-A-C-H-E: Game Clue #4</urlname>

    <sym>Geocache</sym>

    <type>Geocache|Traditional Cache</type>

    <groundspeak:cache id="580906" available="True" archived="False" xmlns:groundspeak="http://www.groundspeak.com/cache/1/0">

      <groundspeak:name>Chicago Geo C-A-C-H-E: Game Clue #4</groundspeak:name>

      <groundspeak:placed_by>fitzgeo</groundspeak:placed_by>

      <groundspeak:owner id="306610">fitzgeo</groundspeak:owner>

      <groundspeak:type>Traditional Cache</groundspeak:type>

      <groundspeak:container>Micro</groundspeak:container>

      <groundspeak:difficulty>1</groundspeak:difficulty>

      <groundspeak:terrain>3</groundspeak:terrain>

      <groundspeak:country>United States</groundspeak:country>

      <groundspeak:state>Illinois</groundspeak:state>

      <groundspeak:short_description html="True">This cache is a camo'd test tube size pre-form container.

Approximately a 1 mile round trip walk from forest preserve

parking. &lt;br&gt;

Like other caches in the series, it's the hike, not the hide.</groundspeak:short_description>

      <groundspeak:long_description html="True">This cache is one of 25 Geo C-A-C-H-E Bingo card piece caches

located in the Chicago area.&lt;br&gt;

&lt;br&gt;

 To get your card or to read the game details, see &lt;a rel=

"nofollow" href=

"http://www.geocaching.com/seek/cache_details.aspx?guid=3276bb82-3c0f-49c2-8ec8-45d63177c9c7"&gt;

Chicago Geo C-A-C-H-E: Get a Card (South)&lt;/a&gt; &lt;br&gt;

&lt;p&gt;&lt;b&gt;&lt;font color="blue" size="3"&gt;The C-A-C-H-E Card Word for this

cache is listed on both the cache log and screw-top

bottom&lt;/font&gt;&lt;br&gt;&lt;/b&gt;&lt;/p&gt;

&lt;ol&gt;

&lt;li&gt;Mark this Card Word on your Geo C-A-C-H-E Game Card&lt;/li&gt;

&lt;li&gt;If you log this cache before obtaining a Game Card, I will

assign you a Game Card number, post the number as a note, and email

you a game card.&lt;/li&gt;

&lt;li&gt;When you have 5 squares marked in a row (either horizontal,

vertically, or diagonally) or a blackout, place a note on the

&lt;a rel="nofollow" href=

"http://www.geocaching.com/seek/cache_details.aspx?guid=3276bb82-3c0f-49c2-8ec8-45d63177c9c7"&gt;

Chicago Geo C-A-C-H-E: Get a Card (South)&lt;/a&gt; cache.&lt;/li&gt;&lt;/ol&gt;</groundspeak:long_description>

      <groundspeak:encoded_hints>Yes, you will have to walk over the hill.</groundspeak:encoded_hints>

      <groundspeak:logs>

        <groundspeak:log id="194447471">

          <groundspeak:date>2011-10-22T19:00:00Z</groundspeak:date>

          <groundspeak:type>Found it</groundspeak:type>

          <groundspeak:finder id="260733">k'wren</groundspeak:finder>

          <groundspeak:text encoded="False">you really get an amazing view from up here.....found a bit of fall color on the way down.
 
thanks for the hide [^]</groundspeak:text>

        </groundspeak:log>

        <groundspeak:log id="192256083">

          <groundspeak:date>2011-10-12T19:00:00Z</groundspeak:date>

          <groundspeak:type>Found it</groundspeak:type>

          <groundspeak:finder id="1751076">Stephalana</groundspeak:finder>

          <groundspeak:text encoded="False">What a climb! Couldn't I have chosen this on the way there?</groundspeak:text>

        </groundspeak:log>

        <groundspeak:log id="186053285">

          <groundspeak:date>2011-09-11T19:57:47Z</groundspeak:date>

          <groundspeak:type>Found it</groundspeak:type>

          <groundspeak:finder id="2668825">3pear</groundspeak:finder>

          <groundspeak:text encoded="False">Pretty views, spoiled only by the traffic noise.  TFTC</groundspeak:text>

        </groundspeak:log>

        <groundspeak:log id="187636177">

          <groundspeak:date>2011-09-11T19:00:00Z</groundspeak:date>

          <groundspeak:type>Found it</groundspeak:type>

          <groundspeak:finder id="3345437">Makeithappen</groundspeak:finder>

          <groundspeak:text encoded="False">cool</groundspeak:text>

        </groundspeak:log>

        <groundspeak:log id="186434825">

          <groundspeak:date>2011-09-11T19:00:00Z</groundspeak:date>

          <groundspeak:type>Found it</groundspeak:type>

          <groundspeak:finder id="1971376">rikjaxon</groundspeak:finder>

          <groundspeak:text encoded="False">Found on a quick hike by a great hill for canyon hiking practice.  The view from the cache brought a smile and a smiley.  TFTH.</groundspeak:text>

        </groundspeak:log>

      </groundspeak:logs>

      <groundspeak:travelbugs />

    </groundspeak:cache>

  </wpt>

</gpx>

Sample output. I extract and recombine certain elements of the xml data into a new file.

Expand|Select|Wrap|Line Numbers

 
<?xml version="1.0" encoding="UTF-8" standalone="no" ?> 

<gpx xmlns="http://www.topografix.com/GPX/1/1" creator="Claus" version="1.1"> 

  <wpt lat="42.0118" lon="-88.0251">

 <name>GC1298V 1/3 M</name>

 <cmt>1/3 M H,580906 Chicago Geo C-A-C-H-E: Game Clue #4</cmt>

 <desc>Chicago Geo C-A-C-H-E: Game Clue #4</desc>

 <sym>Geocache</sym>

 </wpt>

</gpx>

Nov 9 '11 #6

Claus Mygind

571

512MB

Well one thing I can do rather quickly is just use the .split() method, that at least gives me an array to work with where I can just discard element[0] doing it like this

Expand|Select|Wrap|Line Numbers

g.wpts = reader.result.split("<wpt ");

I then have an output like this which will be easy to cycle through

Expand|Select|Wrap|Line Numbers

 
"lat="42.0118" lon="-88.0251"> <time>2007-04-19T07:00:00Z</time> <name>GC1298V</name> ........</wpt> "

The only bad thing is I didn't learn to work with xml data.

Nov 9 '11 #7

Dormilich

8,658

Expert Mod 8TB

The only bad thing is I didn't learn to work with xml data.

you used it all the time when you used the DOM.

I think what you need when you have the XML string is the DOMParser.

Nov 9 '11 #8

Claus Mygind

571

512MB

Hmm! Well that is good to know. You may be right about the DOMparser as I am mixing new and old technology.

I was using a routine from JavaScript & DHTML Cookbook by Danny Goodman from O'Reilly to try to parse the xml document by navigating the nodes. But it gave me this error : "xmlDoc.getElementsByTagName is not a function file: myFileReader.html Line 122"

The line of code is as follows

Expand|Select|Wrap|Line Numbers

var rawData = xmlDoc.getElementsByTagName(containerTag)[0];

I have bolded the line of code in the code below. It appears to me when I get to this line of code it is not seeing the read information as xml data because it is not recognizing the nodes in the data. I have confirmed that the two parameters used in the routine "xmlDoc, containerTag" both contain the appropriate information. xmlDoc does have all the information in the file selected and the containerTag is "gpx".

Danny Goodman shows how to load the xml data from the same domain (see his example for loading the data at the bottom of this post. I just found the FileReader more flexiable for serverless html page where I could select a file from anywhere on my computer. In Mr. Goodman's example I had to keep the data (gpx) file in the same folder as the html page.

As a final note, in the meantime, I took a different route and simply used the ".split("<wpt ") method to parse the incoming data into an array. Then using a for/next loop, I loop through the array and extract what I need with the "indexOf()" method. Each array element with the exception of the first one is a waypoint. Now I am in the process of creating an xml output file.

Thanks for your help, I did not learn what I wanted to learn, maybe next time.

Here is the entire html page with the embedded javaScript

Expand|Select|Wrap|Line Numbers

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

    <script type="text/javascript">

    <!--

    //global object for global variables

    var g = new Object();
 
    /*

    --------------------------------------

    var reader = new FileReader();

    this creates an object 

    which will contain the list of files 

    selected by the user

    --------------------------------------

    */

    var reader = new FileReader();
 
    /*

    --------------------------------------

    this function is run when the reader

    has finished reading/loading the data

    from the local file. 
 
    it is referenced in "handleFiles(files)"

    when "reader.readAsText( files[0] );"

    is executed

    --------------------------------------

    */

    reader.onload = function () {  

        g.f1 = reader.result;

        g.fileList.innerHTML = g.f1; 

        var waypoints = XML2JS(reader.result, "gpx");

    }
 
    function docStartUp(obj)

    {

        g.fileList = document.getElementById("fileList");

        //assignEventListeners();
 
        /*

        ------------------------------------------------------

        fileSelect is the visible anchor on the form

        fileElem is the hidden control <input type="file"../>
 
        each has an eventListener assigned

        fileSelect is actived with onclick/click event by 

          the user

        fileElem is actived with the onchange/change event

          created by the file selection by the user.

        ------------------------------------------------------

        */

            var fileSelect = document.getElementById("fileSelect"),  

              fileElem = document.getElementById("fileElem");  
 
            fileSelect.addEventListener("click", function (e) {  

              if (fileElem) 

              {  

                fileElem.click();  

              }  

              e.preventDefault(); // prevent navigation to "#"  

            }, false);      
 
            fileElem.addEventListener("change", function (e) {

                 handleFiles(this.files);

            }, false);      
 
    }
 
    /*

    -----------------------------------

    handleFiles is activated by the 

    filesElem eventListener. it cycles

    through the list of files selectd

    -----------------------------------

    */

    function handleFiles(files) {
 
        /*

        ----------------------------------------------------------

        this section is just stuff that cycles through the list

        and displays the list on the screen

        ----------------------------------------------------------

        */

      if (!files.length) {

        g.fileList.innerHTML = "<p>No files selected!</p>";

      } else {

        var list = document.createElement("ul");

        for (var i = 0; i < files.length; i++) {

          var li = document.createElement("li");

          list.appendChild(li);

          var info = document.createElement("span");

          info.innerHTML = files[i].name + ": " + files[i].size + " bytes";

          li.appendChild(info);

        }

        g.fileList.appendChild(list);

        /*

        ------------------------------------------------------------------

        this is the heart of the action

        the "reader" can read the file

        in several formats.

        reader.abort();

        reader.readAsArrayBuffer(in Blob blob); Requires Gecko 7.0

        reader.readAsBinaryString(in Blob blob);

        reader.readAsDataURL(in Blob file);

        reader.readAsText(in Blob blob, [optional] in DOMString encoding);
 
        research these links for more info.

        https://developer.mozilla.org/en/Using_files_from_web_applications

        https://developer.mozilla.org/en/DOM/FileReader

        ------------------------------------------------------------------

        */         

        //reader.readAsText( files[0] );

        reader.readAsBinaryString(files[0]);

      }

    }

////////////////////////////////////////////////////////////////

    var xDoc;

    function XML2JS(xmlDoc, containerTag) {

        var output = new Array();

        var rawData = xmlDoc.getElementsByTagName(containerTag)[0];

        var i, j, oneRecord, oneObject;

        for (i = 0; i < rawData.childNodes.length; i++) {

            if (rawData.childNodes[i].nodeType == 1) {

                oneRecord = rawData.childNodes[i];

                oneObject = output[output.length] = new Object();

                for (j = 0; j < oneRecord.childNodes.length; j++) {

                    if (oneRecord.childNodes[j].nodeType == 1) {

                        oneObject[oneRecord.childNodes[j].tagName] = 

                            oneRecord.childNodes[j].firstChild.nodeValue;    

                    }

                }

            }

        }

        return output;

    }

/////////////////////////////////////////////////////////////////////

    //-->

    </script> 

 </head>
 
 <body onload="docStartUp(this)">

  <form method="post" action="">
 
    <input type="file" id="fileElem" multiple="true" accept="xml/*" style="display:none">  

    <a href="#" id="fileSelect">Select some files</a> 
 
    <div id="fileList" name="fL" style="display: none;">

    </div>

 </form> 

 </body>

</html>

Cookbook example for loading xml data instead of using FileReader.

Expand|Select|Wrap|Line Numbers

 var xDoc;

// verify that browser supports XML features and load external .xml file

function verifySupport(xFile) {

    if (document.implementation && document.implementation.createDocument) {

        // this is the W3C DOM way, supported so far only in NN6+

        xDoc = document.implementation.createDocument("", "theXdoc", null);

    } else if (typeof ActiveXObject != "undefined") {

        // make sure real object is supported (sorry, IE5/Mac)

        if (document.getElementById("msxml").async) {

            xDoc = new ActiveXObject("Msxml.DOMDocument");

        }

    }

    if (xDoc && typeof xDoc.load != "undefined") {

        // load external file (from same domain)

        xDoc.load(xFile);

        return true;

    } else {

        var reply = confirm("This example requires a browser with XML support, " +

            "such as IE5+/Windows or Netscape 6+.\n \nGo back to previous page?");

        if (reply) {

            history.back();

        }

    }

    return false;

}
 
// initialize first time -- invoked onload

function init(xFile) {

    // confirm browser supports needed features and load .xml file

    if (verifySupport(xFile)) {

        // let file loading catch up to execution thread

        setTimeout("operativeFunction()", 1000);

    }

}
 
----------
 
<body onload="init('myData.xml');">
 
<!-- Try to load Msxml.DOMDocument ActiveX to assist support verification -->

<object id="msxml" width="1" height="1" 

    classid="CLSID:2933BF90-7B36-11d2-B20E-00C04F983E60" ></object>
 
----------
 
<xml id="myData" style="display:none">

<worldcup>

    <final>

        <location>Uruguay</location>

        <year>1930</year>

        <winner>Uruguay</winner>

        <winscore>4</winscore>

        <loser>Argentina</loser>

        <losscore>2</losscore>

    </final>

    <final>

        <location>Italy</location>

        <year>1934</year>

        <winner>Italy</winner>

        <winscore>2</winscore>

        <loser>Czechoslovakia</loser>

        <losscore>1</losscore>

    </final>

    É

</worldcup>

</xml>

Nov 10 '11 #9

Dormilich

8,658

Expert Mod 8TB

Nov 10 '11 #10

Claus Mygind

571

512MB

Thanks. while you were formulating that answer for me, I took your previous suggestion and tested the DOMparser and it worked properly.

Now you have helped me to fully understand what is going on.

Nov 10 '11 #11

Loading an XML file from local computer into a web page

✓ answered by Dormilich

Similar topics