Tải tệp JSON cục bộ vào biến

Tôi đang cố gắng tải tệp .json vào một biến trong javascript, nhưng tôi không thể làm cho nó hoạt động. Chắc chỉ là một lỗi nhỏ nhưng tôi không tìm ra được.

Mọi thứ hoạt động tốt khi tôi sử dụng dữ liệu tĩnh như thế này:

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

Tôi đặt mọi thứ có {}trong một content.jsontệp và cố gắng tải nó vào một biến JavaScript cục bộ như được giải thích ở đây: tải json vào biến .

var json = (function() {
  var json = null;
  $.ajax({
    'async': false,
    'global': false,
    'url': "/content.json",
    'dataType': "json",
    'success': function(data) {
      json = data;
    }
  });
  return json;
})();

Tôi đã chạy nó với trình gỡ lỗi Chrome và nó luôn cho tôi biết rằng giá trị của biến jsonlà null. Các content.jsoncư trú tập tin trong cùng thư mục với file .js mà các cuộc gọi nó.

Tôi đã bỏ lỡ cái gì?

Nếu bạn dán content.jsontrực tiếp đối tượng của mình vào thì đó là JSON không hợp lệ. Các khóa và giá trị JSON phải được đặt trong dấu ngoặc kép ( "không phải ') trừ khi giá trị là số, boolean nullhoặc hỗn hợp (mảng hoặc đối tượng). JSON không được chứa các hàm hoặc undefinedgiá trị. Dưới đây là đối tượng của bạn là JSON hợp lệ.

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

Bạn cũng đã có thêm }.

Giải pháp của tôi, như đã trả lời ở đây , là sử dụng:

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

Tệp chỉ được tải một lần, các yêu cầu khác sử dụng bộ nhớ đệm.

chỉnh sửa Để tránh bộ nhớ đệm, đây là chức năng trợ giúp từ bài đăng blog này được đưa ra trong các nhận xét, sử dụng fsmô-đun:

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

Đối với ES6 / ES2015, bạn có thể nhập trực tiếp như:

// example.json
{
    "name": "testing"
}


// ES6/ES2015
// app.js
import * as data from './example.json';
const {name} = data;
console.log(name); // output 'testing'

Nếu bạn sử dụng Typescript, bạn có thể khai báo mô-đun json như:

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

Vì Typecript 2.9+ nên bạn có thể thêm - giải quyết trình biên dịch SolsonModuleOptions trongtsconfig.json

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

Có hai vấn đề có thể xảy ra:

1. AJAX là không đồng bộ, vì vậy jsonsẽ không được xác định khi bạn quay lại từ hàm bên ngoài. Khi tệp đã được tải, chức năng gọi lại sẽ thiết lậpjson thành một giá trị nào đó nhưng lúc đó, không ai quan tâm nữa.

   Tôi thấy rằng bạn đã cố gắng khắc phục điều này với 'async': false. Để kiểm tra xem điều này có hoạt động hay không, hãy thêm dòng này vào mã và kiểm tra bảng điều khiển của trình duyệt của bạn:

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

2. Đường dẫn có thể sai. Sử dụng cùng một đường dẫn mà bạn đã sử dụng để tải tập lệnh của mình trong tài liệu HTML. Vì vậy, nếu tập lệnh của bạn là js/script.js, hãy sử dụngjs/content.json

   Một số trình duyệt có thể cho bạn biết họ đã cố gắng truy cập vào URL nào và quá trình đó diễn ra như thế nào (mã thành công / lỗi, tiêu đề HTML, v.v.). Kiểm tra các công cụ phát triển của trình duyệt của bạn để xem điều gì sẽ xảy ra.

Việc xây dựng trong Node.js mô-đun fs sẽ thực hiện điều đó một cách không đồng bộ hoặc đồng bộ tùy thuộc vào nhu cầu của bạn.

Bạn có thể tải nó bằng cách sử dụng var fs = require('fs');

Không đồng bộ

fs.readFile('./content.json', (err, data) => {
    if (err)
      console.log(err);
    else {
      var json = JSON.parse(data);
    //your code using json object
    }
})

Đồng bộ

var json = JSON.parse(fs.readFileSync('./content.json').toString());

Đối với định dạng json đã cho như trong tệp ~ / my-app / src / db / abc.json:

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

inorder để nhập vào tệp .js như ~ / 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;

Đầu ra:

Ankit Aditi Avani