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

Posted 2023-05-08

【中文标题】将本地 JSON 文件加载到变量中

【英文标题】：Load local JSON file into variable

【发布时间】：2013-01-07 05:18:54

【问题描述】：

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

我错过了什么？

【问题讨论】：

您的文件网址是/content.json，这意味着该文件位于您的网络应用程序的根级别。更改为content.json（不带斜线）以将其指向放置脚本文件的同一目录。仅当您的脚本文件位于根级目录中时它才会起作用。

文件位于 WebContent\jit\content.json.. 我试过 'url': "/WebContent/jit/content.json"，但变量仍然为空

【参考方案1】：

正如here 所回答的那样，我的解决方案是使用：

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

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

编辑为了避免缓存，这里是来自 cmets 中的 this blogpost 的辅助函数，使用 fs 模块：

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

【讨论】：

只是想说明此解决方案需要一个名为 RequireJS 的附加库。

如何避免缓存？

Guilherme Oenning 不推荐 goenning.net/2016/04/14/stop-reading-json-files-with-require

TLDR;缓存在单元测试中命中了他，因此他提供了一个辅助函数来避免缓存（ping @nono）。

@Ehvince 哦，我没有注意到这一点，因为我没有阅读整篇文章。谢谢你:-)

【参考方案2】：

对于 ES6/ES2015 你可以import直接喜欢：

// 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 中添加 --resolveJsonModule compilerOptions

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

【讨论】：

导入在 Chrome v72 中不起作用 - 仍然是 Uncaught SyntaxError: Unexpected token *

当我使用它时，似乎data 是一个模块，但data.default 是对象

我试图在控制台中运行它，但没有成功。这不适用于节点 v12.4.0 和 babel-node 6.26.0。我总是得到SyntaxError: Unexpected token *

对于 ES6/ES2015 可以直接导入：由于 mime 类型错误，我在执行import * as data from './example.json' 时似乎遇到了控制台错误。

如果我使用import * as data from './example.json'; 那么data 只是模块，但data.default 是对象。但是当我使用import data from './example.json';时，那么data是对象，更适用

【参考方案3】：

如果您将对象直接粘贴到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"
    
  ]

你还有一个额外的。

【讨论】：

我不敢相信修复它..为什么它会直接嵌入到 .js 文件中而不用双引号，而不是在 .json 文件中？这没有任何意义......

@user1695165 - json 和 javascript 对象是两个不同的东西，它们只是看起来一样。

@Kevin B "...除非该值是数字 [或布尔值]。"

提示：您可以使用像 jsonlint.com 这样的 json 验证器，以便在使用之前检查您的 json 数据。

【参考方案4】：

无需 require 或 fs 的解决方案：

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

【参考方案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());

【参考方案6】：

有两个可能的问题：

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

我看到您尝试使用 'async': false 解决此问题。要检查这是否有效，请将此行添加到代码中并检查浏览器的控制台：

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

路径可能是错误的。使用与在 html 文档中加载脚本相同的路径。所以如果你的脚本是js/script.js，使用js/content.json

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

【讨论】：

也许他的 jquery 版本不支持这个，但是？我改进了措辞。

【参考方案7】：

对于给定的 json 格式，如文件 ~/my-app/src/db/abc.json:

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

为了导入 .js 文件，如 ~/my-app/src/app.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

【讨论】：

这是对此处未提出的问题的回答。

很好，但是，这个问题是关于用户试图将对象文字复制到 .json 文件中，然后他们使用 ajax 加载，只是，他们的对象文字的格式不是t 对 JSON 有效。虽然在某些情况下安装 react 并使用 require 导入它肯定会起作用，但它并没有真正帮助 this 情况。

请注意：在所有其他答案上发布链接到此答案的 cmets 可能被视为过度自我推销，尝试编辑答案是故意破坏行为。您的 cmets 已被移除，请不要再进行此类修改。

【参考方案8】：

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

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