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

javascript jquery json

2022-08-30 03:06:21

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

当我使用这样的静态数据时，一切都很好：

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

我将文件中的所有内容都放在一个文件中，并尝试将其加载到本地JavaScript变量中，如下所述：将json加载到变量中。{}content.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调试器运行它，它总是告诉我变量的值为。该文件与调用它的 .js 文件位于同一目录中。jsonnullcontent.json

我错过了什么？

答案 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))
  })
}

答案 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;
}

从Typescript 2.9+开始，你可以添加 --resolveJsonModule 编译器选项tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
     ...
    "resolveJsonModule": true,
     ...
  },
  ...
}