Truy cập nhiều tệp JSON trong JavaScript

Question

Tôi có một số trang ma trận với atlus được lưu ở định dạng JSON. Tôi đang cấu trúc atlus của tôi dựa trên structure from BrowserQuest. Mỗi file JSON của họ trông giống như:

{ 
    "id": "agent", 
    "width": 24, 
    "height": 24, 
    "animations": { 
     "idle_down": { 
      "length": 2, 
      "row": 0 
     } 
    }, 
    "offset_x": -4, 
    "offset_y": -8 
} 

Nhưng tôi tự hỏi, làm thế nào để tôi thậm chí truy cập dữ liệu trong mỗi tệp JSON, nếu nó chỉ là một đối tượng thô đen?

Vì mỗi tệp JSON là một đối tượng theo nghĩa đen, cách duy nhất tôi có thể tưởng tượng truy cập nó là để lưu các đối tượng theo nghĩa đen cho một biến, chẳng hạn như

var agent = { 
    "id": "agent", 
    "width": 24, 
    "height": 24, 
    "animations": { 
     "idle_down": { 
      "length": 2, 
      "row": 0 
     } 
    }, 
    "offset_x": -4, 
    "offset_y": -8 
}; 

Tôi hy vọng có một cách dễ dàng để truy cập các tệp JSON.

Và vì mỗi trang tính riêng lẻ có tệp JSON riêng, tôi có một số lượng lớn tệp cần tải.

Cách tốt nhất để tải số lượng tệp JSON cao như vậy là gì? Tôi đang cố gắng tránh sử dụng bất kỳ thư viện JS nào.

Answer 1

Trước tiên, để trả lời câu hỏi của bạn:

Nhưng tôi tự hỏi, làm thế nào để tôi thậm chí truy cập dữ liệu trong mỗi tệp JSON, nếu nó chỉ là một đối tượng thô đen?

JSON là viết tắt của J ava S cript O bject N otation, và như vậy là giống hệt nhau để làm thế nào nó sẽ được thao tác nếu nó là một đối tượng JavaScript.

Như để truy cập các tập tin JSON nếu đó là một tập tin địa phương, bạn có thể sử dụng này:

function doStuff(json){ 
    console.log(json); 
} 

var oReq = new XMLHttpRequest(); 
oReq.addEventListener("load", function(){ 
    doStuff(JSON.parse(this.responseText)); 
}); 
oReq.open("GET", "http://www.example.com/example.json"); 
oReq.send(); 

Và sau đó bạn chỉ có thể thay thế doStuff với bất cứ chức năng xử lý các JSON.

Answer 2

Bạn có thể sử dụng XMLHttpObject.

Có một cái nhìn

function getJSONFile(url,callback) { 
    var req = new XMLHttpRequest(); 
    req.open('GET', url, true); 
    req.overrideMimeType("application/json"); 
    req.onreadystatechange = function() { 
     if (req.readyState == 4 && req.status == "200") { 
     callback(req.responseText); 
     } 
    }; 
req.send(); 
} 

sử dụng chức năng này như thế này

getJSONFile('http://www.example.com/example.json', function(data){ 
    if(data) 
    console.log('json data : ' + JSON.stringify(data)); 
}) 

Answer 3

Bạn có thể đạt được điều đó với sự kết hợp của Promise và XMLHttpRequest để tải nhiều file JSON song song.

Điều này thú vị article from HTML5Rocks cũng sẽ giúp bạn rất nhiều để kiểm soát và tối ưu hóa tải xuống, vì nó là toàn diện và chức năng.

Ví dụ, với các get(url) chức năng (từ bài viết ở trên, xem nguồn dưới đây) trả về một đối tượng JSON như một Promise:

var names = [ "agent", "arrow", ... ] 
var sprites = {} 

var all = [] 
names.forEach(function (n) { 
    //Request each individual sprite and get a Promise 
    var p = get(n + ".json") 
       .then(JSON.parse) //parse the JSON file 
       .then (function (sprite) { 
       //Record the sprite by name 
       sprites[n] = sprite 
       //Display your sprite as soon as loaded here  
       }) 
    //add the promise to an Array of all promises 
    all.push(p) 
}) 

//wait for all the files to be loaded and parsed 
Promise.all(all) 
    .then(function() { 
     //All the JS sprites are loaded here 
     //You can continue your processing 
    }) 

Nguồn get (url):

đây là mã mẫu từ HTML5Rocks. Nó đóng gói một cuộc gọi không đồng bộ XMLHttpRequest trong một Promise:

function get(url) { 
    return new Promise(function(resolve, reject) { 
    var req = new XMLHttpRequest() 
    req.open('GET', url) 
    req.onload = function() { 
     if (req.status == 200) 
     // Resolve the promise with the response text 
     resolve(req.response) 
     else 
     // Otherwise reject with the status text 
     reject(Error(req.statusText)) 
    } 

    // Handle network errors 
    req.onerror = function() { 
     reject(Error("Network Error")) 
    } 

    // Make the request 
    req.send() 
    }) 
}