Can't import JSON in react

Question

I'm having what I'm sure it's a stupid problem but I can't seem to find a way around it.

I have a react application and I'm trying to import a JSON file. Here it is:

{ 
   "words":{ 
      "ita":[ 
         "ora",
         "via",
         "dio",
         "sud",
         "don",
         "zia"
      ]
   }
}

And here's the react code:

import React, { Component} from 'react'

import words from 'Assets/Words.json'

console.log(words)
console.log(words.ita)

export default class WordsGen extends Component {
  ...

The two console.log print, respectively:

{words: {…}}
  words:
    ita: (6) ["ora", "via", "dio", "sud", "don", "zia"]
  __proto__: Object
__proto__: Object

and undefined.

I'm using the json file to put more languages in the app, but I can't understand why when I print just words I can see the property ita inside, and when I try to print words.ita or words["ita"] I get undefined.

What am I missing?

ageoff · Accepted Answer · 2019-11-13 22:02:45Z

7

Should be:

words.words.ita

You are importing as "words" and then the object has a words object. It might be more clear to change the import name:

import MyJson from 'my.json';

console.log(MyJson.words.ita)

answered Nov 13, 2019 at 22:02

ageoff

2,8282 gold badges28 silver badges42 bronze badges

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

1 Comment

Tristan Over a year ago

In theory, you could also use object spreading to import it with import { words } from 'my.json'. Then it could be used as the author intended (words.ita).

Jahongir · Accepted Answer · 2019-11-13 23:01:14Z

0

Because your imported object words contains whole json. When you write

import words from 'Assets/Words.json';

it will become

words = { 
   words:{ 
      ita:[ 
         "ora",
         "via",
         "dio",
         "sud",
         "don",
         "zia"
      ]
   }
}

That's why your object words doesn't really have property ita. That's why it will return undefined.

You need to write words.words.ita. For better code-style:

/// words.json
{ 
   "ita":[ 
       "ora",
       "via",
       "dio",
       "sud",
       "don",
       "zia"
      ]
}

import words from 'Assets/Words.json';
words.ita // then your code

/// or even better with new es6 destructing
import {ita = []} from 'Assets/Words.json';

ita // do anything that you want

edited Nov 13, 2019 at 23:01

answered Nov 13, 2019 at 22:19

Jahongir

1412 silver badges7 bronze badges

Collectives™ on Stack Overflow

Can't import JSON in react

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related