JavaScript'te birden fazla JSON dosyasına erişme

Question

JS58 biçiminde kaydedilen atlus ile bazı hareketli sayfalar var. structure from BrowserQuest'a dayanarak atlusum yapıyorum. Sadece çiğ nesnesi değişmez o takdirde

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

Ama merak ediyorum, nasıl bile, her JSON dosyasındaki verilere erişmek yapın: kendi JSON dosyalarının her benziyor? için kolay bir yol var böyle ben umuyorum

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

olarak

her JSON dosyası bir nesne değişmezi olduğundan, bunun bir değişkene değişmez nesneyi kurtarmaktır erişen düşünebiliriz tek yolu, JSON dosyalarına eriş.

Her bir bireysel sayfalar kendi JSON dosyasına sahip olduğundan, yüklenecek çok sayıda dosya var.

Çok sayıda JSON dosyasını yüklemenin en iyi yolu nedir? Herhangi bir JS kütüphanesi kullanmaktan kaçınmaya çalışıyorum.

Answer 1

Öncelikle, sorulara cevap:

Ama merak ediyorum, nasıl bile, her JSON dosyasındaki verilere erişmek yok bu sadece bir ham nesnesi değişmez olur?

JSON J ava S N-rotasyon Nesne cript O, için ve bu şekilde bir JavaScript nesne olsaydı manipüle nasıl aynıdır anlamına gelir.

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

Sonra da JSON kolları ne olursa olsun fonksiyonu ile doStuff değiştirebilirsiniz: imiş yerel bir dosya JSON dosyası erişen gelince

, bunu kullanabilirsiniz.

Answer 2

XMLHttpObject'u kullanabilirsiniz.

a Look paralel olarak birden JSON dosyaları yüklemek için Sen Promise ve XMLHttpRequest kombinasyonu ile bu modernleşmek bu

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

Answer 3

gibi

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

kullanımını bu fonksiyon var.

Bu ilginç article from HTML5Rocks, kapsamlı ve işlevsel olduğu için, indirme kontrolü ve optimizasyonu için size çok yardımcı olacaktır.İşte

: get (URL) için

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

Kaynak: Bir Promise gibi bir JSON nesnesi dönen (aşağıya bakınız kaynağını yukarıdaki makaleden) get(url) fonksiyonlu Örneğin

, HTML5Rocks'ın örnek kodudur. Bir Promise bir XMLHttpRequest asenkron çağrı kapsüller:

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