Call JSON from JAVASCRIPT in windows 8 metro app

Question

Hi all,

I would like to parse a JSON file from a Javascript file, both of which are included in my app.

I am able to do the needful using native C# code but my requirement is not that. The  JSON has to be called in the Javascript itself and then parsed.

Any help would be appreciated.

Thanks in advance.

Answer 1

Hi,

First, you can read the json file and parse that as follow:

    var uri = new Windows.Foundation.Uri("ms-appx:///app_data/myfile.json")
    Windows.Storage.StorageFile.getFileFromApplicationUriAsync(uri).then(function (file) {
        return Windows.Storage.FileIO.readTextAsync(file);
    }).done(function (text) {
        JSON.parse(text);
    });

---

Roy
MSDN Community Support | Feedback to us
Develop and promote your apps in Windows Store
Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Answer 2

Hi when i use this approach i get an error :WinRT Error: System cannot find file specified"

while i've got the "Menuitems.json" in the sub folder "Data".

Any suggetion what i'm doing wrong??

thnx WimK

var url = new Windows.Foundation.Uri("ms-appx:///Data/Menuitems.json");
var myMenuitems = new Array();

MenuItems.apm_MenuItem.loadMenuItems(url).done();

loadMenuItems: function (uri) {
                //IMPORTANT TO RETURN THE PROMISE , //ASYNChroon!!
                return Windows.Storage.StorageFile.getFileFromApplicationUriAsync(uri)
                    .then(function (file) {
                        return Windows.Storage.FileIO.readTextAsync(file)
                            .then(function (textFromFile) {
                                var myParsedJsonData = JSON.parse(textFromFile);

                                //this will store all the new animals transferred to zoo
                                var menuItems = new Array();

                                if (myParsedJsonData) {
                                    myParsedJsonData.forEach(function (newObject) {
                                        var newMenutItem = MenuItems.apm_MenuItem.buildMenuItem(newObject);
                                        menuItems.push(newMenutItem);
                                    });
                                }

                                return menuItems;
                            });
                    });

Answer 3

I tried your code (the modification below to keep thing simpler) and it worked just fine. The error you indicate suggests that menuitems.json isn't actually present in the package folder

    function loadMenuItems2(uri) {
        return Windows.Storage.StorageFile.getFileFromApplicationUriAsync(uri)
            .then(function (file) {
                return Windows.Storage.FileIO.readTextAsync(file)
                    .then(function (textFromFile) {
                        var myParsedJsonData = JSON.parse(textFromFile);
                        var menuItems = new Array();

                        if (myParsedJsonData) {
                            console.log(JSON.stringify(myParsedJsonData));
                        }

                        return menuItems;
                    });
            });
    }

So I can only think that the file just isn't there.

By the way, the code above is simpler if you chain the promises instead of nesting them:

    function loadMenuItems (uri) {        
        return Windows.Storage.StorageFile.getFileFromApplicationUriAsync(uri)
            .then(function (file) {
                return Windows.Storage.FileIO.readTextAsync(file);
            }).then(function (textFromFile) {
                var myParsedJsonData = JSON.parse(textFromFile);                
                var menuItems = new Array();

                if (myParsedJsonData) {
                    console.log(JSON.stringify(myParsedJsonData));
                }

                return menuItems;
            });
    }

Kraig

Author, Programming Windows 8 Apps with HTML, CSS, and JavaScript, a free ebook from Microsoft Press