Javascript，读取文件夹中的文件

Question

我有一个大文件格式“json”。 当您在浏览器中打开页面时，我需要使用此信息。 唯一的解决方案 - 是将数据放入“.js”文件中的变量中，但结果是 5000 行。 也许有读取数据的选项？ 我在文件夹中打开页面

Answer 1

JSON.parse() 方法解析 JSON 字符串，构造字符串描述的 JavaScript 值或对象。

- MDN

如果您需要这些对象来呈现您的网页/webapp，您将不得不将它们传送到浏览器。 分解 JSON。 不要忘记缩小。

我认为所需的架构是使用 XHR 或文件系统（如果这确实是您的用例/仅限本地）来按需获取您需要的 JSON。

Answer 2

如果你想直接拥有数据，你必须像你一样把它放在一个 .js 文件中。 您可以编写构建规则以从 .json 文件创建此 .js 文件。

另一个解决方案是使用 Ajax，它允许从 js 获取 .json 的内容并将其存储到一个变量中。

Answer 3

您可以使用rel属性设置为"import" <link>元素，获取并传递link.import.body.textContent到JSON.parse()以从JSON创建javascript对象。

 <script> let json; function handleJSON(link) { json = JSON.parse(link.import.body.textContent); } window.onload = function() { console.log(json) } </script> <link id="json" rel="import" type="application/json" href="https://gist.githubusercontent.com/guest271314/ffac94353ab16f42160e/raw/aaee70a3e351f6c7bc00178eabb5970a02df87e9/states.json" onload="handleJSON(this)"/>

Answer 4

 //basic method !! think about handling the exceptions... if (window.XMLHttpRequest) { // Objet standard xhr = new XMLHttpRequest(); // Firefox, Safari, ... } else if (window.ActiveXObject) { // Internet Explorer xhr = new ActiveXObject("Microsoft.XMLHTTP"); } // Ajax req xhr.onreadystatechange = function () { // if ok 200 if (this.readyState == 4 && this.status == 200) { data = this.response // your data console.log(data[0].title); } } xhr.open("GET", "resc/placeholder.json", true) xhr.responseType = "json" xhr.send(/*prams if needed */)