react-native-fs: How to read json file content?

Question

Below is my code to read a JSON file which is already downloaded and stored in "TemporaryDirectoryPath".

var fileName = getFileNameFromUrl(url);
RNFS.downloadFile({
  fromUrl: url,
  toFile: `${RNFS.TemporaryDirectoryPath}/`+fileName
}).promise.then(r => {

  var content = RNFS.readFile(`${RNFS.TemporaryDirectoryPath}/`+fileName, 'utf8');
  console.log(content);

});

I am getting an object of type "Promise" as below

Promise {_40: 0, _65: 0, _55: null, _72: null}
_40: 0
_55: "{"show_explanation":1,"answer_result":2, //More json content will be here}"
_65: 1
_72: null

How to read content from that Promise object?

this question is probably a duplicate of: https://stackoverflow.com/questions/49770756/reading-json-file-with-rnfs-on-react-native — Macilias, Nov 22 '19 at 14:49
and since both of them has not been properly answered until yet, I failed a more specific one, with multiple approaches showcasing the state of react-native-fs: https://stackoverflow.com/questions/59028704/how-to-read-json-file-with-react-native-fs?noredirect=1#comment104302248_59028704 — Macilias, Nov 25 '19 at 09:59

score 2 · Answer 1 · answered Dec 15 '17 at 10:07

2

Why dont you just import it with "import"

import AnyName from './pathToYourJSONfile';

I have to write here, low rep for adding comments! :/

answered Dec 15 '17 at 10:07

Mario Rozic

240
2
14

The file is getting downloaded and storing the file name in the local DB, and later I have to read the file content and display. So I don't know what is the filename to import, and there can be multiple files which I may need to download. – Sagar Dec 15 '17 at 10:14
wait ...1st you download this json file from some server and save its name to db ? ...and than you need to import it to your app ? – Mario Rozic Dec 15 '17 at 10:18
I am not importing. I have to read the content of the file which I am downloading from an URL. I updated the code, please refer. – Sagar Dec 15 '17 at 10:21
Do you know whats in that file ? and will it always be the same content? – Mario Rozic Dec 15 '17 at 10:29
No, content will be different. But the content structure will be same. And it's not about a single file, I need to download multiple files. and the number of files to download also not a constant. – Sagar Dec 15 '17 at 10:33
idk rly ..why do you even have to download it ? why dont you just use "fetch" ? – Mario Rozic Dec 15 '17 at 10:36
This is an offline APP. Once I download the files, I don't need internet to make the app work. And my content in those files is fully dynamic. So my user can redownload those files when he connects to the internet and sees new data. When he doesn't have internet, already downloaded files can serve the app to work. – Sagar Dec 15 '17 at 10:41
have you considered using localstorage ? or in this case "AsyncStorage" ? – Mario Rozic Dec 15 '17 at 10:46
I think AsyncStorage is to store key values not to store large files content. If I have to use 100 files (which I do), there is no alternative to downloading those files into the app other than shipping them with the app. In my case shipping with the app is not possible because I need to keep adding new files to my app. So I need to download the files. – Sagar Dec 15 '17 at 10:53
@MarioRozic asked for react-native-fs, which is an alternative one can use for static and dynamic files. The import works only for static files, so this answer is off topic. – Macilias Nov 22 '19 at 14:35

score 0 · Answer 2 · answered Dec 25 '18 at 10:15

You already know RNFS.readFile() return Promise.

So you just need to learn how to use Promise.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then

var fileName = getFileNameFromUrl(url);
RNFS.downloadFile({
  fromUrl: url,
  toFile: `${RNFS.TemporaryDirectoryPath}/` + fileName
})
  .then(r => {
    RNFS.readFile(`${RNFS.TemporaryDirectoryPath}/` + fileName, 'utf8')
      .then(content => {
        console.log(content);
      })
  });

I tried your suggestion, but still the output is: ` { _40: 0, _65: 0, _55: null, _72: null }` — Macilias, Nov 22 '19 at 15:39

score 0 · Answer 3 · answered Nov 27 '19 at 10:36

I had the same problem and managed to finally get the content with following snipped:

let asset_content = null;
try {
    await RNFetchBlob.fs.readFile(assetFile_path, 'utf8')
      .then((data) => {
        asset_content = data;
        console.log("got data: ", data);
      })
      .catch((e) => {
        console.error("got error: ", e);
      })
  } catch (err) {
    console.log('ERROR:', err);
}
const assets = JSON.parse(asset_content);

You might also have to ensure that the content has been saved as 'utf8'

react-native-fs: How to read json file content?

3 Answers3