Comment obtenir des données JSON et les stocker dans une variable.

Question

J'ai un fichier à une variable comme celui-ci.

var geography = [ 
        { id:"Country", header:"", width:150}, 
        { id:"Capital", header:"Capital", width:150}, 
        { id:"Falg", header:"Falg", width:150}, 
        { id:"Language", header:"Language", width:150}, 
        {id:"Population", header:"Population", width:150}, 
       ], 

Maintenant, je voulais charger ces données à partir du json. J'ai placé ces données dans le fichier JSON et en utilisant ce code.

getGeography function(){ 
     var geography; 
     var xmlhttp = new XMLHttpRequest(); 
     xmlhttp.open("GET", "data.json",true); 
    } 

Maintenant, comment stocker dans une variable et retourner cela.

Answer 1

Il doit être lu lorsque l'état prêt de xmlhttp est 4 et l'état de réponse est 200. Vous devez analyser la réponse avec JSON.parse(). Cependant, vous ne pouvez pas renvoyer la valeur de la fonction. Parce que XMLHTTPRequest est asynchrone par défaut.

function getGeography() { 
var geography; 
var xmlhttp = new XMLHttpRequest(); 
xmlhttp.open("GET", "data.json",true); 
xmlhttp.onreadystatechange = function() { 
    if(xmlhttp.readyState === 4 && xmlhttp.status === 200) { 
    geography = JSON.parse(xmlhttp.responseText;) 
    } 
} 
} 

Au lieu de la géographie retour vous devez lire par programmation la valeur de la géographie lorsque la demande AJAX est terminée. Quelque chose comme ça (read this):

Au lieu d'écrire du code comme ceci:

function anotherFunc() { 
var geography = getGeography(); 
thenDoSomething(geography); 
} 

Ecrire comme ceci:

function anotherFunc() { 
getGeography(); 
} 
function getGeography() { 
var geography; 
var xmlhttp = new XMLHttpRequest(); 
xmlhttp.open("GET", "data.json",true); 
xmlhttp.onreadystatechange = function() { 
    if(xmlhttp.readyState === 4 && xmlhttp.status === 200) { 
    geography = JSON.parse(xmlhttp.responseText); 
    thenDoSomething(geography); 
    } 
} 
} 

Il est comme la remise du contrôle de l'exécution du reste du code getGeography(), au lieu d'attendre une valeur de retour de la fonction, puis d'utiliser cette valeur. La fonction getGeography() reprend l'exécution du reste du code avec la valeur reçue de la réponse AJAX, lorsque l'appel AJAX est terminé.

Answer 2

Je ne suis pas fan de jQuery mais dans ce cas, vous en bénéficieriez probablement.

$.get("ajax/test.html", function(data) { 
    // data is your result 
    console.log(data); 
    console.log(JSON.parse(data)); 
}); 

https://api.jquery.com/jquery.get/

Answer 3

Voici comment utiliser XMLHttRequest():

<script> 
    const req = new XMLHttpRequest(); 
    var geography = []; 
    req.onreadystatechange = function(event) { 
     // XMLHttpRequest.DONE === 4 
     if (this.readyState === XMLHttpRequest.DONE) { 
      if (this.status === 200) { 
       geography = JSON.parse(this.responseText); 
       console.log(geography); 
       alert("Great Success : check console !"); 
      } else { 
       alert("Something has gone really Bad !"); 
      } 
     } 
    }; 

    req.open('GET', 'data.json', true); 
    req.send(null); 

Veillez à utiliser JSON correct:

[ 
    {"id":"Country","header":"","width":150}, 
    { "id":"Capital","header":"Capital", "width":150}, 
    { "id":"Falg","header":"Falg","width":150}, 
    { "id":"Language","header":"Language", "width":150}, 
    { "id":"Population", "header":"Population", "width":150} 
]