Fetch API használata II.

A Fetch API egy modern, beépített JavaScript interfész, amelyet HTTP kérések küldésére és válaszok kezelésére használunk. Célja, hogy egyszerű, ígéreteken (Promise) alapuló megoldást nyújtson az adatok lekérésére és küldésére, a régi XMLHttpRequest helyett.

Mire használjuk?

Adatok lekérése szerverről (pl. REST API).
Adatok küldése (POST, PUT, PATCH).
Erőforrás törlése (DELETE).
Kommunikáció JSON, text, blob, vagy más formátumokban.

alapvető szintaxis:

fetch(url, {
  method: "GET", // vagy POST, PUT, PATCH, DELETE
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify(data) // csak POST, PUT, PATCH esetén
})
  .then(response => {
    if (!response.ok) throw new Error("Hiba: " + response.status);
    return response.json(); // vagy response.text(), response.blob()
  })
  .then(data => console.log(data))
  .catch(error => console.error(error));

fetch(url, {

method: "GET", // vagy POST, PUT, PATCH, DELETE

headers: {

"Content-Type": "application/json"

body: JSON.stringify(data) // csak POST, PUT, PATCH esetén

})

.then(response => {

if (!response.ok) throw new Error("Hiba: " + response.status);

return response.json(); // vagy response.text(), response.blob()

})

.then(data => console.log(data))

.catch(error => console.error(error));

Modernebb async/await szintaxis

async function getData(url) {
  try {
    const response = await fetch(url, {
      method: "GET", // vagy POST, PUT, PATCH, DELETE
      headers: {
        "Content-Type": "application/json"
      }
      // body: JSON.stringify(data) // csak POST, PUT, PATCH esetén
    });

    if (!response.ok) {
      throw new Error("Hiba: " + response.status);
    }

    const data = await response.json(); // vagy response.text(), response.blob()
    console.log(data);
  } catch (error) {
    console.error("Hiba történt:", error.message);
  }
}

// Meghívás:
getData("https://api.example.com/items");

async function getData(url) {

try {

const response = await fetch(url, {

method: "GET", // vagy POST, PUT, PATCH, DELETE

headers: {

"Content-Type": "application/json"

}

// body: JSON.stringify(data) // csak POST, PUT, PATCH esetén

});

if (!response.ok) {

throw new Error("Hiba: " + response.status);

}

const data = await response.json(); // vagy response.text(), response.blob()

console.log(data);

} catch (error) {

console.error("Hiba történt:", error.message);

}

// Meghívás:

getData("https://api.example.com/items");

Példa: ingatlanok

Hozz létre egy új mappát, majd nyisd meg a Visual Studio Code-ban! Legyen a mappában egy frontend és egy backend mappa! A backend letölthető innen. VS code-ban nyiss meg egy új terminált, majd lépj be a backend mappába! ( cd backend) Telepítsd fel a node csomagjait: npm i paranccsal! A backend a node index.js utasítással indítható! A végpontokat és a hozzájuk tartozó sql lekérdezéseket az index.js fájl tartalmazza. A backenden az összes ingatlan itt lekérhető: http://localhost:5000/api/ingatlan

A példák csak a JS kódot tartalmazzák. CORS kezelésével nem foglalkozunk, mert most sima localhost-ot használunk. Nincs a példában kezelve a túl hosszú idejű lekérdezés megszakítása sem. HTML kóddal bővített példákhoz görgess lejjebb!

Async – await

GET

Kérjük le az összes ingatlan adatát, és írassuk ki a konzolra! Ehhez a GET metódust használjuk.
A program ellenőrzi, hogy a válasz sikeres-e (response.ok)
JSON-ná alakítja az adatokat. Kiírja a konzolra az ingatlanok adatait (ID, kategória, ár, leírás).
Ha hiba van, azt is jelzi.

 async function getIngatlanok() {
        try {
          const response = await fetch("http://localhost:5000/api/ingatlan");

          if (!response.ok) {
            throw new Error("Hiba a lekérdezés során: " + response.status);
          }

          const ingatlanok = await response.json();

          console.log("Sikeres lekérdezés! Ingatlanok:");
          ingatlanok.forEach((ingatlan) => {
            console.log(
              `ID: ${ingatlan.id}, Kategória: ${ingatlan.kategoriaNev}, Ár: ${ingatlan.ar}, Leírás: ${ingatlan.leiras}`
            );
          });
        } catch (error) {
          console.error("Hiba történt:", error.message);
        }
      }

      // Függvény meghívása
      getIngatlanok();

async function getIngatlanok() {

try {

const response = await fetch("http://localhost:5000/api/ingatlan");

if (!response.ok) {

throw new Error("Hiba a lekérdezés során: " + response.status);

}

const ingatlanok = await response.json();

console.log("Sikeres lekérdezés! Ingatlanok:");

ingatlanok.forEach((ingatlan) => {

console.log(

`ID: ${ingatlan.id}, Kategória: ${ingatlan.kategoriaNev}, Ár: ${ingatlan.ar}, Leírás: ${ingatlan.leiras}`

);

});

} catch (error) {

console.error("Hiba történt:", error.message);

}

// Függvény meghívása

getIngatlanok();

POST

Töltsünk fel egy új ingatlant!

async function postIngatlan() {
      const ujIngatlan = {
        kategoria: 1,
        leiras: "A külváros kertesházas részen, kétszintes ház nagy telken.",
        hirdetesDatuma: "2025-12-03",
        tehermentes: 1,
        ar: 1234567890,
        kepUrl: "https://example.com/haz.jpg"
      };

      try {
        const response = await fetch(`http://localhost:5000/api/ujingatlan`, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(ujIngatlan)
        });
        if (!response.ok) throw new Error("Hiba: " + response.status);
        const result = await response.json();
        console.log("Új ingatlan hozzáadva, ID:", result.id);
      } catch (error) {
        console.error("Hiba történt:", error.message);
      }
    }
 postIngatlan()

async function postIngatlan() {

const ujIngatlan = {

kategoria: 1,

leiras: "A külváros kertesházas részen, kétszintes ház nagy telken.",

hirdetesDatuma: "2025-12-03",

tehermentes: 1,

ar: 1234567890,

kepUrl: "https://example.com/haz.jpg"

};

try {

const response = await fetch(`http://localhost:5000/api/ujingatlan`, {

method: "POST",

headers: { "Content-Type": "application/json" },

body: JSON.stringify(ujIngatlan)

});

if (!response.ok) throw new Error("Hiba: " + response.status);

const result = await response.json();

console.log("Új ingatlan hozzáadva, ID:", result.id);

} catch (error) {

console.error("Hiba történt:", error.message);

}

postIngatlan()

DELETE

Töröljük ki a 14-es id-val ellátott ingatlant!

  async function deleteIngatlan() {
        try {
          const response = await fetch(
            `http://localhost:5000/api/ingatlan/14`,
            {
              method: "DELETE",
            }
          );
          if (!response.ok) throw new Error("Hiba: " + response.status);
          const result = await response.json();
          console.log("Ingatlan törölve:", result);
        } catch (error) {
          console.error("Hiba történt:", error.message);
        }
      }
      deleteIngatlan();

async function deleteIngatlan() {

try {

const response = await fetch(

`http://localhost:5000/api/ingatlan/14`,

{

method: "DELETE",

}

);

if (!response.ok) throw new Error("Hiba: " + response.status);

const result = await response.json();

console.log("Ingatlan törölve:", result);

} catch (error) {

console.error("Hiba történt:", error.message);

}

deleteIngatlan();

PUT

Frissítsük a 13-as ingatlant!

 async function putIngatlan() {
        const frissitettIngatlan = {
          kategoria: 1,
          leiras: "Teljesen felújított ház a belvárosban.",
          hirdetesDatuma: "2025-12-03",
          tehermentes: 1,
          ar: 60000000,
          kepUrl: "https://example.com/ujkep.jpg",
        };

        try {
          const response = await fetch(`http://localhost:5000/api/ingatlan/13`, {
            method: "PUT",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(frissitettIngatlan),
          });
          if (!response.ok) throw new Error("Hiba: " + response.status);
          const result = await response.json();
          console.log("Ingatlan teljes frissítve:", result);
        } catch (error) {
          console.error("Hiba történt:", error.message);
        }
      }
      putIngatlan()

async function putIngatlan() {

const frissitettIngatlan = {

kategoria: 1,

leiras: "Teljesen felújított ház a belvárosban.",

hirdetesDatuma: "2025-12-03",

tehermentes: 1,

ar: 60000000,

kepUrl: "https://example.com/ujkep.jpg",

};

try {

const response = await fetch(`http://localhost:5000/api/ingatlan/13`, {

method: "PUT",

headers: { "Content-Type": "application/json" },

body: JSON.stringify(frissitettIngatlan),

});

if (!response.ok) throw new Error("Hiba: " + response.status);

const result = await response.json();

console.log("Ingatlan teljes frissítve:", result);

} catch (error) {

console.error("Hiba történt:", error.message);

}

putIngatlan()

PATCH

Frissítsük a 13-as ingatlan árát! Patch esetén elég csak az árat elküldeni!

async function patchIngatlan() {
        try {
          const response = await fetch(`http://localhost:5000/api/ingatlan/13`, {
            method: "PATCH",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ ar: 65000000 }),
          });
          if (!response.ok) throw new Error("Hiba: " + response.status);
          const result = await response.json();
          console.log("Ingatlan részlegesen frissítve:", result);
        } catch (error) {
          console.error("Hiba történt:", error.message);
        }
      }
      patchIngatlan()

async function patchIngatlan() {

try {

const response = await fetch(`http://localhost:5000/api/ingatlan/13`, {

method: "PATCH",

headers: { "Content-Type": "application/json" },

body: JSON.stringify({ ar: 65000000 }),

});

if (!response.ok) throw new Error("Hiba: " + response.status);

const result = await response.json();

console.log("Ingatlan részlegesen frissítve:", result);

} catch (error) {

console.error("Hiba történt:", error.message);

}

patchIngatlan()

Feladat – zenészek

Gyakorló feladatsor, backend, megoldás: link

HTML kóddal bővítve, de még formázás nélkül

GET

Adatok lekérése a végpontról, és kiíratása div-be. Kérjük le az összes ingatlant! Egy egyszerű HTML-oldal, lefuttat egy asynchronous (async/await) JavaScript függvényt. Ez a függvény a fetch(‘http://localhost:8000/jaratok’) hívással lekéri a járatok listáját (JSON formátumban érkező tömböt). A választ JSON-ná alakítja, majd a kapott elemekből egy szöveges listát készít, és ezt beleírja a DOM-ba. Hibák esetén felhasználóbarát hibaüzeneteket jelenítsünk meg!

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Járatok</title>
</head>
<body>
    <div id="jaratok">Betöltés...</div>
    <script>
        async function fetchData() {
            const jaratokDiv = document.getElementById('jaratok');
            try {
                const response = await fetch('http://localhost:8000/jaratok');
                if (!response.ok) {
                    throw new Error('Hálózati hiba: ' + response.status);
                }
                const data = await response.json();
                
                jaratokDiv.innerHTML = data.map(item => 
                    `ID: ${item.id}, Járatszám: ${item.jaratSzam}, Típus: ${item.jaratTipus}, Első ajtós: ${item.elsoAjtos}`
                ).join('<br>');
            } catch (error) {
                jaratokDiv.textContent = 'Hiba történt: ' + error.message;
                console.error('Hiba történt a lekérés során:', error);
            }
        }
        fetchData();
    </script>
</body>
</html>a

<!DOCTYPE html>

<head>

<title>Járatok</title>

</head>

<body>

<div id="jaratok">Betöltés...</div>

async function fetchData() {

const jaratokDiv = document.getElementById('jaratok');

try {

const response = await fetch('http://localhost:8000/jaratok');

if (!response.ok) {

throw new Error('Hálózati hiba: ' + response.status);

}

const data = await response.json();

jaratokDiv.innerHTML = data.map(item =>

`ID: ${item.id}, Járatszám: ${item.jaratSzam}, Típus: ${item.jaratTipus}, Első ajtós: ${item.elsoAjtos}`

).join('<br>');

} catch (error) {

jaratokDiv.textContent = 'Hiba történt: ' + error.message;

console.error('Hiba történt a lekérés során:', error);

}

fetchData();

</script>

</body>

</html>a

DELETE

Töröljünk járatot, amihez szövegbeviteli mező segítségével adjuk meg a járat azonosító számát (id). A backend végpont az id alapján tudja azonosítani melyik járatról van szó, az id az elsődleges kulcs. HTTP DELETE kérést küldünk a http://localhost:8000/jarat/{id} végpontra.

Eseménykezelés: a DOMContentLoaded: csak akkor regisztráljon eseményeket, ha a DOM betöltése kész.
A törlés gombnak adunk egy eseménykezelőt, ami a click eseményt figyeli. Az eseményre megtörténik a beolvasás, alap validálás (nem üres ID), majd hívja a törlő függvényt. Nincs külön megerősítés, mivel ez csak egy egyszerű példa, élesben célszerű plussz megerősítést kérni a tényleges törlés előtt!
Enter támogatás: kényelmi funkció, Enter leütéskor a gomb kattintást emulálja.

<!DOCTYPE html>
<html lang="hu">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Járat törlés</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      margin: 2rem;
    }

    #uzenet {
      margin-top: 1rem;
      padding: .75rem;
      border: 1px solid #ddd;
      border-radius: 6px;
    }

    .hiba {
      color: #b00020;
    }

    .siker {
      color: #0b7a0b;
    }
  </style>
</head>

<body>

  <label for="jaratId">Törlendő járat ID-je:</label>
  <input type="number" id="jaratId" placeholder="pl. 88" min="1" />
  <button id="torlesGomb">Járat törlése</button>
  <div id="uzenet"></div>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const valaszDiv = document.getElementById('uzenet');
      valaszDiv.textContent = '';
      document.getElementById('torlesGomb').addEventListener('click', () => {
        const id = document.getElementById('jaratId').value.trim();
        if (!id) {
          valaszDiv.textContent = 'Kérlek, adj meg egy érvényes ID-t.';
          valaszDiv.className = 'hiba';
          return;
        }
        deleteJarat(id);
      });

      // Enter gombbal is lehessen indítani a törlést
      document.getElementById('jaratId').addEventListener('keydown', (e) => {
        if (e.key === 'Enter') {
          document.getElementById('torlesGomb').click();
        }
      });

      async function deleteJarat(id) {
        try {
          const response = await fetch(`http://localhost:8000/jarat/${id}`, {
            method: 'DELETE',
            headers: {
              'Accept': 'application/json'
            }
          });

          if (!response.ok) {
            let serverMsg = '';
            try {
              const errData = await response.json();
              serverMsg = (typeof errData === 'string') ? errData : JSON.stringify(errData);
            } catch {
              // lehet 204 vagy nem JSON
              serverMsg = response.statusText || 'Ismeretlen hiba';
            }
            throw new Error(`Hiba történt (${response.status}): ${serverMsg}`);
          }

          // DELETE-nél gyakran 204 No Content – ilyenkor nincs json
          let data = null;
          const hasBody = response.headers.get('content-length') !== '0' &&
            response.headers.get('content-type')?.includes('application/json');
          if (hasBody) {
            data = await response.json();
          }

          valaszDiv.textContent =
            'Kérés OK ' + (data ? `Válasz: ${JSON.stringify(data)}` : 'A szerver nem küldött törzset.');
          valaszDiv.className = 'siker';
          console.log('DELETE válasz:', data);
        } catch (error) {
          console.error('Hiba a törlés során:', error.message);
          valaszDiv.textContent = `Művelet eredménye: ${error.message}`;
          valaszDiv.className = 'hiba';
        }
      }
    });
  </script>
</body>

</html>

100

101

102

<!DOCTYPE html>

<head>

<title>Járat törlés</title>

<style>

body {

font-family: system-ui, sans-serif;

margin: 2rem;

}

#uzenet {

margin-top: 1rem;

padding: .75rem;

border: 1px solid #ddd;

border-radius: 6px;

}

.hiba {

color: #b00020;

}

.siker {

color: #0b7a0b;

}

</style>

</head>

<body>

<label for="jaratId">Törlendő járat ID-je:</label>

<button id="torlesGomb">Járat törlése</button>

document.addEventListener('DOMContentLoaded', () => {

const valaszDiv = document.getElementById('uzenet');

valaszDiv.textContent = '';

document.getElementById('torlesGomb').addEventListener('click', () => {

const id = document.getElementById('jaratId').value.trim();

if (!id) {

valaszDiv.textContent = 'Kérlek, adj meg egy érvényes ID-t.';

valaszDiv.className = 'hiba';

return;

}

deleteJarat(id);

});

// Enter gombbal is lehessen indítani a törlést

document.getElementById('jaratId').addEventListener('keydown', (e) => {

if (e.key === 'Enter') {

document.getElementById('torlesGomb').click();

}

});

async function deleteJarat(id) {

try {

const response = await fetch(`http://localhost:8000/jarat/${id}`, {

method: 'DELETE',

headers: {

'Accept': 'application/json'

}

});

if (!response.ok) {

let serverMsg = '';

try {

const errData = await response.json();

serverMsg = (typeof errData === 'string') ? errData : JSON.stringify(errData);

} catch {

// lehet 204 vagy nem JSON

serverMsg = response.statusText || 'Ismeretlen hiba';

}

throw new Error(`Hiba történt (${response.status}): ${serverMsg}`);

}

// DELETE-nél gyakran 204 No Content – ilyenkor nincs json

let data = null;

const hasBody = response.headers.get('content-length') !== '0' &&

response.headers.get('content-type')?.includes('application/json');

if (hasBody) {

data = await response.json();

}

valaszDiv.textContent =

'Kérés OK ' + (data ? `Válasz: ${JSON.stringify(data)}` : 'A szerver nem küldött törzset.');

valaszDiv.className = 'siker';

console.log('DELETE válasz:', data);

} catch (error) {

console.error('Hiba a törlés során:', error.message);

valaszDiv.textContent = `Művelet eredménye: ${error.message}`;

valaszDiv.className = 'hiba';

}

});

</script>

</body>

</html>

POST

A következő weblap lehetővé teszi új járat adatainak felvitelét az adatbázisba. A felhasználó megadja az ID-t, járatszámot, járat típusát és azt, hogy első ajtós-e, majd az adatokat HTTP POST kéréssel elküldi a http://localhost:8000/jarat végpontra. Az adatbázisban nincs auto increment beállítva, így az id-t is fel kell venni.
addJarat() függvény: fetch POST kérést küld JSON formátumban. Ellenőrzi a response.ok státuszt, hibás válasz esetén kiolvassa a szöveget és dobja az Error-t. Siker esetén JSON-t ad vissza.
Űrlap eseménykezelés: submit esemény. A preventDefault() megakadályozza teljes oldal‑újratöltést.

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Járat felvitele</title>
</head>
<body>
    <h1>Új járat felvitele</h1>

    <!-- Űrlap: mind a négy adatot bekérjük -->
    <form id="jaratForm">
        <div>
            <label for="id">ID (szám):</label>
            <input type="number" id="id" name="id" required />
        </div>

        <div>
            <label for="jaratSzam">Járatszám (pl. 86):</label>
            <input type="text" id="jaratSzam" name="jaratSzam" required />
        </div>

        <div>
            <label for="jaratTipus">Járat típus (pl. T, M):</label>
            <input type="text" id="jaratTipus" name="jaratTipus" maxlength="2" required />
        </div>

        <div>
            <label for="elsoAjtos">Első ajtós?</label>
            <!-- 0 / 1 választás (backendnek gyakran így kényelmes) -->
            <select id="elsoAjtos" name="elsoAjtos" required>
                <option value="0">Nem</option>
                <option value="1">Igen</option>
            </select>
        </div>

        <button type="submit">Mentés</button>
    </form>

    <pre id="valasz" style="white-space: pre-wrap;"></pre>

    <script>
        async function addJarat(ujJaratAdatai) {
            try {
                const response = await fetch('http://localhost:8000/jarat', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(ujJaratAdatai)
                });

                if (!response.ok) {
                    // Ha a backend hibát ad vissza, olvassuk ki a szöveget is
                    const text = await response.text();
                    throw new Error(`Hiba történt: ${response.status} – ${text}`);
                }

                const data = await response.json();
                return data;
            } catch (error) {
                throw error;
            }
        }

        // Űrlap beküldés kezelése
        document.getElementById('jaratForm').addEventListener('submit', async (e) => {
            e.preventDefault();

            const idInput = document.getElementById('id');
            const jaratSzamInput = document.getElementById('jaratSzam');
            const jaratTipusInput = document.getElementById('jaratTipus');
            const elsoAjtosSelect = document.getElementById('elsoAjtos');
            const valaszPre = document.getElementById('valasz');

            // Alap ellenőrzések (frontend)
            const id = Number(idInput.value);
            const jaratSzam = jaratSzamInput.value.trim();
            const jaratTipus = jaratTipusInput.value.trim().toUpperCase();
            const elsoAjtos = Number(elsoAjtosSelect.value); // 0 vagy 1

            if (!Number.isInteger(id) || id < 0) {
                valaszPre.textContent = 'Hiba: az ID pozitív egész szám legyen.';
                return;
            }
            if (!jaratSzam) {
                valaszPre.textContent = 'Hiba: a Járatszám kötelező.';
                return;
            }
            if (!jaratTipus) {
                valaszPre.textContent = 'Hiba: a Járat típus kötelező.';
                return;
            }
            if (![0, 1].includes(elsoAjtos)) {
                valaszPre.textContent = 'Hiba: az Első ajtós értéke 0 vagy 1 lehet.';
                return;
            }

            const ujJaratAdatai = {
                id: id,
                jaratSzam: jaratSzam,
                jaratTipus: jaratTipus,
                elsoAjtos: elsoAjtos
            };

            valaszPre.textContent = 'Küldés folyamatban...';

            try {
                const data = await addJarat(ujJaratAdatai);
                valaszPre.textContent = 'Sikeres mentés!\n\n' + JSON.stringify(data, null, 2);
                               // Opcionálisan ürítsük az űrlapot:
                // e.target.reset();
            } catch (err) {
                valaszPre.textContent = 'Hiba a mentés során:\n' + (err?.message || err);
            }
        });
    </script>
</body>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

<!DOCTYPE html>

<head>

<title>Járat felvitele</title>

</head>

<body>

<h1>Új járat felvitele</h1>

<div>

</div>

<div>

<label for="jaratSzam">Járatszám (pl. 86):</label>

</div>

<div>

<label for="jaratTipus">Járat típus (pl. T, M):</label>

</div>

<div>

<label for="elsoAjtos">Első ajtós?</label>

</select>

</div>

<button type="submit">Mentés</button>

</form>

async function addJarat(ujJaratAdatai) {

try {

const response = await fetch('http://localhost:8000/jarat', {

method: 'POST',

headers: {

'Content-Type': 'application/json'

body: JSON.stringify(ujJaratAdatai)

});

if (!response.ok) {

// Ha a backend hibát ad vissza, olvassuk ki a szöveget is

const text = await response.text();

throw new Error(`Hiba történt: ${response.status} – ${text}`);

}

const data = await response.json();

return data;

} catch (error) {

throw error;

}

// Űrlap beküldés kezelése

document.getElementById('jaratForm').addEventListener('submit', async (e) => {

e.preventDefault();

const idInput = document.getElementById('id');

const jaratSzamInput = document.getElementById('jaratSzam');

const jaratTipusInput = document.getElementById('jaratTipus');

const elsoAjtosSelect = document.getElementById('elsoAjtos');

const valaszPre = document.getElementById('valasz');

// Alap ellenőrzések (frontend)

const id = Number(idInput.value);

const jaratSzam = jaratSzamInput.value.trim();

const jaratTipus = jaratTipusInput.value.trim().toUpperCase();

const elsoAjtos = Number(elsoAjtosSelect.value); // 0 vagy 1

if (!Number.isInteger(id) || id < 0) {

valaszPre.textContent = 'Hiba: az ID pozitív egész szám legyen.';

return;

}

if (!jaratSzam) {

valaszPre.textContent = 'Hiba: a Járatszám kötelező.';

return;

}

if (!jaratTipus) {

valaszPre.textContent = 'Hiba: a Járat típus kötelező.';

return;

}

if (![0, 1].includes(elsoAjtos)) {

valaszPre.textContent = 'Hiba: az Első ajtós értéke 0 vagy 1 lehet.';

return;

}

const ujJaratAdatai = {

id: id,

jaratSzam: jaratSzam,

jaratTipus: jaratTipus,

elsoAjtos: elsoAjtos

};

valaszPre.textContent = 'Küldés folyamatban...';

try {

const data = await addJarat(ujJaratAdatai);

valaszPre.textContent = 'Sikeres mentés!\n\n' + JSON.stringify(data, null, 2);

// Opcionálisan ürítsük az űrlapot:

// e.target.reset();

} catch (err) {

valaszPre.textContent = 'Hiba a mentés során:\n' + (err?.message || err);

}

});

</script>

</body>

Hagyományos módon, .then használatával API kezelés

GET

 fetch("http://localhost:5000/api/ingatlan")
        .then((response) => {
          if (!response.ok) {
            throw new Error("Hiba a lekérdezés során: " + response.status);
          }
          return response.json();
        })
        .then((ingatlanok) => {
          console.log("Sikeres lekérdezés! Ingatlanok:");
          ingatlanok.forEach((ingatlan) => {
            console.log(
              `ID: ${ingatlan.id}, Kategória: ${ingatlan.kategoriaNev}, Ár: ${ingatlan.ar}, Leírás: ${ingatlan.leiras}`
            );
          });
        })
        .catch((error) => {
          console.error("Hiba történt:", error.message);
        });

fetch("http://localhost:5000/api/ingatlan")

.then((response) => {

if (!response.ok) {

throw new Error("Hiba a lekérdezés során: " + response.status);

}

return response.json();

})

.then((ingatlanok) => {

console.log("Sikeres lekérdezés! Ingatlanok:");

ingatlanok.forEach((ingatlan) => {

console.log(

`ID: ${ingatlan.id}, Kategória: ${ingatlan.kategoriaNev}, Ár: ${ingatlan.ar}, Leírás: ${ingatlan.leiras}`

);

});

})

.catch((error) => {

console.error("Hiba történt:", error.message);

});

POST

Töltsünk fel az adatbázisba egy új ingatlant! Az új ingatlan adatait egy objektumban fogom tárolni.

      const uj_ingatlan = {
        kategoria: 1, // Tegyük fel, hogy a "Ház" kategória ID-ja 1
        leiras:
          "Belvárosi részen, kétszintes házat kínálunk nyugodt környezetben, nagy telken.",
        hirdetesDatuma: "2025-12-03", // Aktuális dátum
        tehermentes: 1, // 1 = tehermentes, 0 = nem
        ar: 55000000,
        kepUrl: "https://example.com/haz.jpg", // Példa kép URL
      };

      fetch("http://localhost:5000/api/ujingatlan", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(uj_ingatlan),
      })
        .then((response) => {
          if (!response.ok) {
            throw new Error("Hiba a feltöltés során: " + response.status);
          }
          return response.json();
        })
        .then((eredmeny) => {
          console.log("Sikeres hozzáadás! Új ingatlan ID:", eredmeny.id);
        })
        .catch((error) => {
          console.error("Hiba történt:", error.message);
        });

const uj_ingatlan = {

kategoria: 1, // Tegyük fel, hogy a "Ház" kategória ID-ja 1

leiras:

"Belvárosi részen, kétszintes házat kínálunk nyugodt környezetben, nagy telken.",

hirdetesDatuma: "2025-12-03", // Aktuális dátum

tehermentes: 1, // 1 = tehermentes, 0 = nem

ar: 55000000,

kepUrl: "https://example.com/haz.jpg", // Példa kép URL

};

fetch("http://localhost:5000/api/ujingatlan", {

method: "POST",

headers: {

"Content-Type": "application/json",

body: JSON.stringify(uj_ingatlan),

})

.then((response) => {

if (!response.ok) {

throw new Error("Hiba a feltöltés során: " + response.status);

}

return response.json();

})

.then((eredmeny) => {

console.log("Sikeres hozzáadás! Új ingatlan ID:", eredmeny.id);

})

.catch((error) => {

console.error("Hiba történt:", error.message);

});

DELETE

Töröljünk ki egy ingatlant, pl. a 12-es id-val ellátottat.

 fetch("http://localhost:5000/api/ingatlan/12", {
        method: "DELETE",
      })
        .then((response) => {
          if (!response.ok) {
            throw new Error("Hiba a törlés során: " + response.status);
          }
          return response.json();
        })
        .then((eredmeny) => {
          console.log(
            "Sikeres törlés:",
            eredmeny.message,
            "Törölt ID:",
            eredmeny.deletedId
          );
        })
        .catch((error) => {
          console.error("Hiba történt:", error.message);
        });

fetch("http://localhost:5000/api/ingatlan/12", {

method: "DELETE",

})

.then((response) => {

if (!response.ok) {

throw new Error("Hiba a törlés során: " + response.status);

}

return response.json();

})

.then((eredmeny) => {

console.log(

"Sikeres törlés:",

eredmeny.message,

"Törölt ID:",

eredmeny.deletedId

);

})

.catch((error) => {

console.error("Hiba történt:", error.message);

});

PUT

Módosítsuk a 13-as id-val ellátott ingatlan leírását, tetszés szerinti adatait!

fetch("http://localhost:5000/api/ingatlan/13", {
  method: "PUT",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    kategoria: 1,
    leiras: "Új leírás",
    hirdetesDatuma: "2025-12-03",
    tehermentes: 1,
    ar: 60000000,
    kepUrl: "https://example.com/ujkep.jpg"
  })
});

fetch("http://localhost:5000/api/ingatlan/13", {

method: "PUT",

headers: { "Content-Type": "application/json" },

body: JSON.stringify({

kategoria: 1,

leiras: "Új leírás",

hirdetesDatuma: "2025-12-03",

tehermentes: 1,

ar: 60000000,

kepUrl: "https://example.com/ujkep.jpg"

})

});

PATCH

Patch esetén elég csak azt az adatot elküldeni, amit ténylegesen frissítünk!

fetch("http://localhost:5000/api/ingatlan/13", {
  method: "PATCH",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    ar: 99999999 // Csak az ár módosul
  })
});

fetch("http://localhost:5000/api/ingatlan/13", {

method: "PATCH",

headers: { "Content-Type": "application/json" },

body: JSON.stringify({

ar: 99999999 // Csak az ár módosul

})

});

Példa: ingatlanok

Async – await

GET

POST

DELETE

PUT

PATCH

Feladat – zenészek

HTML kóddal bővítve, de még formázás nélkül

GET

DELETE

POST

Hagyományos módon, .then használatával API kezelés

GET

POST

DELETE

PUT

PATCH

Kategóriák

Friss bejegyzések

React Outlet

React NavLink, UseNavigate