Mehrere JSON-Dateiaufrufe

Question

Kann mir jemand mit dem folgenden helfen. Ich habe 2 JSON-Dateien:

1. names.json: die die Namen aller Alter und Adressfeld (Incase mulitple Residenz) jeder Person hat. { "people": [ { "name":"Peter Gabriel", "age":42, "address": ["location1","location2","location3"] }, { "name":"Mark Vincent", "age":"25", "address": ["location4","location5"] } ] }

2. data.json: die die Adresse alle Details hat { "location1": { "country":"Switzerland", "street":"some Avenue", "number": 32 }, "location2": { "country":"Latvia", "street":"some Street", "number": 43 }, "location3": { "country":"Denmark", "street":"some Road", "number": 16 }, "location4": { "country":"Austria", "street":"some Avenue", "number": 54 }, "location5": { "country":"Poland", "street":"some Avenue", "number": 23 } } ich die data.json Dateidaten müssen vor dem names.json in globalen und geladen sein, aber als JSON Laden ist eine asynchrone Funktion wie zu tun Ich tue es.

   var jsonAddressData = []; 
   function main() 
   { 
       loadNamesJSON(function(response) { 
        jsonAddressData = JSON.parse(response); 
       }); 
   
   
       loadNamesJSON(function(response) { 
        var jsonPeopleData = JSON.parse(response); 
        var addressDetail=[]; 
   
        for(var i in jsonPeopleData.people){ 
         // ACCESS ADDRESS OBJECT DETAILS HERE 
         for(var j in jsonPeopleData.people[i].address){ 
          if (jsonPeopleData.people[i].address[j] in jsonAddressData){ 
   
           addressDetail.append(jsonAddressData[jsonPeopleData.people[i].address[j]]) 
          } 
         } 
        } 
       }); 
   } 
   
   function loadNamesJSON(callback) { 
       var request = new XMLHttpRequest(); 
       request.overrideMimeType("application/json"); 
       request.open('GET', 'names.json', true); 
   
       request.onreadystatechange = function() { 
        if (request.readyState === 4 && request.status ===200) { 
         callback(request.responseText); 
        } 
       }; 
       request.send(null); 
   } 
   
   function loadDataJSON(callback) { 
       var request = new XMLHttpRequest(); 
       request.overrideMimeType("application/json"); 
       request.open('GET', 'data.json', true); 
   
       request.onreadystatechange = function() { 
        if (request.readyState === 4 && request.status ===200) { 
         callback(request.responseText); 
        } 
       }; 
       request.send(null); 
   } 
   

Answer 1

In Raw JavaScript können Sie dies tun:

function phpEncode(obj){ 
    var r = []; 
    if(obj instanceof Array){ 
    for(var i=0,l=obj.length; i<l; i++){ 
     r.push(phpEncode(obj[i])); 
    } 
    return '%5B'+r.join(',')+'%5D'; 
    } 
    else if(typeof obj === 'object' && obj){ 
    for(var i in obj){ 
     if(obj.hasOwnProperty(i)){ 
     var v = obj[i], s; 
     if(typeof v === 'object' && v){ 
      s = encodeURIComponent('"'+i.replace('"', '\\"')+'":')+phpEncode(v); 
     } 
     else{ 
      v = typeof v === 'string' ? '"'+v.replace('"', '\"')+'"' : v; 
      s = encodeURIComponent('"'+i.replace('"', '\\"')+'":'+v); 
     } 
     r.push(s); 
     } 
    } 
    return '%7B'+r.join(',')+'%7D'; 
    } 
    else{ 
    r = typeof obj === 'string' ? '"'+obj.replace('"', '\\"')+'"' : obj; 
    return ''+r; 
    } 
} 
function phpDecode(url){ 
    return eval('('+decodeURIComponent(url)+')'); 
} 
function post(send, where, success, context){ 
    var x = new XMLHttpRequest || new ActiveXObject('Microsoft.XMLHTTP'); 
    var c = context || this; 
    x.open('POST', where); x.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); 
    x.onreadystatechange = function(){ 
    if(x.readyState === 4 && x.status === 200){ 
     if(success)success.call(c, phpDecode(x.responseText)); 
    } 
    } 
    if(typeof send === 'object' && send && !(send instanceof Array)){ 
    var r = []; 
    for(var p in send){ 
     r.push(encodeURIComponent(p)+'='+phpEncode(send[p])); 
    } 
    x.send(r.join('&')); 
    } 
    else{ 
    throw new Error('send must be an Object'); 
    } 
} 
post({}, 'data.json', function(obj1){ 
    // obj1 holds data.json Object 
    post({}, 'names.json', function(obj2){ 
    // obj2 holds names.json Object 
    }); 
}); 

Fühlen Sie sich frei, den Code oben zu verändern, an Ihre Bedürfnisse anzupassen. Zum Beispiel verwende ich eine POST-Anfrage. Natürlich spielt es in Ihrem Fall keine Rolle.

Wenn jQuery verwenden:

$.getJSON('data.json', function(obj1){ 
    // obj1 holds data.json Object 
    $.getJSON('names.json', function(obj2){ 
    // obj2 holds names.json Object 
    }); 
}); 

Wichtig zu bemerken ist, dass AJAX ist asynchron, so dass alle Code, der in der Erfolgsfunktion muss folgt. Mit anderen Worten, wenn Sie dies tun:

$.getJSON('data.json', function(obj1){ 
    var whatever = obj1; 
    // obj1 holds data.json Object 
    $.getJSON('names.json', function(obj2){ 
    // obj2 holds names.json Object 
    }); 
}); 
console.log(whatever); 

die console.log(whatever) kehrt undefiniert, weil AJAX nicht aufgetreten ist, es sei denn, es super schnell passiert. Wie auch immer, es dauert eine Weile, bis du dieses Zeug vollständig verstanden hast. Viel Glück.