Dostęp do wielu plików JSON w JavaScript

Question

Mam kilka arkuszy sprite z atlus zapisanych w formacie JSON. Tworzę strukturę atlus na podstawie structure from BrowserQuest. Każdy z nich plików JSON wygląda następująco:

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

Ale zastanawiam się, jak mogę nawet uzyskać dostęp do danych w każdym pliku JSON, jeśli to tylko surowy obiektu dosłowne?

Ponieważ każdy plik JSON jest obiektem dosłowny, jedynym sposobem mogę sobie wyobrazić, że jest dostęp do zapisania obiektu dosłownego do zmiennej, takich jak

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

Mam nadzieję, że to łatwy sposób na dostęp do plików JSON.

A ponieważ każdy indywidualny arkusz ikonki ma własny plik JSON, mam dużą liczbę plików do załadowania.

Jaki jest najlepszy sposób na załadowanie tak dużej liczby plików JSON? Próbuję unikać używania jakichkolwiek bibliotek JS.

Answer 1

Po pierwsze, aby odpowiedzieć na Twoje pytania:

Ale zastanawiam się, jak mogę nawet uzyskać dostęp do danych w każdym pliku JSON, jeśli to tylko surowy obiektu dosłowne?

JSON oznacza J Ava S CRIPT O bject N otation, i jako taki jest identyczne jak to można manipulować, gdy było to obiekt JavaScript.

W celu uzyskania dostępu do pliku JSON czy to plik lokalny, można użyć to:

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(); 

I wtedy można po prostu zastąpić doStuff ze cokolwiek funkcja obsługuje JSON.

Answer 2

Można użyć XMLHttpObject.

spojrzeć

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

użyć tej funkcji jak ten

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

Answer 3

Można acheive że z kombinacji Promise i XMLHttpRequest aby załadować wiele plików JSON równolegle.

Ten interesujący article from HTML5Rocks powinien również pomóc w kontroli i optymalizacji pobierania, ponieważ jest kompleksowy i funkcjonalny.

Na przykład, z funkcją get(url) (z artykułu powyżej, patrz źródła poniżej) powrocie obiekt JSON jako 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 
    }) 

źródło dla Get (URL):

Tutaj to przykładowy kod z HTML5Rocks. To obudowuje się XMLHttpRequest asynchroniczne wywołanie w 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() 
    }) 
}