Reactjs error reading a Javascript Object Notation

Question

I have 2 codes.

1.this giving error:

import userdata from "./data.json";
userdata = userdata.userdata;
userdata.map() // do map here.

that giving error: Uncaught TypeError: Cannot read properties of undefined (reading 'userdata')

import userdata from "./data.json";
userdata.userdata.map() // do map here.

json: {"userdata":[{name, job}, {name, job}]}

why the second code is working?

Are both functions called from the same directory? If not, the import for the 1st piece of code might not be pointing to the correct file. — adrian, Jan 26 '22 at 06:52
Does this answer your question? [Import JSON file in React](https://stackoverflow.com/questions/39686035/import-json-file-in-react) — kiner_shah, Jan 26 '22 at 07:05

score 0 · Accepted Answer · answered Jan 26 '22 at 07:05

In the first example you import userdata and then try to assign it the value of userdata.userdata.

This isn't possible as you can't assign a new value to an import.

Therefore when you try map over userdata it is still trying to map over userdata from the initial import (and not userdata.userdata).

If you want this to work rather use a new variable name like below:

import userdata from "./data.json";

const userDataArray=userdata.userdata;
userDataArray.map()

In the second example, you reference the array correctly (with userdata.userdata), instead of trying to assign a value to the import.

1 Answers1