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

Question

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. Nó có lẽ chỉ là một lỗi nhỏ nhưng tôi không thể tìm thấy nó.

Tất cả mọi thứ chỉ 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"}}] 
     } 

Vì vậy, tôi đặt tất cả mọi thứ đó là trong {} trong một file content.json và cố gắng để tải đó vào một biến javascript địa phương như đã giải thích ở đây : 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; 
    })(); 

Tôi chạy nó bằng trình gỡ lỗi chrome và luôn cho tôi biết rằng giá trị của biến json là null. Content.json nằm trong cùng thư mục với tệp .js đang gọi nó.

Tôi đã bỏ lỡ điều gì?

Answer 1

Nếu bạn dán đối tượng của mình vào content.json trực tiếp, đó là json không hợp lệ. Các giá trị và khóa json phải được bọc trong dấu ngoặc kép (không phải là duy nhất!) trừ khi giá trị là số. Dưới đây sẽ là đối tượng của bạn như 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 })

Answer 2

Có hai vấn đề có thể:

1. AJAX là không đồng bộ, vì vậy json sẽ được undefined khi bạn trở về từ chức năng bên ngoài. Khi tệp đã được tải, hàm gọi lại sẽ đặt json thành một số giá trị nhưng tại thời điểm đó, không ai quan tâm nữa.

   Tôi thấy rằng bạn đã cố 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ụng js/content.json

   Một số trình duyệt có thể cho bạn biết URL nào đã truy cập (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 để xem điều gì xảy ra.

Answer 3

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

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

Các tập tin được nạp một lần duy nhất, yêu cầu tiếp tục sử dụng bộ nhớ cache.