如何在 JSON 文件中导出对象数组，然后使用 es6 导入 [重复]

Posted 2023-02-22

【中文标题】如何在 JSON 文件中导出对象数组，然后使用 es6 导入 [重复]

【英文标题】：How to export an array of objects in a JSON file and then import using es6 [duplicate]

【发布时间】：2019-06-28 12:18:58

【问题描述】：

我在 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 导入带有 objects 文件的“.json”文件（不是“.js”）？

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

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

【问题讨论】：

到底在抱怨什么？

Export 是 ES6 的特性，不是 JSON 的特性，JSON 是与 ES6 不同的标准，rfc7159

请提供一个最小的、可验证的、完整的示例。看到这个：***.com/help/mcve

我已经更新了代码来演示我想要做什么，基本上我想让这个文件中的数据可以被导入到另一个文件中的变量中，例如"从'sample.json'导入样本

@jobe：或者您是否从console.log(data.id) 确定“没有数据”产生undefined？应该是data[0].id，因为导出的是一个数组。

【参考方案1】：

由于您存储为 JSON extension，因此您不应使用 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'

【讨论】：

然后如何导入以在另一个文件中使用？我也尝试过这种方法，但是没有数据出现在另一个文件中？如果两个文件都在同一个文件夹中，导入语句会如何？

@jobe 你可以在这里看到repl.it/@VivekJain1/ImportantFriendlyWebmaster

是否可以在 es6 中使用模块和导入语句来做到这一点？我认为它们可以用来代替 require 语句。这是确切的问题。

@jobe 是的，我们只需要设置转译器即可。我不熟悉REPL，但等一下，让我尝试一下

好的 - 我也在阅读其他一些帖子。

【参考方案2】：

默认 html 标准禁止导入不作为*/javascript 的文件的一种解决方法是使用fetch() 获取文件，然后export 结果为default 和import data URL

<script type="module">
  (async() => 
    let default:sample = await import(`data:application/javascript,$encodeURIComponent('export default ')$JSON.stringify(await(await fetch('file.json')).json())`);
    console.log(sample);
  )()
</script>

plnkr

另见ES6 modules in local files - The server responded with a non-JavaScript MIME type

【讨论】：

@guest271314 我会尝试，但我的一位开发人员朋友提到不必更改文件扩展名以使其工作 - 它确实按照你的建议工作，但我想看看是否JSON 扩展方法将起作用。

@jobe Failed to load module script: The server responded with a non-JavaScript MIME type of "application/json". Strict MIME type checking is enforced for module scripts per HTML spec. 你的“开发者朋友”是否与你分享了工作代码来证明他们的主张？

@guest271314 不，他不认为这是我的学习练习，以使其发挥作用。他确实向我展示了一个带有 JSON 文件的工作版本，但没有详细说明。

@KamilKiełczewski 您如何建议将export 包含在有效的JSON 文件中？

@guest271314 感谢您的回答，我正在尝试找到一种使用 JSON 文件扩展名的方法。