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变量中，如下所述：load json into variable

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

我的解决方案，正如here所述，是使用：

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

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

编辑为了避免缓存，这里是使用fs模块在评论中给出this blogpost的辅助函数：

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

Answer 2

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

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

（您还有一个额外的}）

Answer 3

对于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 4

有两个可能的问题：

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

我看到您尝试使用'async': false解决此问题。要检查这是否有效，请将此行添加到代码中并检查浏览器的控制台：
```
console.log(['json', json]);
```
路径可能有误。使用与在HTML文档中加载脚本相同的路径。因此，如果您的脚本为js/script.js，请使用js/content.json

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

Answer 5

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

Answer 6

对于给定的json格式（如〜/ my-app / src / db / abc.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

Answer 7

没有 require 或 fs 的解决方案：

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

Answer 8

要将特定值从 output.json（包含问题共享的 json）文件导出到变量，例如 VAR ：

export VAR=$(jq -r '.children.id' output.json)

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

8 个答案:

异步

同步