Reading A Local JSON File With NativeScript

FileReader.md

In NativeScript, the http module doesn't currently support making network requests to the local file system. That work is intended to be done by the file reader. It's pretty simple to read a local file and parse its contents as JSON.

This is the TypeScript/Promise version of what Emil Oberg created for the same question on StackOverflow. This module should be reusable for any and all asyncronous local JSON read operations.

import * as fs from 'file-system';

var documents = fs.knownFolders.currentApp();

class FileReader {
    static readJSON(path: string) {
        var jsonFile = documents.getFile(path);
        return new Promise<Object>((resolve, reject) => {
            try {
                
                jsonFile.readText().then((content: string) => {
                    let data = <Array<Object>>JSON.parse(content);
                    resolve(data);   
                });
                        
            }
            catch (err) {
                reject(err);
            }
        });
    }   
}

export default FileReader;

const A = require('./assets/my.json');
have fun

move this line let jsonFile = documents.getFile(path); inside the let{} so if the JSON file doesn't exist, the thrown error is caught and returned with the Promise.

Also to note, the file path always defaults to the app root, not the current file directory. :)

Personally I added this method into my own little Utility class, works a treat. Returns raw JSON data so that other functions that call this method can parse the JSON through different interfaces (so JSON data is output as a specific type of object). Here's my code:

import * as fs from 'file-system';

export default class Utility {
   static loadJSON(path: string) {
	let documents = fs.knownFolders.currentApp();
	return new Promise<Object>((resolve, reject) => {
		try {
			let jsonFile = documents.getFile(path);
			resolve( jsonFile.readText() )					
		}
		catch (err) {
			reject(err);
		}
	});
   }

}

With TypeScript 2.9.x and above we can now use resolveJsonModule and directly treat JSON files as modules. Sample project here.

Example

// config.json
{
    "count": 42,
    "users": [
        {"name": "John", "age": 35},
        {"name": "Ann", "age": 32},
        {"name": "George", "age": 24},
        {"name": "Mary", "age": 27},
        {"name": "Vivian", "age": 21}
    ],
    "env": "debug"
}

// your-typescript-file.ts
import config from "./config.json";

console.log(config.count); // 42
console.log(config.env); // "debug"

// tsconfig.json
{
    "compilerOptions": {
        "module": "commonjs",
        "resolveJsonModule": true,
        "esModuleInterop": true
    }
}