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

Question

我正在尝试将.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文件驻留在同一目录中.

我错过了什么？

Answer 1

我在这里回答的解决方案是使用:

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

该文件只加载一次,进一步请求使用缓存.

编辑为了避免缓存,这里是注释中给出的博客文章中的帮助函数,使用fs模块:

var readJson = (path, cb) => {
  fs.readFile(require.resolve(path), (err, data) => {
    if (err)
      cb(err)
    else
      cb(null, JSON.parse(data))
  })
}

Answer 2

对于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模块:

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

Answer 3

如果直接将对象粘贴到content.json中,则它是无效的json.除非值为数字,否则json键AND值必须用双引号(不是单引号)包装.以下将是您的对象作为有效的json.

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

(你还有一个额外的})

Answer 4

没有 require 或 fs 的解决方案：

var json = []
fetch('./content.json').then(response => json = response.json())

Answer 5

内置的Node.js 模块 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());

Answer 6

来自未来的答案。
2022 年，我们有导入断言 api，用于在 js 文件中导入 json 文件。

import myjson from "./myjson.json" assert { type: "json" };
console.log(myjson);

浏览器支持：到 2022 年 9 月，仅支持基于 chromium 的浏览器和 safari。

阅读更多内容：v8 导入断言帖子