Как импортировать json в js

Question

Вячеслав Межуревский · Accepted Answer

Для того чтобы "распарсить" json-данные, и превратить их в js-объект, достаточно использовать метод [JSON.parse()](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse).  
```js
// Читаем json-файл, результатом в data будет строка
const readFile = fs.readFileSync('jsonex.json', 'utf8');
console.log(readFile);
/* Результат:
{ 
  "id": "1",
  "firstName": "Tom",
  "lastName": "Cruise"
}
*/
const parsedData = JSON.parse(readFile);
// После парсинга переменной мы получаем объект, к свойствам которого можно обращаться как обычно — например, через "." 
console.log(parsedData.firstName);
// Результат: Tom
```

Кирилл Маркеев · Answer

К приятным особенностям `json`-формата относится то, что его можно импортировать в нужном нам модуле напрямую, не используя методы для чтения файлов, такие как `fs.readFileSync()`. Дело в том, что метод `fs.readFileSync()` и другие относятся к среде `node.js` и не будут работать в браузере, а попытка их импорта, например, внутри React-приложения: 
```javascript
import { readFileSync } from 'node:fs';
``` 
приведет к падениям и ошибкам. 

Предположим, у нас есть следующие данные в формате `json`:
```json
{"widget": {
  "debug": "on",
  "window": {
    "title": "Sample Konfabulator Widget",
    "name": "main_window",
    "width": 500,
    "height": 500
  }
}}
```

Сохраним эти данные внутри нашего приложения по адресу `data/example.json`. А потом просто импортируем их там, где они нам нужны, не забыв указать правильный путь:
```javascript
import exampleJsonFile from './data/example.json'; // имя при импорте может не совпадать с именем файла
```

Еще одна важная особенность заключается в том, что при таком способе данные парсятся автоматически, и нет необходимости использовать `JSON.parse()`:

```javascript
// вывод смотрим в инструментах разработчика (F12)

console.log(typeof exampleJsonFile); // => object
console.log(exampleJsonFile.widget) // => {debug: 'on', window: {…}}
console.log(exampleJsonFile.widget.window.title); // => Sample Konfabulator Widget
```

Как импортировать json в js

Ответы

Каталог