Daten von 4 APIs laden und in useState Variable speichern

components/MapComponent.js

@@ -12,19 +12,24 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
   const [GisStationsStaticDistrict, setGisStationsStaticDistrict] = useState(
     []
   ); // Zustand für statische Daten
-  const [dataStatus, setDataStatus] = useState([]); // Zustand für Statusdaten
-  const [dataIcons, setDataIcons] = useState([]); // Zustand für Icons
-  const [dataSystem, setDataSystem] = useState([]); // Zustand für Systemdaten
+  const [GisStationsStatusDistrict, setGisStationsStatusDistrict] = useState(
+    []
+  ); // Zustand für Statusdaten
+  const [GisStationsMeasurements, setGisStationsMeasurements] = useState([]); // Zustand für Messdaten
+  const [GisSystemStatic, setGisSystemStatic] = useState([]); // Zustand für Systemdaten
+  const [DataIcons, setDataIcons] = useState([]); // Zustand für Icon-Daten
 
   // Konstanten für die URLs
   const mapGisStationsStaticDistrictUrl =
     config.mapGisStationsStaticDistrictUrl;
-  const mapDataStatusUrl = config.mapDataStatusUrl;
+  const mapGisStationsStatusDistrictUrl =
+    config.mapGisStationsStatusDistrictUrl;
+  const mapGisStationsMeasurementsUrl = config.mapGisStationsMeasurementsUrl;
+  const mapGisSystemStaticUrl = config.mapGisSystemStaticUrl;
   const mapDataIconUrl = config.mapDataIconUrl;
-  const mapDataSystemUrl = config.mapDataSystemUrl;
 
   console.log("GisStationsStaticDistrict 1 :", GisStationsStaticDistrict);
-  console.log("map:", map);
+  console.log("map 1:", map);
 
   // Funktion zum Aktualisieren der Position in der Datenbank
   const updateLocationInDatabase = async (id, newLatitude, newLongitude) => {
@@ -58,7 +63,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
     const fetchData = async () => {
       try {
         console.log("Datenabruf gestartet...");
-        const response = await fetch(config.mapGisStationsStaticDistrictUrl);
+        const response = await fetch(mapGisStationsStaticDistrictUrl);
         const jsonResponse = await response.json();
 
         // Prüfen, ob die Antwort das erwartete Format hat und Daten enthält
@@ -76,7 +81,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
           setGisStationsStaticDistrict([]);
         }
       } catch (error) {
-        console.error("Fehler beim Laden der Daten: ", error);
+        console.error("Fehler beim Laden der Daten 1: ", error);
         setGisStationsStaticDistrict([]);
       }
     };
@@ -126,37 +131,131 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
   }, [map, GisStationsStaticDistrict]); // Abhängigkeiten hinzufügen, um sicherzustellen, dass Effekt bei Änderungen neu ausgeführt wird
 
   //------------------------------------------
