Nativescript cannot read JSON file

Question

I have the following json:

.../src/app/assets/i18n/en.json

{
  "TEST": "This is a some test data in a json file"
}

I have the following code:

const folderName = "assets/i18n/en.json";
knownFolders.currentApp().getFile(folderName).readText().then(a => console.log("json file: "+ JSON.parse(a))));

It gives me the following error:

ERROR Error: Uncaught (in promise): SyntaxError: Unexpected end of JSON input
JS: SyntaxError: Unexpected end of JSON input
JS:     at JSON.parse (<anonymous>)

I have tried:

Set folderName to "/assets/i18n/en.json"
Rebuild, and reconnect my testing phone
Use HTTP and with this.http.get("~/app/assets/i18n/en.json").toPromise().then(res => console.log("http???", res)).catch(err => console.log("err:", err));
print the object file without parsing it (it's empty...)

But the error stays the same.

update1 it seems, that the file, sadly, does not exists. this code:

const folderName = "assets/i18n";
const fileName = "en.json";

console.log("exists?", File.exists(folderName + "/" + fileName));

returns a false.

Although see the picture provided from the project files. (the code proided is in app.component.ts, in the constructor of AppComponent) What can be the problem here?

update2: updated my webpack.config.js to copy .json files:

new CopyWebpackPlugin([
                { from: { glob: "fonts/**" } },
                { from: { glob: "**/*.jpg" } },
                { from: { glob: "**/*.json" } },
                { from: { glob: "**/*.png" } },
            ], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }),

but still no luck. The file still does not extist...

Update3: This is getting ridiculous... the file can be imported as a standard json file, but the Nativescript lib still does not see it.

import { File } from "tns-core-modules/file-system";
import config from "./assets/i18n/hu.json";
....

        const folderName = "./assets/i18n";
        const fileName = "hu.json";
        console.log("config:", config.test)
        console.log("exists?", File.exists(folderName + "/" + fileName));

this produces the following output:

JS: config: This is a translated line  
JS: exists? false

score 1 · Answer 1 · answered Dec 16 '19 at 17:02

1

AFAIK, the path must be split; you can't request a file with a relative path directly.

const folderName = "assets/i18n";
const fileName = "en.json";

console.log(
 knownFolders.currentApp().getFolder(folderName).getFile(fileName).readTextSync(),
);

answered Dec 16 '19 at 17:02

Ian MacDonald

13,472
2
30
51

sadly, this results in the same, empty string instead of the file contents – ForestG Dec 17 '19 at 12:05
1

It could return empty string only if your file doesn't exists already. Did you make sure the file exists - `File.exists(path.join(knownFolders.currentApp().getFolder(folderName).path, fileName))`? If it's not, it may be webpack not bundling your JSON file. You may have to adjust your webpack configuration. – Manoj Dec 17 '19 at 13:21
yeah, I tried to do it as well, but still no luck. The files won't get copied maybe for some reason? – ForestG Dec 17 '19 at 14:05

score 1 · Answer 2 · answered Dec 18 '19 at 08:26

1

I face similar situation while working on an app. the issue was that the file permissions was not granted.

other way around which worked perfectly, without needing any permission was to fetch the JSON from a url and work through it.

answered Dec 18 '19 at 08:26

macsys

21
5

1

so I need to prompt the user to allow the app to see inside itself? Is there any way not to do that? Putting those files behind a public API sounds like a really bad workaround. I don't want to maintain a server to access files already on the phone – ForestG Dec 18 '19 at 14:02

Nativescript cannot read JSON file

2 Answers2