Programmatically importing local json file react-native

Question

I have a hand full of json objects I need to load into a react native app. I couldn't find much documentation on how import sample from '../data/Sample.json'; imports. I will only need to load 1 file depending on what the user selects and I am not sure if I just import all 12 files (1mb total) if that will be more impactful on performance than I need. Is there a way I can selectively load a json file depending on state or user input?

Have you tried require() for importing it? You could set a variable string to the file you need programmatically and call require(pathToRequiredFile) to load it. However, require caches your files for future use, so keep that in mind of you use it. — Uzair A.
– Uzair A., Commented Oct 23, 2018 at 3:34
Im not sure how that would work, could you show me an example or point me in the direction of the documentation on require? — Nogg
– Nogg, Commented Oct 23, 2018 at 3:37
How will you decide which of the 12 files needs to be imported? Based on some variable, etc? — Uzair A.
– Uzair A., Commented Oct 23, 2018 at 4:17

Uzair A. · Accepted Answer · 2018-10-29 03:30:48Z

1

Put the links to the JSON files in an array and use require() as needed:

links = [
  'link_to_file_1.json',
  'link_to_file_2.json',
  // and so on...
];

loadMyFile = (index) => {  // Call this function with required index of list

    if (index)
    {
      let fileUrl = require(links[index]);

      // parse file, perform required actions ...
    }
}

edited Oct 29, 2018 at 3:30

answered Oct 23, 2018 at 4:24

Uzair A.

1,6482 gold badges15 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Nogg Over a year ago

Thanks, ill try this out. Looks promising.

Nogg Over a year ago

Pops an error: "calls to 'require' expect exactly 1 string literal argument, but this was found 'require(links[index])'

Uzair A. Over a year ago

How are you calling the method?

Collectives™ on Stack Overflow

Programmatically importing local json file react-native

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related