将本地 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 文件。

我错过了什么？

467774 次浏览
小开

有两个可能的问题:

  1. AJAX 是异步的，所以当您从外部函数返回时，json将是未定义的。当文件被加载时，回调函数将把 json设置为某个值，但是在那个时候，没有人再关心这个问题了。

    我看到你试图用 'async': false修复这个问题。要检查这是否有效，请将此行添加到代码中并检查浏览器的控制台:

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

  2. The path might be wrong. Use the same path that you used to load your script in the HTML document. So if your script is js/script.js, use js/content.json

    Some browsers can show you which URLs they tried to access and how that went (success/error codes, HTML headers, etc). Check your browser's development tools to see what happens.

小开
最佳答案

如果您将对象直接粘贴到 content.json中，则它是无效的 JSON。JSON 键 还有值必须用双引号("而不是 ')包装，除非该值是数值、布尔值、 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

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

编辑 为了避免缓存，下面是注释中给出的来自 这篇博文的 helper 函数，使用的是 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'

如果使用 Type 脚本，可以像下面这样声明 json 模块:

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

由于类型脚本2.9 + ，您可以在 tsconfig.json中添加—— 解决方案编译器选项

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

内置的 Js 模块将根据您的需要异步或同步地执行此操作。

您可以使用 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
小开

不需要或不需要 f 的解决方案:

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

要将一个特定的值从 output.json (包含有问题中共享的 json)文件导出到一个变量，可以使用 VAR:

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

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

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

浏览器支持: 到2022年9月，只支持基于铬的浏览器。

阅读更多: V8导入断言后

小开

免费的 JSON 文件转到 https://jsonplaceholder.typicode.com/

要导入 JSON 文件，请尝试这样做

const dataframe1=require('./users.json');
console.log(dataframe1);

提交答案