Is it a way to extract a var from xmlhttp2 request in js?

Question

Im new to javascript and php prog.

Im trying to extract a var from xhttp2 request to reuse it in my code. After multiply test I cant find a way to do it. I think i dont really get how asynchronous function works ..

my code :

    xhttp2.onreadystatechange = function() {
 if (this.readyState == 4 && this.status ==200) {
    let response = JSON.parse(xhttp2.responseText)
   let arrond = L.geoJSON(response).addTo(map1);}
 };
 xhttp2.open("GET", "js/test3.php",true);
 xhttp2.send();

im trying to extract the "arrond" var as a json

Thanks for your help !

Victor

here is my full code : it is on a leaflet project. The xhttp request is use to add data to my lealet map. The data comes from a postgreSQL data base and a php code to an array.

    //Initialisation de la carte 
var map1 = L.map('map1');
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib='Map data © OpenStreetMap contributors';
var osm = new L.TileLayer(osmUrl, {attribution: osmAttrib});
map1.setView([45.76, 4.85], 12);

//ajout de basemaps supplémentaires
var osmhumanUrl='https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png';
var osmhuman = new L.TileLayer(osmhumanUrl, {attribution: osmAttrib}).addTo(map1); 

var Esri_WorldImagery = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
    attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
});

// //Appel de la couche equipement
var xhttp2 = new XMLHttpRequest();
// //lecture de la connexion au fichier php (2 variables cf. biblio)
xhttp2.onreadystatechange = function() {
     if (this.readyState == 4 && this.status ==200) {
//  //récupération du résultat de la requête sql et parcours de la couche :
      document.getElementById("demo").innerHTML =
      (xhttp2.responseText);
        let response = JSON.parse(xhttp2.responseText)
//         //appel de la couche
//      //console.log(response[0])
       let arrond = L.geoJSON(response).addTo(map1); 
     }
     };
xhttp2.open("GET", "js/test3.php",true);
xhttp2.send();


let Jardins =  L.geoJSON(jardins, 
    {
        onEachFeature: function (feature, layer) {
          layer.bindPopup(feature.properties.title);
        }
      }).addTo(map1);

//groupe de couche et de basemaps et layerControl
var baseMaps = {
    "OSM": osm,
    "OSM Humanitarian": osmhuman, 
    "Satellite": Esri_WorldImagery
};

var overlayMaps = {
    "Initiatives existantes": Jardins
};

//Ajout d'un bouton de gestion des calques
L.control.layers(baseMaps).addTo(map1);

Can you include more code? This is just a small part. Are using react or vanilla js? — kboul, Feb 19 '21 at 13:47
No, im not using react or vanilla (or maybe without knowing it) — Veko047, Feb 19 '21 at 15:23
You should post the code below to your question by editing it to provide your attempt to solve the problem unless you answer to your own question. — kboul, Feb 19 '21 at 15:44

kboul · Accepted Answer · 2021-02-23T20:44:44.700

Place the variable in global scope instead of nested scope

declare it along with your other global variables like map1, osmUrl

var map1 = L.map('map1');
...
let arrond; ''here declare it

//Appel de la couche equipement
var xhttp2 = new XMLHttpRequest();
//lecture de la connexion au fichier php (2 variables cf. biblio)
xhttp2.onreadystatechange = function() {
   if (this.readyState == 4 && this.status ==200) {
      //récupération du résultat de la requête sql et parcours de la couche :
      document.getElementById("demo").innerHTML =
      (xhttp2.responseText);
        let response = JSON.parse(xhttp2.responseText)
         //appel de la couche
       arrond = L.geoJSON(response).addTo(map1); here assign the new value to the variable
     }
     };
xhttp2.open("GET", "js/test3.php",true);
xhttp2.send();

outside onreadystatechange use it

..
console.log(arrond)

Edit

I just noticed that you have the ajax property set to true. So everything is asynchronous.

You can use a main function to get the result of the async operation to ensure the latter has arrived. You can use fetch api which is simpler in terms of code complexity comparing to the classic XMLHttpRequest.

 async function getData() {
        const response = await fetch("js/test3.php");
        const data = await response.json();
        console.log(data)
        const geojson = L.geoJSON(data, {
          onEachFeature
        });
        geojson.addTo(map1);
        map1.fitBounds(geojson.getBounds());
        return geojson;
      }

and then create a main function and do all further json manipulations from now on regarding the geojson instance:

async function main() {
            const arrond = await getData();
            console.log(arrond);
}
    
main(); // call it

here is an exampe with a free geojson api

<!DOCTYPE html>
<html>

<head>

  <title>Quick Start - Leaflet</title>

  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>



</head>

<body>
  <div id="map1" style="width: 600px; height: 400px;"></div>
  <script>
    //Initialisation de la carte 
    var map1 = L.map('map1');
    var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
    var osmAttrib = 'Map data © OpenStreetMap contributors';
    var osm = new L.TileLayer(osmUrl, {
      attribution: osmAttrib
    });
    map1.setView([45.76, 4.85], 12);

    //ajout de basemaps supplémentaires
    var osmhumanUrl = 'https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png';
    var osmhuman = new L.TileLayer(osmhumanUrl, {
      attribution: osmAttrib
    }).addTo(map1);

    var Esri_WorldImagery = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
      attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
    });

    function onEachFeature(feature, layer) {
      // does this feature have a property named popupContent?
      if (feature.properties && feature.properties.label) {
        layer.bindPopup(feature.properties.label);
      }
    }


    async function getData() {
      const response = await fetch("https://api-adresse.data.gouv.fr/search/?q=paris&type=street");
      const data = await response.json();
      console.log(data)
      const geojson = L.geoJSON(data, {
        onEachFeature
      });
      geojson.addTo(map1);
      map1.fitBounds(geojson.getBounds());
      return geojson;
    }

    async function main() {
      const arrond = await getData();
      console.log(arrond);
    }

    main();
  </script>

</body>

</html>

Thanks for your help, but with this code my var 'arrond' still undefined in my console i cant figure it out why — Veko047, Feb 21 '21 at 09:27
It is probably something wrong with `js/test3.php` then. Do you get the data from the call? Do you see data if you log `xhttp2.responseText` ? — kboul, Feb 21 '21 at 09:34
Yes i think the request is good, i can log it in the onredaystatechange — Veko047, Feb 21 '21 at 10:00
i think im on something like that : https://stackoverflow.com/questions/247483/http-get-request-in-javascript — Veko047, Feb 21 '21 at 10:00
I just try it ! it seems working great ! thanks you a lot for your help !! — Veko047, Feb 21 '21 at 17:30

Is it a way to extract a var from xmlhttp2 request in js?

1 Answers1