0

I'm changing the code of a working react app. There is a piece of code that imports and process a couple of json files:

    import dataAjson from "./data/a.json";
    import dataBjson from "./data/b.json";

    datasets = [
              {
                info: {id: 'a'},
                data: processGeojson(dataAjson)
              },
              {
                info: {id: 'b'},
                data: processGeojson(dataBjson)
              }
            ]

I want to change this code so it will automatically process all files from the ./data folder. I'm a newbie to TypeScript tool chain, and I don't know all the impacts that changing the import will have in my app.

The data files are somewhat large. All the files will be present in the data folder when the app starts. Since react executes in the client, maybe I must make a get request.

What's the best way to load these files? Or what are the pros and cons of each approach?

neves
  • 33,186
  • 27
  • 159
  • 192

1 Answers1

0

A simple way to do this is to use fs module to read the directory ./data and filter the files that end with .json and import it.

xRokz
  • 19
  • 4
  • Thanks for the answer. But I'd like to know does it affect the app. Is it async? How will it affect the app load time? And the build time? – neves Aug 29 '20 at 00:17
  • as long i knew it don't use async – xRokz Aug 29 '20 at 00:38
  • here is an fs in typescript https://stackoverflow.com/questions/43048113/use-fs-in-typescript – xRokz Aug 29 '20 at 00:41
  • Builtin modules are not supported in the browser. Reading files with `fs` will not cause them to be bundled like when using the import keyword – Patrick Roberts Aug 29 '20 at 15:57