将本地 JSON 文件加载到变量中

IT技术 javascript jquery json
2021-02-04 06:01:51

我正在尝试将 .json 文件加载到 javascript 中的变量中，但我无法让它工作。这可能只是一个小错误，但我找不到。

当我使用这样的静态数据时，一切正常：

var json = {
  id: "whatever",
  name: "start",
  children: [{
      "id": "0.9685",
      "name": " contents:queue"
    }, {
      "id": "0.79281",
      "name": " contents:mqq_error"
    }
  }]
}

我将 中的所有内容都{}放在一个content.json文件中，并尝试将其加载到本地 JavaScript 变量中，如下所述：将json 加载到变量中。

var json = (function() {
  var json = null;
  $.ajax({
    'async': false,
    'global': false,
    'url': "/content.json",
    'dataType': "json",
    'success': function(data) {
      json = data;
    }
  });
  return json;
})();

我用 Chrome 调试器运行它，它总是告诉我变量的值json是null. 该content.json文件与调用它的 .js 文件位于同一目录中。

我错过了什么？

6个回答

我的解决方案，如回答here，是使用：

    var json = require('./data.json'); //with path

该文件只加载一次，进一步的请求使用缓存。

编辑为了避免缓存，这是评论中给出的这篇博文中的辅助函数，使用fsmodule：

var readJson = (path, cb) => {
  fs.readFile(require.resolve(path), (err, data) => {
    if (err)
      cb(err)
    else
      cb(null, JSON.parse(data))
  })
}
@Ehvince 哦，我没有注意到这一点，因为我没有阅读整篇文章。谢谢 ：-）
2021-03-17 06:01:51
只是想指定此解决方案需要一个名为RequireJS的附加库。
2021-03-21 06:01:51
如何避免缓存？
2021-04-01 06:01:51
TLDR；缓存在单元测试中击中了他，因此他提供了一个帮助函数来避免缓存（ping @nono）。
2021-04-09 06:01:51
2021-04-10 06:01:51

对于 ES6/ES2015，您可以直接导入，如：

// example.json
{
    "name": "testing"
}


// ES6/ES2015
// app.js
import * as data from './example.json';
const {name} = data;
console.log(name); // output 'testing'

如果你使用 Typescript，你可以像这样声明 json module：

// tying.d.ts
declare module "*.json" {
    const value: any;
    export default value;
}

从 Typescript 2.9+ 开始，您可以添加--resolveJsonModule compilerOptionstsconfig.json

{
  "compilerOptions": {
    "target": "es5",
     ...
    "resolveJsonModule": true,
     ...
  },
  ...
}
我试图在控制台中运行它，但没有成功。这不适用于 node v12.4.0，babel-node 6.26.0。我总是得到SyntaxError: Unexpected token *
2021-03-18 06:01:51
当我使用它时，它似乎data是一个module，但data.default它是对象
2021-03-24 06:01:51
如果我使用import * as data from './example.json';thendata只是module，而是data.default对象。但是当我使用import data from './example.json';thendata是对象，更适用
2021-03-26 06:01:51
导入在 Chrome v72 中不起作用 - 仍然 Uncaught SyntaxError: Unexpected token *
2021-03-28 06:01:51
对于 ES6/ES2015，您可以直接导入：import * as data from './example.json'由于 mime 类型错误，我似乎在执行时收到控制台错误。
2021-03-30 06:01:51

如果您content.json直接将对象粘贴到其中，则它是无效的 JSON。JSON 键和值必须用双引号（"not '）括起来，除非值是数字、布尔值null、 或复合（数组或对象）。JSON 不能包含函数或undefined值。以下是您作为有效 JSON 的对象。

{
  "id": "whatever",
  "name": "start",
  "children": [
    {
      "id": "0.9685",
      "name": " contents:queue"
    },
    {
      "id": "0.79281",
      "name": " contents:mqq_error"
    }
  ]
}

你还有一个额外的}.

@user1695165 - json 和 javascript 对象是两个不同的东西，它们只是看起来一样。
2021-03-25 06:01:51
@Kevin B“...除非值是数字 [或布尔值]。”
2021-04-05 06:01:51
我不敢相信它修复了它.. 为什么它可以直接嵌入在没有双引号的 .js 文件中，而不是在 .json 文件中？这没有任何意义......
2021-04-06 06:01:51
只是一个提示：您可以使用像jsonlint.com这样的 json 验证器，以便在使用前检查您的 json 数据。
2021-04-12 06:01:51

内置的node.js module fs将根据您的需要异步或同步执行此操作。

您可以使用加载它 var fs = require('fs');

异步

fs.readFile('./content.json', (err, data) => {
    if (err)
      console.log(err);
    else {
      var json = JSON.parse(data);
    //your code using json object
    }
})

同步

var json = JSON.parse(fs.readFileSync('./content.json').toString());

没有 require 或 fs 的解决方案：

var json = []
fetch('./content.json').then(response => json = response.json())
其它你可能感兴趣的问题
上一篇Mongoose，使用 find 选择特定字段 下一篇将 HTML 插入 div