+  //GisStationsStaticDistrict Daten laden
   useEffect(() => {
-    // Prüfen der Internetverbindung beim Start
-    console.log("Prüfen der Internetverbindung...");
-    checkInternet();
-
-    // Asynchrones Laden der Kartendaten beim Initialisieren der Komponente
     const fetchData = async () => {
       try {
         console.log("Datenabruf gestartet...");
-        const responses = await Promise.all([
-          fetch(config.mapGisStationsStaticDistrictUrl).then((res) =>
-            res.json()
-          ),
-          fetch(config.mapDataStatusUrl).then((res) => res.json()),
-          fetch(config.mapDataIconUrl).then((res) => res.json()),
-          fetch(config.mapDataSystemUrl).then((res) => res.json()),
-        ]);
-        console.log("Daten erfolgreich geladen.");
-        setGisStationsStaticDistrict(responses[0].Points);
-        setDataStatus(responses[1].Statis);
-        setDataIcons(responses[2].List);
-        setDataSystem(
-          responses[3].Systems.filter((system) => system.Allow === 1)
-        );
+        const response = await fetch(mapGisStationsStaticDistrictUrl);
+        const jsonResponse = await response.json();
+
+        // Prüfen, ob die Antwort das erwartete Format hat und Daten enthält
+        if (jsonResponse && jsonResponse.Points) {
+          console.log(
+            "GisStationsStaticDistrict geladen:",
+            jsonResponse.Points
+          );
+          setGisStationsStaticDistrict(jsonResponse.Points); // Direkter Zugriff auf 'Points'
+
+          // Anzeigen eines spezifischen Details aus dem JSON
+          console.log(
+            "etwas von json zeigen :",
+            jsonResponse.Points[0].LD_Name
+          ); // Beispiel für das Anzeigen des LD_Name des ersten Points
+        } else {
+          console.error(
+            'Erwartete Daten im "Points"-Array nicht gefunden',
+            jsonResponse
+          );
+          setGisStationsStaticDistrict([]);
+        }
       } catch (error) {
-        console.error("Fehler beim Laden der Daten: ", error);
+        console.error("Fehler beim Laden der Daten 1: ", error);
+        setGisStationsStaticDistrict([]);
       }
     };
 
     fetchData();
-  }, []); // Leeres Abhängigkeitsarray, um nur beim ersten Mount zu laden
+  }, []); // Dependency-Array ist leer, um den Effekt nur beim Mount auszuführen
+  //------------------------------------------
+  //GisStationsStatusDistrict Daten laden
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        console.log("Datenabruf gestartet...");
+        const response = await fetch(mapGisStationsStatusDistrictUrl);
+        const jsonResponse = await response.json();
+
+        // Prüfen, ob die Antwort das erwartete Format hat und Daten enthält
+        if (jsonResponse && jsonResponse.Statis) {
+          console.log(
+            "GisStationsStatusDistrict geladen:",
+            jsonResponse.Statis
+          );
+          setGisStationsStatusDistrict(jsonResponse.Statis); // Direkter Zugriff auf 'Statis'
+        } else {
+          console.error(
+            'Erwartete Daten im "Statis"-Array nicht gefunden',
+            jsonResponse
+          );
+          setGisStationsStatusDistrict([]);
+        }
+      } catch (error) {
+        console.error("Fehler beim Laden der Daten 2: ", error);
+        setGisStationsStatusDistrict([]);
+      }
+    };
+
+    fetchData();
+  }, []); // Dependency-Array ist leer, um den Effekt nur beim Mount auszuführen
+  //------------------------------------------
+  //GisStationsMeasurements Daten laden
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        console.log("Datenabruf gestartet...");
+        const response = await fetch(mapGisStationsMeasurementsUrl);
+        const jsonResponse = await response.json();
+
+        // Prüfen, ob die Antwort das erwartete Format hat und Daten enthält
+        if (jsonResponse && jsonResponse.Statis) {
+          console.log("GisStationsMeasurements geladen:", jsonResponse.Statis);
+          setGisStationsMeasurements(jsonResponse.Statis); // Direkter Zugriff auf 'Statis'
+        } else {
+          console.error(
+            'Erwartete Daten im "Statis"-Array nicht gefunden',
+
+            jsonResponse
+          );
+          setGisStationsMeasurements([]);
+        }
+      } catch (error) {
+        console.error("Fehler beim Laden der Daten 3: ", error);
+        setGisStationsMeasurements([]);
+      }
+    };
+
+    fetchData();
+  }, []); // Dependency-Array ist leer, um den Effekt nur beim Mount auszuführen
+  //------------------------------------------
+  //GisSystemStatic Daten laden
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        console.log("Datenabruf gestartet...");
+        const response = await fetch(mapGisSystemStaticUrl);
+        const jsonResponse = await response.json();
+
+        // Prüfen, ob die Antwort das erwartete Format hat und Daten enthält
+        if (jsonResponse && jsonResponse.Systems) {
+          console.log("GisSystemStatic geladen:", jsonResponse.Systems);
+          setGisSystemStatic(jsonResponse.Systems); // Direkter Zugriff auf 'Systems'
+        } else {
+          console.error(
+            'Erwartete Daten im "Systems"-Array nicht gefunden',
+            jsonResponse
+          );
+          setGisSystemStatic([]);
+        }
+      } catch (error) {
+        console.error("Fehler beim Laden der Daten 4: ", error);
+        setGisSystemStatic([]);
+      }
+    };
+
+    fetchData();
+  }, []); // Dependency-Array ist leer, um den Effekt nur beim Mount auszuführen
+  //------------------------------------------
 
   const offlineTileLayer = "../TileMap/mapTiles/{z}/{x}/{y}.png";
   const onlineTileLayer = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";