Import files and data (JSON parser)

[dr.ugi]

Hi,

 

I need to get JSON file from local folder or/and server and parse it in my game. If there a function to do it? 

[Chris]

You cannot directly load and parse a JSON text file at the moment.

 

To load any text file, just call 

game.load.text('someData', '/my/file.json');

Do this inside the preload() method of any state.

 

 

 

To access the JSON data after the text file has been loaded, you can call:

var jsonData = JSON.parse(game.cache.getText('someData'));

BUT! You have to make sure that the data has been loaded already, so do it OUTSIDE the preload() method of a state. The best place would be the create() method of the state.

You could also apply a little "hack", to convert the text only once to JSON and then write it back to the cache:

game.cache._text['someData'] = JSON.parse(game.cache.getText('someData'));

This way, you can just directly access the JSON object that has been transported in the text file anywhere in your game, for example if you had a "inventory" property inside the JSON object:

var inventory = game.cache.getText('someData').inventory;

I don't know why the loader class currently has no explicit method to load and parse JSON files. Maybe it will be added in a later version.

Edited November 1, 2013 by Chris
Flipped the key and url parameter in the first code example.

[dr.ugi]

Hi,

Thanks for a quick replay. 

 

I keep getting error:

"'(whole disk path)/someData' 404 not found"

 

I placed the file but Phaser is looking for a file under Tag name?... Not sure what's going on. If I place file name in both places: 

game.load.text('/my/file.json', '/my/file.json');

There's no error... Do you have an idea what I'm doing wrong?

 

Thanks

[Chris]

Did you set up a local web server to serve your game to the browser? I haven't tried just opening a local HTML file with phaser in the browser, but I can assume that in most browsers, the XHR calls phaser is making to load the textfiles will just fail when the browser serves the document from a local file context, instead from a server URL.

 

Try setting up a local webserver and open your game through a "real" url.

[dr.ugi]

I found this:

 text: function (key, url, overwrite) {                if (typeof overwrite === "undefined") { overwrite = false; }                if (overwrite || this.checkKeyExists(key) == false)                {                        this.addToFileList('text', key, url);                }                return this;        },

So key is first and then URL. But even when I changed that, it still doesn't work for me :/

[Chris]

You are right, I have accidentially flipped key and url. I'll update my previous post.

 

You should go ahead and look if the files still can't be loaded when served from a http context rather than a file context.

[dr.ugi]

Ok,

 

It all works now with remote URL. 

 

thanks a lot for the help!

[Michel (Starnut)]

Hi, I tried this approach with Phaser 1.1.2 and it works quite fine, except for the bit that it, now, should read

game.cache._text['someData'].data = JSON.parse(game.cache.getText('someData'));

instead of 

game.cache._text['someData'] = JSON.parse(game.cache.getText('someData'));

The text object in the cache now seems to have a data property.

 

For the sake of completeness: If you're working with the BasicGame project template just load the file in the preload function of the Preloader state

this.load.text('someData', '/my/file.json');

and then parse it in the create function of the same state before switching to the MainMenu state:

this.cache._text['someData'].data = JSON.parse(this.cache.getText('someData'));

From then on you can access the parsed object in any other state via

this.cache.getText('someData');

[uPDATE]

 

With newer Phaser versions (probably from 2.0 onward) you can simply use

game.load.json('someData', '/my/file.json');

skip the manual parsing and access the parsed JSON via

var myJSON = game.cache.getJSON('someData');

[rahulng]

After doing these 3 steps

game.load.text('someData', '/my/file.json');

var jsonData = JSON.parse(game.cache.getText('someData'));

game.cache._text['someData'] = JSON.parse(game.cache.getText('someData'));

 

how do I display the the Json p[roperties as text on the page?

[Pooya72]

This example is about your problem :
http://phaser.io/examples/v2/loader/load-json-file