將本地 JSON 文件加載到變量中

Question

我試圖將 a.json 文件加載到 javascript 中的一個變量中，但我無法讓它工作。 這可能只是一個小錯誤，但我找不到它。

當我像這樣使用 static 數據時，一切正常：

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 文件位於同一目錄中。

我錯過了什么？

Answer 1

我的解決方案，如回答here ，是使用：

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

Answer 2

對於 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添加--resolveJsonModule compilerOptions

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

Answer 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"
    }
  ]
}

你還有一個額外的} 。

Answer 4

有兩個可能的問題：

1. AJAX 是異步的，因此當您從外部函數返回時， json將是未定義的。 當文件被加載后，回調函數會將json設置為某個值，但到那時，沒有人會在意了。

   我看到你試圖用'async': false解決這個問題。 要檢查這是否有效，請將此行添加到代碼中並檢查瀏覽器的控制台：

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

2. 路徑可能不對。 使用您用來在 HTML 文檔中加載腳本的相同路徑。 因此，如果您的腳本是js/script.js ，請使用js/content.json

   某些瀏覽器可以向您顯示他們嘗試訪問的 URL 以及訪問方式（成功/錯誤代碼、HTML 標頭等）。 檢查瀏覽器的開發工具，看看會發生什么。

Answer 5

內置的node.js 模塊 fs將根據您的需要異步或同步執行此操作。

您可以使用var fs = require('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

對於文件 ~/my-app/src/db/abc.json 中給定的 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

Answer 7

沒有 require 或 fs 的解決方案：

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

Answer 8

免費的 JSON 個文件可以與 go 一起使用到https://jsonplaceholder.typicode.com/

並導入您的 JSON 文件試試這個

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

Answer 9

要將 output.json（包含問題共享的 json）文件中的特定值導出到變量，請說 VAR：

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

Answer 10

來自未來的答案。
在 2022 年，我們在 js 文件中有導入斷言 api 用於導入 json 文件。

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

瀏覽器支持：直到 2022 年 9 月，僅支持基於 chromium 的瀏覽器。

閱讀更多內容： v8 導入斷言帖子

Answer 11

使用ES6導入JSON文件：

import myJson from '/path/to/filename.json'
myJsonString = JSON.stringify(myJson)

如果文件在同一目錄中，則可以使用

import myJson from './filename.json

在ES6之前

var json = require('./filename.json');