JavaScipt fetch sorában id megadása a http címhez
2020-06-12T16:22:53+02:00
2020-06-15T22:21:47+02:00
2022-08-11T20:35:32+02:00
AhaSzem
Sziasztok!
Ingyenes webfejlesztés programban veszek részt (csak videók vannak, kérdezni nem lehet ott).
Elakadtam egy példaprogram írásában , az id-t kéne az url-hez hozzáadni   :

< fetch('http://localhost:3000/users/${data.id}',fetchOptions) .... />
A Gogle Crome alatt futtatok egy szervert.  A
<

${data.id}
/>
tartalmazza az adott sor id -jét.  Sajnos sehogy se akarja átadni a szervernek (json-server).
Egy korábbi helyen meg tudtam oldani, hogy egy változóba beletettem és hozzáfűztem a címhez, de itt nem tudtam.
Hogy lehetne megadni helyesen az adott URL + ID +
- vel meghatározott sort ?
Ha szükséges, beteszem ide a teljes mai.js filet, de elég nagy és remélem ennyi elég ?

Mutasd a teljes hozzászólást!
163. sorban:

metod: "PUT"
helyett:

method: "PUT"
mivel elírtad, így az alapértemezett GET-et használja és mivel a 169. sorban megadtál küldendő adatot, így ezt zokon veszi mert GET kérésnek nincs body része - innen jön a hibaüzenet: "Request with GET/HEAD method cannot have body"
Mutasd a teljes hozzászólást!

  • Ez ' helyett, ez `
    fetch(`http://localhost:3000/users/${data.id}`,fetchOptions)

    vagy simán konkatenálás
    fetch('http://localhost:3000/users/' + data.id,fetchOptions)
    Mutasd a teljes hozzászólást!
  • Ezt is kipróbáltam. Hibaüzenet:
    <
    TypeError: Failed to execute 'fetch' on 'Window': Request with GET/HEAD method cannot have body.
        at setRow (main.js:178)
        at HTMLButtonElement.onclick (index.html:1)
    />

    a 178. sor az ominózus:

    <
    fetch('http://localhost:3000/users/'+data.id , fetchOptions)
    />




    korábban buttonSorId változóval megoldottam, de itt nem tudtam:


    <
    let buttonSorId;
    function delRow(btn) {
        let tr = btn.parentElement.parentElement.parentElement;
        buttonSorId = tr.querySelector("td:first-child").innerHTML;
        let fetchOptions = {
            method: "DELETE",
            mode: "cors", //többféle domain között is müködik
            cache: "no-cache"
        };

        fetch('http://localhost:3000/users/' + buttonSorId, fetchOptions).then(
            resp => resp.json(),
            err => console.error(err)
        ).then(
            data => {
                startGetUsers();
            }
        );
    }
    />
    Mutasd a teljes hozzászólást!
  • Hogy néz ki a hozzá tartozó fetchOptions?
    Mutasd a teljes hozzászólást!
  • Közben kiderült, hogy én a
    < shift+1 />
    jelet használtam a

    < "backtick" karakter :( ctrl + alt + 7 ) />
    helyett.

    A példa programom egy

    <json-server/>
    szerveren levő adatokat módosítja. Az új adat hozzáadása most már megy, de a törlésnél és az adat módosításnál hibaüzenete ad:

    < main.js:94 DELETE http://localhost:3000/users/%3Cinput%20class=%22form-control%22%20value=%223%22%20name=%22id%22%20readonly=%22true%22%3E 404 (Not Found) TypeError: Failed to execute 'fetch' on 'Window': Request with GET/HEAD method cannot have body. at setRow (main.js:177) at HTMLButtonElement.onclick />
    Ha a csatolás nem látszik, ha kikapcsolom a számítógépemet akkor majd bemásolom ide.
    Mutasd a teljes hozzászólást!
    Csatolt állomány
  • 163. sorban:

    metod: "PUT"
    helyett:

    method: "PUT"
    mivel elírtad, így az alapértemezett GET-et használja és mivel a 169. sorban megadtál küldendő adatot, így ezt zokon veszi mert GET kérésnek nincs body része - innen jön a hibaüzenet: "Request with GET/HEAD method cannot have body"
    Mutasd a teljes hozzászólást!
  • Elírtam és nem vettem észre.
    Köszönöm, így a módosítás gomb működik!

    A delete gombnál nem ír ki hibát, viszont nem törli a sort .

    Külön kérdésnek rakjam be ?
    Mutasd a teljes hozzászólást!
  • < let fetchOptions = { method: "DELETE", mode: "cors", //többféle domain között is müködik cache: "no-cache" }; />
    Mutasd a teljes hozzászólást!
  • Ha megnézed a network (hálózat) fület, akkor ott milyen url-re megy a DELETE kérés? Lehet az id kinyerésével van a gond.
    Mutasd a teljes hozzászólást!
  • < delRow(btn) { let tr = btn.parentElement.parentElement.parentElement; let id = tr.querySelector("td:first-child").innerHTML; let fetchOptions = { method: "DELETE", mode: "cors", cache: "no-cache", headers: { 'Content-Type': 'application/json' } }; //let idRow =[id.value]; fetch(`http://localhost:3000/users/${id}`, fetchOptions).then( resp => resp.json(), err => console.error(err) ).then( data => { startGetUsers(); } ); } />
    Codepen.io  nem talált benne hibát :(
    A   <let fetchOptions/>
    - nál megállítottam a programot és az id tartalma akkor:
     < <input class= "form-control" value="2" name="id" >  />

    ha átirtam id.value -ra:

    < fetch(`http://localhost:3000/users/${id.value}`, fetchOptions).then( .... />

    akkor: url:
    < "http://localhost:3000/users/undefined" />
    hibaüzenetet küld
    Mutasd a teljes hozzászólást!
  • Légyszíves ne használd már a < /> kód beágyazásra, alig követhető a kód, de lehet csak engem zavar. 

    Amikor írod a hozzászólást, akkor a fenti sávban, ahol a B " van, ott a harmadik a kód beágyazás.

    pl:

    fetch(`http://localhost:3000/users/${id.value}`, fetchOptions).then
    Mutasd a teljes hozzászólást!
  • erre gondoltál ?




    a harmadik pedig: </> amit használtam, vagy valamit félreértettem ?
    Egyébként a kérdésemre is tudod a választ ?
    Mutasd a teljes hozzászólást!
  • Erre:
     < <input class= "form-control" value="2" name="id" > />

    , ami ilyen:

    <input class= "form-control" value="2" name="id" >
    Rákell kattintani, és utána beleírni/beilleszteni a kódot.

    Nem néztem meg mi a kérdés/kód, mert kifolyt a szemem a kacsacsőröktől
    Mutasd a teljes hozzászólást!
  • Az id szerintem nincs jól lekérve:

    let id = tr.querySelector("td:first-child").innerHTML;
    helyett, próbáld meg:
    ha az input: 
    <input id="idField" class= "form-control" value="2" name="id" > let id = document.getElementById("idField").value;
    Mutasd a teljes hozzászólást!
  • Köszönöm a válaszodat, de nem látom hogy cserélhetném le. Egyébként feljebb csatoltam
    main.js
    fájt, amiben a sor törlése részről van szó. Csatolom újra mert kicsit megváltozott azóta.
    Mutasd a teljes hozzászólást!
    Csatolt állomány
  • Lortk válasza, lépésről lépésre:

    - A HTML-ben az inputodnak adsz egy id attribútumot, pl: "idField"

    - Ezt a kódrészt:

    let tr = btn.parentElement.parentElement.parentElement; let id = tr.querySelector("td:first-child").innerHTML; let idRow =id.querySelector("id:first-child");
    lecseréled erre:

    let id = document.getElementById("idField").value;
    Mutasd a teljes hozzászólást!
  • Még annyi hozzátartozik, hogy az input fieldnek kell adni egy id-t. 
    Ha jól láttam, akkor userekről van szó, így gondolom, hogy a törlendő user id-ját lehet megadni az  input-ban. 



    Szóval az id lehet pl:

    <input id="userId" class= "form-control" value="2" name="id" >
    és a akkor, ahogy Radikatkat is írta a fenti három sort kell lecserélni, viszont 
    annak az id-nak, ami az inputnak van, megkell egyeznie azzal, amit a js-ből elvan kérve:

    let id = document.getElementById("userId").value;
    Mutasd a teljes hozzászólást!
  • betettem az id-hez :

    <th id="idField" >#</th>
    és lekérdeztem ahogy írtad, majd  a console.log() segítségével kiírattam a konzolra, de azt írta ki, hogy nincs tartalma

    index.html
    csatolva
    Mutasd a teljes hozzászólást!
    Csatolt állomány
  • Végül megoldottam, bár eléggé bonyolultan. Az eredeti videóban az id változóba rögtön szám jelent meg, nálam pedig:

    <input class= "form-control" value="2" name="id" >
    Ezért ezt nem lehet az url címhez adni, hanem ki kell vágni a value számot és azt stringként hozzáadni. Biztos van egyszerűbb megoldás is az adott sor sorszámának kinyerésére, de ez végül működött:

    function delRow(btn) {
        let tr = btn.parentElement.parentElement.parentElement;
        let id = tr.querySelector("td:first-child").innerHTML;
        let idRowX = id.indexOf("value");
        let idRow = id.substr(idRowX + 6);
        let idRowY = idRow.indexOf("name");
        let idRowZ = idRow.substr(1, idRowY - 1);
        let idSzam = parseInt(idRowZ);
        let idRowS = idSzam.toString();
        let fetchOptions = {
            method: "DELETE",
            mode: "cors",
            cache: "no-cache"
        };


        fetch(`http://localhost:3000/users/${idRowS}`, fetchOptions).then(
            resp => resp.json(),
            err => console.error(err)
        ).then(
            data => {
                startGetUsers();
            }
        );


    }
    Mutasd a teljes hozzászólást!
  • Ennyire nem kell megbonyolítani a dolgot, querySelectorral tudsz hivatkozni rögtön az inputra, és utána annak már el tudod érni a value attribútumát:

    let tr = btn.parentElement.parentElement.parentElement; let id = tr.querySelector("td:first-child input").value; fetch(`http://localhost:3000/users/${id}`, fetchOptions)...
    Mutasd a teljes hozzászólást!
  • Köszönöm, így egyszerűbb és jobb !
    Duplán megérdemled a pontot !
    Mutasd a teljes hozzászólást!
Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd