Skip to content

With Windows 8 Metro HTML5/CSS3/JavaScript/WinRT, Read Any File From Project Directory

Updated: at 02:12 PM

One of the standard things we programmers do is to read static files from our project directory.  That is, say you put a json file such as /data/stats_data.json at the root of your Visual Studio 2011 PreRelease Developer Edition project and you want to read it and convert it to a JavaScript object using WinRT (JSON.parse(..)).  This post explains how to do that using the Metro App Development Framework with JavaScript.

 

By way of background, this post was motivated by two threads I had with a great support helper on the MSDN forums named Jeff Sanders.  The links are here:  Thread 1  and Thread 2.

image

 

First, let’s look at the basic empty project by creating a Blank Application as follows:

 

image

 

Then, drop some JavaScript into a new data directory which is what we plan on reading into our JavaScript.

 

image

 

Now, let’s add some code to the default.js file and one function called ReadAllDataFile that actually does the heavy lifting.  Add to the default.html just one div tag in the body so we can prove we did something good, and run it.  Below is the project that has all this in it.

Link To Download Project:  

 

And the explanation for the code pasted to the bottom with line numbers now (though it’s pretty self explanatory).  If you feel the urge to cut and paste the code, you will get annoyed with my line numbers. I’d suggest grabbing the zip file of the project from above and using that code for pasting purposes.

image

(Tablet Simulator Screen Shot With Result Above)

default.js:

   1:  // read the file you want
   2:  function ReadAllDataFile(fileNameInLocalTree) {
   3:      
   4:      var package = Windows.ApplicationModel.Package.current;
   5:      var installedLocation = package.installedLocation;
   6:   
   7:      installedLocation.createFileAsync(fileNameInLocalTree, Windows.Storage.CreationCollisionOption.openIfExists).then(function (dataFile) {
   8:          dataFile.openAsync(Windows.Storage.FileAccessMode.read).then(function (stream) {
   9:              var size = stream.size;
  10:              if (size == 0) {
  11:                  // Data not found
  12:              }
  13:              else {
  14:                  var inputStream = stream.getInputStreamAt(0);
  15:                  var reader = new Windows.Storage.Streams.DataReader(inputStream);
  16:   
  17:                  reader.loadAsync(size).then(function () {
  18:   
  19:                      //var contents = reader.readString(size); // fails with multibyte error if bad data (see legislators.getList.json)
  20:   
  21:                      // allocate the full array so readBytes can insert it in full
  22:                      var array = new Array(size);
  23:                      reader.readBytes(array);
  24:                      
  25:                      var newString = "";
  26:                      for (var i = 0; i < array.length; i++) {
  27:                          // only printable characters (include spaces because could be part of names) (very rough here)
  28:                          // http://www.csgnetwork.com/asciiset.html
  29:                          if (array[i] >= 32 && array[i] <= 126) {
  30:                              var c = String.fromCharCode(array[i]);
  31:                              newString += c;
  32:                          }
  33:                      }
  34:   
  35:                      
  36:                      var result = JSON.parse(newString);
  37:                      var newYorkPopulation = result.NY.P001001;
  38:   
  39:                      // output to the screen
  40:                      document.getElementById('outputhere').innerHTML = "New York Population: " + newYorkPopulation;
  41:                      
  42:                  });
  43:              }
  44:          })
  45:      });
  46:  }
  47:   
  48:  (function () {
  49:      'use strict';
  50:      // Uncomment the following line to enable first chance exceptions.
  51:      Debug.enableFirstChanceException(true);
  52:   
  53:      WinJS.Application.onmainwindowactivated = function (e) {
  54:          if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
  55:              
  56:              // start of my insert code            
  57:              ReadAllDataFile("\data\\states_data.json");
  58:              // end of my insert code
  59:          }
  60:      }
  61:   
  62:      WinJS.Application.start();
  63:  })();

 

Hope this Helps!  Remember, these are pre-beta bits so things could change when production comes a long.  Feel free to add comments to this post and let me know if it stops working. 

Check out the ORM (Object Relational Mapper) PRISMA. The database access method I use in all my projects