Using DART language to read a JSON file stored locally on the client side, eliminating the need for a server

Question

Using DART language to read a JSON file stored locally on the client side, eliminating the need for a server

Having some trouble reading data from a JSON file with the following code:

void fetchData(Event e){  
     var path='json/data.json';
     var request= new HttpRequest();
     request
       ..open('GET', path)
       ..onLoadEnd.listen((e)=>handleResponse(request))
       ..send('');
}

Everything works fine when running the app as http:// .../ index.html, but encountered an error when trying to open it as file:///.../index.html

Exception: NetworkError: Failed to load 'file:///D:/SampleApp/web/json/data.json'. main.dart:53fetchData main.dart:53<anonymous closure>

I'm wondering if there is another method besides using httpRequest to read a JSON file on the client side!

As far as I can tell, I have 3 options, two of which involve using HttPRequest:

Saving the file on the server and fetching it remotely => can use HttpRequesit
Saving the file on the server and loading it from the client => can use HttpRequesit
Saving the file directly on the client and reading it there => CAN NOT use HTTPRequest

I am particularly interested in pursuing the third option, similar to creating an offline Android App using webview or an offline Chrome packaged app. In this case, I do not want to rely on a server at all. Thank you

Thanks again

json dart

Answer 1

Answer №1

If you only require the data in the json file, you can simply embed that data within your .dart files (such as a Map variable/constant).

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

If you need the actual json content, you can store it as a String. For instance:

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

The json data could be placed in a separate .dart file, which may then be included within the same library using part of ..., or imported using

import 'package:mypackage/json.dart';

.

If you are seeking a solution where changes persist, offline storage will be required. This could be achieved with web storage if operating within a browser environment. You can follow the method above to define initial configuration data, save it in web storage, and subsequently read and update it from there.

[Previous response below, prior to original question editing.]

Apologies for the confusion earlier when mentioning "client side" instead of "server side". My error.

If by "client side", you mean running in a browser and attempting to access a json file on the server, then HTTP requests are indeed necessary. This is the sole method to read any file on the server, including json ones. (Alternatively, establishing a WebSocket connection to stream the content could be considered, although it might not align with what you're seeking.)

[Original solution provided before acknowledging the mistake between server and client environments:]

You can attempt:

// NOTE: THIS APPROACH IS NOT SUITABLE FOR BROWSER ENVIRONMENTS (i.e., CLIENT SIDE)
import 'dart:io';
import 'dart:convert';


// ...

new File('json/config.json')
    .readAsString()
    .then((fileContents) => json.decode(fileContents))
    .then((jsonData) {
        // perform actions based on the received data
    });

Answer 2

If you only require the data in the json file, you can simply embed that data within your .dart files (such as a Map variable/constant).

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

If you need the actual json content, you can store it as a String. For instance:

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

The json data could be placed in a separate .dart file, which may then be included within the same library using part of ..., or imported using

import 'package:mypackage/json.dart';

.

If you are seeking a solution where changes persist, offline storage will be required. This could be achieved with web storage if operating within a browser environment. You can follow the method above to define initial configuration data, save it in web storage, and subsequently read and update it from there.

[Previous response below, prior to original question editing.]

Apologies for the confusion earlier when mentioning "client side" instead of "server side". My error.

If by "client side", you mean running in a browser and attempting to access a json file on the server, then HTTP requests are indeed necessary. This is the sole method to read any file on the server, including json ones. (Alternatively, establishing a WebSocket connection to stream the content could be considered, although it might not align with what you're seeking.)

[Original solution provided before acknowledging the mistake between server and client environments:]

You can attempt:

// NOTE: THIS APPROACH IS NOT SUITABLE FOR BROWSER ENVIRONMENTS (i.e., CLIENT SIDE)
import 'dart:io';
import 'dart:convert';


// ...

new File('json/config.json')
    .readAsString()
    .then((fileContents) => json.decode(fileContents))
    .then((jsonData) {
        // perform actions based on the received data
    });

Answer 3

Answer №2

This particular example functions perfectly within the chrome development editor for a dart web application. Utilizing HttpRequest.getString is effective when working with filenames and paths.

For more information on handling json web services, check out Chris' informative article at

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);
  });
}

Answer 4

This particular example functions perfectly within the chrome development editor for a dart web application. Utilizing HttpRequest.getString is effective when working with filenames and paths.

For more information on handling json web services, check out Chris' informative article at

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);
  });
}

Using DART language to read a JSON file stored locally on the client side, eliminating the need for a server

Answer №1

Answer №2

Similar questions

How can I update my outdated manifest v2 code to manifest v3 for my Google Chrome Extension?

What is the process of using an if statement in jQuery to verify the existence of a property in a JSON file?

fullcalendar adjusting color while being moved

Utilizing Javascript to Extract Data from Twitter Json Files

Modifying the color of a variety of distinct data points

CSS background image referencing in React to the public folder's path

Is it acceptable to replicate another individual's WordPress theme and website design in order to create my own WordPress website that looks identical to theirs?

Trouble displaying data in Jquery JSON

What is the best way to create a unique shadow effect for a container in Flutter?

Retrieve jQuery CSS styles from a JSON database

What is the best way to add custom styles to an Ext JS 'tabpanel' xtype using the 'style

Why is the toggle list not functioning properly following the JSON data load?

Is there a way to open an HTML file within the current Chrome app window?