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

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

我错过了什么？

如果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"
    }
  ]
}

你也有一个额外的}。

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

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

对于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,
     ...
  },
  ...
}

有两个可能的问题：

1. AJAX是异步的，因此json当您从外部函数返回时将是未定义的。加载文件后，回调函数将设置json为某个值，但那时没有人在乎了。

   我发现您尝试使用 'async': false。要检查是否可行，请将以下行添加到代码中，然后检查浏览器的控制台：

   console.log(['json', json]);

2. 路径可能错误。使用与在HTML文档中加载脚本相同的路径。因此，如果您的脚本是js/script.js，请使用js/content.json

   某些浏览器可以向您显示他们尝试访问的URL以及访问的方式（成功/错误代码，HTML标头等）。检查浏览器的开发工具，看看会发生什么。

内建 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());

对于文件〜/ my-app / src / db / abc.json中的给定json格式：

  [
      {
        "name":"Ankit",
        "id":1
      },
      {
        "name":"Aditi",
        "id":2
      },
      {
        "name":"Avani",
        "id":3
      }
  ]

为了导入到〜/ my-app / src / app.js之类的.js文件：

 const json = require("./db/abc.json");

 class Arena extends React.Component{
   render(){
     return(
       json.map((user)=>
        {
          return(
            <div>{user.name}</div>
          )
        }
       )
      }
    );
   }
 }

 export default Arena;

输出：

Ankit Aditi Avani