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

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

当我使用如下静态数据时，一切正常：

var json={
id:“随便”，
名称：“开始”，
儿童：[{
“id”：“0.9685”，
“名称”：“内容：队列”
}, {
“id”：“0.79281”，
“名称”：“内容：mqq_错误”
}
}]
}

我将

{}

中的所有内容都放在

content.json

文件中，并尝试将其加载到本地JavaScript变量中，如下所述：

var json=（函数（）{
var=null；
$.ajax({
“异步”：false，
“全局”：错误，
“url”：“/content.json”，
“数据类型”：“json”，
“成功”：函数（数据）{
json=数据；
}
});
返回json；
})();

我用Chrome调试器运行它，它总是告诉我变量

json

的值是

null

。

content.json

文件与调用它的.js文件位于同一目录中

---

我错过了什么？

有两个可能的问题：

AJAX是异步的，因此当您从外部函数返回时，

json

将是未定义的。加载文件后，回调函数将

json

设置为某个值，但此时，没有人再关心了

我看到您尝试使用

'async'：false来修复此问题。若要检查此操作是否有效，请将此行添加到代码中，然后检查浏览器的控制台：

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

这条路可能是错的。使用与在HTML文档中加载脚本相同的路径。因此，如果您的脚本是

js/script.js

，请使用

js/content.json

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

一些浏览器可以向您显示他们试图访问的URL以及访问过程（成功/错误代码、HTML标题等）。检查浏览器的开发工具，看看会发生什么

---

如果直接将对象粘贴到

content.json

中，则该对象是无效的json。JSON键和值必须用双引号（

“

而不是

”

）包装，除非值是数字、布尔值、

null

或复合值（数组或对象）。JSON不能包含函数或未定义的

值。下面是作为有效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+开始，您可以在
tsconfig.json

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

内置的将根据您的需要异步或同步执行

您可以使用
var fs=require（'fs'）；

异步的
同步的
对于文件~/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;

不需要或不需要fs的解决方案：

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

要将output.json（包含问题共享的json）文件中的特定值导出到变量，请执行以下操作：

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

您的文件url为
/content.json
，这意味着该文件位于web应用程序的根级别。更改为
content.json
（不带斜杠）将它指向脚本文件所在的同一目录。只有在脚本文件位于根目录下时，它才能工作。该文件位于WebContent\jit\content.json中。我尝试了“url”：“/WebContent/jit/content.json，但变量仍然为空。也许他的jquery版本还不支持这一点？我已经改进了措辞，真不敢相信我能把它修好。。为什么它可以直接嵌入到.js文件中而不使用双引号，而不能嵌入到.json文件中？这没有任何意义…@user1695165-json和javascript对象是两个不同的东西，它们看起来是一样的。@Kevin B“…除非值是数值[或布尔值]。”提示：在使用json数据之前，您可以使用类似的json验证器来检查json数据。只是想指定此解决方案需要一个名为的附加库。如何避免缓存？Guillerme Oenning TLDR不建议这样做；缓存在单元测试中击中了他，因此他提供了一个helper函数来避免缓存（ping@nono）。@Ehvince-Oh我没有注意到这一点，因为我没有阅读整篇文章。谢谢：-）导入在Chrome v72中不起作用-仍然
未捕获的语法错误：意外的标记*
当我使用它时，似乎
数据是一个模块，但
数据。默认值是objectI试图在控制台中运行它，但没有成功。这不适用于节点v12.4.0和巴贝尔节点6.26.0。我总是得到
SyntaxError:expected token*
对于ES6/ES2015，您可以直接导入：在执行
import*as data from./example.json'
时，由于mime类型错误，我似乎遇到了控制台错误。如果我使用
import*as data from./example.json'
then
data
只是模块，但
data。默认值为对象。但是当我使用
从'./example.json'导入数据时
then
data
是对象，它更适用于这个问题。这是对一个问题的回答，这个问题不是这里所问的问题。这很好，但是，这个问题是关于一个用户试图将一个对象文本复制到一个.json文件中，然后用ajax加载，只是，他们的对象文本的格式对json无效。虽然安装react并使用require导入此选项在某些情况下肯定会起作用，但对这种情况并没有真正的帮助。请注意：在所有其他答案上发布链接到此答案的评论可能会被视为过度自我宣传，而试图编辑答案是故意破坏。你的评论很有说服力
var json = []
fetch('./content.json').then(response => json = response.json())

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