Import Array from JSON File into Typescript File

Question

I have a JSON file which contains an array object as such :

[
  {
    "VergiNo": "XXXXXXX"
  },
  {
    "VergiNo": "YYYYYY"
  },
  {
    "VergiNo": "ZZZZZZ"
  }
]

and I import this JSON file to my Typescript file

import * as firmalar from "../firmalar.json";

const firmaPromises = firmalar.map((firma) => firma.VergiNo + "XYZ");

Above code gives no syntax error, however when I run the application and debug it, firmalar object is seen as object not an array, so it doesn't process map method.

Is there anything wrong that I'm doing here?

firmalar.json file return string just parse it with JSON.parse(firmalar). — Arsalan Akhtar
– Arsalan Akhtar, Commented Mar 12, 2020 at 8:59

Piran · Accepted Answer · 2021-04-12 19:29:13Z

10

To import the JSON data, you should use:

import firmalar from "../firmalar.json";

This will import it without changing it, and you'll get an array.

When you did the import with * as firmalar it tries to convert the JSON into a module, which is a kind of Object. Inspecting it you'll see it has Object style accessors, so that firmalar[0] will work, but firmalar.length will not.

answered Apr 12, 2021 at 19:29

Piran

7,3371 gold badge26 silver badges43 bronze badges

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

1 Comment

cyclic Over a year ago

This works great! However you need to add the allowSyntheticDefaultImports flag to your tsconfig.json and set it to true

serkanz · Accepted Answer · 2020-03-12 11:15:27Z

2

I ended up with using require() to get JSON and cast it to my object after that like this :

// eslint-disable-next-line @typescript-eslint/no-var-requires
const firmalar = require("./firmalar.json");

// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
const firmalarArray: { VergiNo: string }[] = firmalar;

Now it works as expected. This post helped me to find the solution.

answered Mar 12, 2020 at 11:15

serkanz

46111 silver badges24 bronze badges

Comments

Roberto Zvjerković · Accepted Answer · 2020-03-12 08:57:40Z

1

You're importing a whole module.

You can either import only that constant:

import { yourArray } from "../firmalar.json";

Or extract the array from the module:

const firmalarArray = JSON.parse(firmalar.yourArray);

answered Mar 12, 2020 at 8:57

Roberto Zvjerković

10.2k4 gold badges31 silver badges49 bronze badges

Comments

d-h-e · Accepted Answer · 2020-03-12 10:41:26Z

1

I would try to parse the JSON. That should return you an array.

import * as firmalar from "../firmalar.json";

const firmalarArray = JSON.parse(firmalar);
const firmaPromises = firmalarArray.map((firma) => firma.VergiNo + "XYZ");

edited Mar 12, 2020 at 10:41

answered Mar 12, 2020 at 8:52

d-h-e

2,5581 gold badge13 silver badges20 bronze badges

1 Comment

serkanz Over a year ago

this gives a syntax error as firmalar isn't recognized as string. Even if I use : const firmalarArray: [{ VergiNo: string }] = JSON.parse(firmalar.toString()); it doesn't work in runtime.

Collectives™ on Stack Overflow

Import Array from JSON File into Typescript File

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related