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;

FWIW...I also modified Burke's original slightly. Here's what I'm using:

import * as fs from "file-system";
let documents = fs.knownFolders.currentApp();

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

To use this somewhere in app code:

import { FileReader } from "../path/to/fileReader";
FileReader.readJSON("data/file.json")
                .then((response) => {
                    resolve(response);
                })
                .catch((err) => {
                    reject(err);
                });

Hope it helps someone. Note the path to the JSON file is always relative to the root app directory.

I am trying to parse a local JSON file and add/push its content to an array named sideDrawerItemsFromJson, but when I try to push the JSON content to thi sarray, I am getting a null pointer exception. I have initialized this array in the beginning, I dont know where I am missing the trick, please look into it,Thanks

var fs = require('file-system');
var documents = fs.knownFolders.currentApp();
var jsonFile = documents.getFile('pages/shell-drawer/Shell.json');
var jsonData;
let drawerItem;

jsonFile.readText().then(function (content) {
    try {
        console.log("JSON Content to parse: " + "\n" + content);
        jsonData = JSON.parse(content);
        let data = <Array<Object>>JSON.parse(content);
        console.log("Number of Menu Group Items: " + jsonData.SideDrawerItems.length);

        for (let j = 0; j < jsonData.SideDrawerItems.length; j++) {

            drawerItem = new SideDrawerMenuItem(jsonData.SideDrawerItems[j].name, jsonData.SideDrawerItems[j].sideDrawerChildItems, jsonData.SideDrawerItems[j].hasChild);
            console.log("Menu Group Name is: " + drawerItem.name + "\n");
            console.log("This Menu Group Has " + drawerItem.sideDrawerChildItems.length + " Menu Items ");
            for (let k = 0; k < drawerItem.sideDrawerChildItems.length; k++) {
                console.log("Menu Item Name " + drawerItem.sideDrawerChildItems[k].name + "\n");
            }

            //TODO - Implement a most suitable to add parsed JSON Objects an array Object(Instance/Class variable).
            this.sideDrawerItemsFromJson.push(drawerItem);
        }

    } catch (err) {
        console.log('Could not parse JSON file' + err.toString());
    }
}, this.handleErrors);

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