I'm trying to read data from JSON file, using the blow code:

void makeRequest(Event e){  
     var path='json/config.json';
     var httpRequest= new HttpRequest();
       ..open('GET', path)

this worked very well when the app run as http:// .../ index.html, but gave the below error when trying to open it as file:///.../index.html

Exception: NetworkError: Failed to load 'file:///D:/DartApp/web/json/config.json'. main.dart:53makeRequest main.dart:53<anonymous closure>

Is there another way, other than httpRequest that can read JSON file from client side!

I understand I've 3 options, 2 of them only can use HttPRequest, which are:

  1. saving the file of the server, and reading it from the server => can use HttpRequesit
  2. saving the file on the server, and reading it from the client => can use HttpRequesit
  3. saving the file on the client, and reading it from the client itself => CAN NOT use HTTPRequest

I'm searching for the way to do the 3rd option, which is like making off-line Android App using webview, or making off-line Chrome packaged app, i.e I do not want to use a server at all. thanks


  • When using chrome packaged app you can use the chrome.fileSystem interface - see developer.chrome.com/apps/fileSystem and developer.chrome.com/apps/api_index . – Robert Sep 4 '14 at 9:55
  • I'll check it, but what about if I want to use WebView in Android app, or if I want to make Mozilla/firefox app. thanks – Hasan A Yousef Sep 4 '14 at 10:11
  • Then you have to deliver different versions of your app. You have to abstract the file access functions. Thus provide an own interface of reading the file. And then you can have concrete implementations for each version e.g. server-side, firefox app, android app etc. If I understand correctly you want to use dart and then dart2js. This all required that all of the platforms support some kind of file access via javascript. – Robert Sep 4 '14 at 12:50

If all you need is the data in the json file, you can just include that data in your .dart files (as a Map variable/constant, for example).

Map config = {
   "displayName": "My Display Name",
     "anotherProperty": 42,
     "complexProperty": {
         "value_1": "actual value",
         "value_2": "another value"

If you need the actual json, you can put in a String. Something like:

const configJson = '''
   { "displayName": "My Display Name",
     "anotherProperty": 42,
     "complexProperty": {
         "value_1": "actual value",
         "value_2": "another value"

The json data can be in a separate .dart file, which can be included as part of the same library (through part of ...), or imported (import 'package:mypackage/json.dart';).

If you're looking for something that you can change and the changes are persisted, you're going to need to use some sort of offline storage, which can be web storage if you're running in a browser. You can use the approach above to define inital config data, store it in web storage, and from then on read and edit it from there.

[Previous answer below, before original question was edited.]

Sorry, read "client side", thought "server side". My mistake.

If by "client side" you mean "running in a browser", and you're trying to access a json file which is on the server, then no, there isn't any other way, other than an http request. In fact, that's the only way to read any file on the server, not just json ones. (Well, I guess you could open a WebSocket and stream the content, but that doesn't seem to be a solution you're looking for.)

[Old solution below, before my mistake (server vs client) was pointed out.]


import 'dart:io';
import 'dart:convert';

// ...

new File('json/config.json')
    .then((fileContents) => json.decode(fileContents))
    .then((jsonData) {
        // do whatever you want with the data
  • 1
    The dart:io library is aimed at server-side code that runs on the standalone Dart VM, so will not work on the client! dartlang.org/articles/io – Hasan A Yousef Sep 3 '14 at 20:56
  • Doh! Not sure why, but I read "client side" and thought "server side". Sorry! – Tonio Sep 3 '14 at 20:57
  • Thanks a lot, exactly what I want :) – Hasan A Yousef Sep 4 '14 at 20:15

This poor example works fine in the chrome dev editor dart web app example. Using HttpRequest.getString works fine with filename and path.

Chris has a good write for json web service stuff at https://www.dartlang.org/articles/json-web-service/

import 'dart:html';
import 'dart:convert';

void main() {
  HttpRequest.getString('json/config.json').then((myjson) {
    Map data = JSON.decode(myjson); 
    var version = data["version"];
    var element = new DivElement();
    element.text = "version = $version";
  • I think you are running it from http://.. try it from file:// and feed us back, thanks – Hasan A Yousef Sep 6 '14 at 13:36
  • HttpRequest.getString('json/config.json') works fine, but HttpRequest.getString('file://json/config.json') I get this error - XMLHttpRequest cannot load file://config.json/. Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource. – seb Sep 6 '14 at 16:14
  • I copied your code, and got this error; XMLHttpRequest cannot load file:///D:/myapp/web/json/config.json. Cross origin requests are only supported for HTTP. – Hasan A Yousef Sep 6 '14 at 19:32
  • Yeah I fired up my linux box and ran dartium and got your error for a dart web page. I think if you create a dart chrome app it will have local file access. I will give this a go on my linux box when I get a chance. VNC to it has been crashing from chromeos. – seb Sep 8 '14 at 10:31

Your Answer

