javascript - 如何导出 JSON 文件中的对象数组,然后使用 es6 导入

标签 javascript json ecmascript-6 es6-modules

<分区>

我在 json 文件中有一个对象数组。我正在尝试将此文件导入另一个文件,以便我可以在简单的 React 项目中引用数据。

我已经尝试了导出默认和命名导出的各种组合,但是当我保存它时,JSON 文件总是报错。这是我想要实现的目标:

(文件 1.json)

    [
      {
        "userId": 1,
        "id": 1,
        "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
        "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
      }
    ]

文件2.js

import data from '.\file1.json'

console.log(data.id);

我遇到的问题是我在我的 JS 文件中没有看到任何错误,但没有显示 data.id 值。但是,在我的 JSON 文件中,我在导出它以供使用时遇到问题。

问题:如何使用 es6 导入带有对象文件的“.json”文件(不是“.js”)?

更新 我设法让它在 create-react-app 环境中工作,我将 json 文件保留为对象数组,然后在 js我使用的文件“从'./xyz'导入xyx;”

这对我有用,重复标记的帖子中没有提到这个答案,所以我认为它应该有自己的答案 - 希望这对其他人有帮助。

最佳答案

由于您存储为 JSON 扩展名,因此您不应使用 export const data = ...

你应该直接存储数据

xyz.json

[
      {
        "userId": 1,
        "id": 1,
        "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
        "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
      }
    ]

JSON

For demo you can see this

或者你可以将扩展名设置为.js

const export data = ...some data

在需要的地方

import {data} from '../filepath'

关于javascript - 如何导出 JSON 文件中的对象数组,然后使用 es6 导入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54521555/

相关文章:

json - Symfony2 HHVM 3.4 序列化程序问题

javascript - gulp babel,导出未定义

javascript - 使用 JQuery 在 AJAX 上成功迭代 JSON 数据

php 数组到 javascript 对象

javascript - 单击图像上复制图像位置

javascript - 如何让我的音频在 socket.io 中播放?

ios - 隐蔽 3 级嵌套 json 到 Alamofire 参数

javascript - 在模板文字中传递 onclick 事件

javascript - 在 Node 0.11 w/Foo.prototype 中使用 ES6 箭头函数

javascript - 如何在 JavaScript 中按值过滤字典?