use require in the ts file to import json file dynamically

Question

Can require be used in a typescript file in the web app to import a json file locally?

export function getData(id: string): string {
    const ids: string = id + 'something'; 
    const data = require(`./config/${ids}.json`);

    return JSON.stringify(data);
}

That depends entirely upon how you're building your web app from typescript source. I think we'll need some more information. — CollinD
– CollinD, Commented Jan 15, 2022 at 0:01
can you elaborate a bit on it? I am not sure on what parameters it depends or what are the more info you need me to include? — AlreadyLost
– AlreadyLost, Commented Jan 15, 2022 at 0:04
Most (all?) browsers don't run typescript. In order to use typescript in a web app, you must transpile it somehow. The process that you use to transpile influences whether this is possible. For example, if using webpack or esbuild or parcel this is probably pretty easy. If just using tsc then maybe less-so and you might need to look into a bundler. — CollinD
– CollinD, Commented Jan 15, 2022 at 0:05
Thank you, this is helpful. We use webpeck as a bundler. Is it possible with Webpack? will this work or I need to change or add something to webpack config? — AlreadyLost
– AlreadyLost, Commented Jan 15, 2022 at 0:06
Does this answer your question? Importing JSON file in TypeScript Also webpack docs say this just works out of the box. v4.webpack.js.org/loaders/json-loader Should just work I suppose? — CollinD
– CollinD, Commented Jan 15, 2022 at 0:07

jsejcksn · Accepted Answer · 2022-01-15 01:02:22Z

3

If you want a JSON string from a file at a relative address in the same origin as your web app, you can use this function:

TS Playground

export async function getJsonById(id: string):Promise<string> {
  const url = `./output/config/${id}something.json`;
  const json = (await fetch(url)).text(); // this is a string (JSON is a string)
  return json;
  // alternatively: to parse the JSON into a native JS data type
  // return JSON.parse(json);
}

// use:
const json = await getJsonById('id');

edited Jan 15, 2022 at 1:02

answered Jan 15, 2022 at 0:57

jsejcksn

34.6k5 gold badges55 silver badges79 bronze badges

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

9 Comments

AlreadyLost Over a year ago

awesome, didn't know that. Thank you. yes it is in the same origin

AlreadyLost Over a year ago

it seems it has this issue? stackoverflow.com/questions/50007055/…

jsejcksn Over a year ago

@AlreadyLost Is this a React project?

AlreadyLost Over a year ago

yes, it is a monorepo written mostly in react, the packages are used in a react app

jsejcksn Over a year ago

Then the problem is not with your React app, but with the server. If the files aren't at the address, then it means that the server isn't serving them at that address. You'll have to determine the address at which the JSON files are being served.

|

Collectives™ on Stack Overflow

use require in the ts file to import json file dynamically

1 Answer 1

9 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Linked

Related