DART lang reading JSON file saved in the client, i.e. without using a server

Question

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();
     httpRequest
       ..open('GET', path)
       ..onLoadEnd.listen((e)=>requestComplete(httpRequest))
       ..send('');
}

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

thanks

Answer 1

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.]

Try:

// THIS DOESN'T WORK IN A BROWSER ENVIRONMENT (aka client side)
import 'dart:io';
import 'dart:convert';


// ...

new File('json/config.json')
    .readAsString()
    .then((fileContents) => json.decode(fileContents))
    .then((jsonData) {
        // do whatever you want with the data
    });

Answer 2

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";
    document.body.children.add(element);
  });
}