Javascript Fetch API - Wie kann ich den Output als Variable weiterbearbeiten?

Ich hole mir in einer scoreboard.php Datei eine Liste mit Werten aus meiner MySQL Datenbank. Wie kann ich diese PHP Datei aus einem Script heraus aufrufen und die zurückgegebenen Werte weiter verarbeiten? Ich bin soweit, dass ich die Werte zwar mit console.log() ausgeben kann, jedoch hilft mir das nicht, da ich sie nicht ausgeben möchte sondern noch weiter verarbeiten.

var results;
fetch("includes/scoreboard.php")
  .then(res => res.text())
  .then(data => results = data);
  .then(() => console.log(results))

Wie bekomme ich die Ausgabe einer externen PHP Datei in eine JS Variable?

2 Antworten

Vom Beitragsersteller als hilfreich ausgezeichnet

TechPech1984

Nutzer, der sehr aktiv auf gutefrage ist

im Thema Computer

17.05.2022, 16:53

wäre halt die frage wie result den aussieht .

man kann es als JSON schicken und dann als mit JSON decodieren und in eine array variable packen oder oder oder .

wir wissen ja nicht was du da bekommst.

und immer daran denken asyncron heist , das script ist schon am ende wenn du die antwort bekomst, also muss alles da passieren wo regex9 dir es gezeigt hat , ggf eine neue funktion dort aufrufen und result übergeben .

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, Technik, Webseite

17.05.2022, 16:54

Die Daten, die du von deinem PHP-Skript / dem Server zurückgeschickt bekommst, stehen in data. Du kannst sie im Callback weiterverarbeiten.

fetch("includes/scoreboard.php")
  .then(response => response.text())
  .then(data => {
    /* do something here with data ... */
  });

DerAnonyme35604

Beitragsersteller

17.05.2022, 16:55

also kann ich die Daten nur mit ".then" statements weiterbenutzen und nicht in einer JS Variable speichern?

TechPech1984

17.05.2022, 16:57

@DerAnonyme35604

ja den asyncron heist, ds script ist schon lange am ende wenn die antwort kommt . du kannst also eine funktion machen und die aufrufen und die daten übergeben .

DerAnonyme35604

Beitragsersteller

17.05.2022, 16:58

@TechPech1984

async habe ich gar nicht benutzt. wie saähe die funktion zum Übergeben aus?

regex9

17.05.2022, 16:59

@DerAnonyme35604

Bei fetch handelt es sich um eine asynchrone Aktion. Es ist nicht klar, wann der Response geliefert wird. Also musst du entweder auf die Rückgabe warten (async/await) oder du nutzt die Callbacks, die nach dem Erhalten des Response ausgeführt werden.

TechPech1984

17.05.2022, 17:03

@DerAnonyme35604

fetch("includes/scoreboard.php")
  .then(response => response.text())
  .then(data => {
    meinefunktion(data);
  });

function meinefunktion(meinedaten) {
 ... hier gehts weiter mit meinedaten .... 
}

DerAnonyme35604

Beitragsersteller

17.05.2022, 17:03

@regex9

Werde ich nachher einmal probieren, Vielen Dank erst einmal

DerAnonyme35604

Beitragsersteller

17.05.2022, 20:44

@DerAnonyme35604

Hat super funktioniert, danke sehr

Ähnliche Beiträge

Return ergibt undefined?

Moin

ich habe mit einem projekt gestartet und in diesem projekt hole ich mir von einer Github page die version nd vergleiche sie bzw. ich wollte das. Ich habe es mit Fetch() probiert. In node.js

fetch(adress).then(r => {
    return r.json()
})

und so

fetch(adress).then(r => {
    console.log(r.json());
}).then(data => {
    return data
})

Ich kriege aber wenn ich es console immer

undefined

zurück

...zum Beitrag

Javascript Ajax Php kein Wert?

Console:

HTML javascript Code ajax:

function send(text){
   console.log("Text kurz vor versenden:\n" +text);
//hier hat er noch einen wert
   $.ajax({
     method: "POST",
     url: "DataSender.php",
     data: { text: text}
   }).done(function( response ) {
       console.log(response);
     console.log("weiterleitung

Php Code Ajax Übertragung wo es nicht geht:

      $text = $_POST['text'];
      $sql = "INSERT INTO `Xss-Data` (`ID`,`DATA`, `created_at`) VALUES (null, '{$text}' , CURRENT_TIMESTAMP)";

      if (empty($text)) {
              //das ist empty!
              echo("Error:\nEs ist leer\nText wäre\n$text");
          } else

Sind die wichtigen Code snippets

Der String hat keinen Wert. Warum? Wie löst man das?

...zum Beitrag

Braucht man SSH um Node JS apps zu Deployen?

Meine index.js :

const app = require("express")();
const http = require("http").Server(app);
const io = require("socket.io")(http);

http.listen(3000,()=>{
    console.log("working")
})
app.get('/index.html', (req, res) => {
    res.send('<h1>Hello world</h1>');
  });

Lokal funktioniert das, wenn ich localhost:3000/index.html

aufrufe erscheint ein Hello World,

aber wenn ich das ganze über FTP hochlade und url/index.html aufrufe :

Leere Html Seite und Konsole Error :

index.js:1 Uncaught ReferenceError: require is not defined

Also hat der Server garkein Node JS.

SSH hab ich aber garnicht, um dann mit irgendwelchen Ubuntu Commands das zu installieren, sudo apt install nodejs ...

Sry wenn es eine Dumme Frage ist aber ich hab bis jetzt nur Serverseitig Php gemacht und das ist sehr simple.

Man benutzt Fetch oder Ajax und im php skript echo "hello world"; und das wars.

Wollte mich an Node JS Ranwagen, das ganze ist aber viel komplexer.

(Bin bei All inkl)

...zum Beitrag

javascript api probleme?

Hallo,

guckt euch mal meinen Code an.

JAVASCRIPT:

// INPUT
const login = document.getElementById("loginInput");
const password = document.getElementById("passwordInput");
const button = document.getElementById("sendButton");


// FETCH
const url = "https://crudcrud.com/api/4b3acc467d8c47d8a608bb9820171935/todos"



const dataRender = (array) => {
  if (array === undefined) {
    console.log("Loading results...");
  } else {
    let dataList = array.map((item) => {
      return `
      <div class="users">
        <p>${item.login}</p>
        <button onclick="deleteRequest(${item.id})">Delete</button>
        </div>
        `;
    });
    const getHtml = document.getElementById("userTable");
    getHtml.innerHTML = dataList.join("");
  }
};


const fetchData = async () => {
  try {
    const response = await fetch(url);
    const data = await response.json();
    dataRender(data);
  } catch (error) {
    console.error(error);
  }
};



fetchData();


const postRequest = async () => {
  const data = {
    login: login.value,
    password: password.value,
    isLogin: false,
  };


  try {
    const response = await fetch(url, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    });


    const results = await response.json();
    console.log(results.message);
  } catch (error) {
    console.error(error);
  }


};


button.addEventListener("click", postRequest);


const deleteRequest = async (id) => {
  try {
    const response = await fetch(`${url}/${id}`, {
      method: "DELETE",
      headers: {
        "Content-Type": "application/json",
      }
    })
    const results = await response.json()
    console.log(results.message);
  }
  catch (error) {
    console.error(error);
  }
}

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CRUD</title>
  <script  defer src="./script.js"></script>
</head>
<body>
  <form>
    <input id="loginInput" type="text" placeholder="Login">    
    <input id="passwordInput" type="password" placeholder="Password">    
    <button onclick="" id="sendButton">Send</button>


    <div id="userTable">
      
    </div>
  </form>
</body>
</html>

Mein Ziel:

Wenn ihr auf das button "Send" drückt, dann erscheint ja der value von dem input "login" auf HTML (innerHTML heisst das glaube ich). Und zusammen mit dem value erscheint auch ein anderer Button namens "Delete". Mein Ziel ist es, dass wenn ich auf "Delete" drücke, dann sollte das item aus Backend-Server und aus HTML gelöscht werden. Aber das klappt bei mir die ganze Zeit nicht. Einfacher ist es wenn ihr meinen Code einfügt und selber mal den Code testet, dann werdet ihr verstehen, was ich machen will.

Bitte helft mir! Ich sitze schon wirklich lange dranrum und ohne Erfolg!

Dankeschön im Voraus!

MfG

MrOsmo

...zum Beitrag

Uncaught Error: Call to a member function fetch() on bool in?

Kann mir jemand sagen, was ich falsch gemacht habe?

<section claas="container" id="products">
  <div class="row">
    <?php while($row = $result->fetch()): ?>
      <div class="col">
        <?php include 'card.php' ?>
      </div>
    <?php endwhile; ?>
  </div>
</section>

...zum Beitrag

wie gibt man mit html einer php variable einen wert?

also wie gibt man einer php variable in einem html formular einen wert aus dem formular?

...zum Beitrag

Node.js http-data außerhalb der Request?

Hallo,

ich habe folgendes Problem:

Ich hab eine HTTP-GET-Request abgeschickt und möchte nun die zurückgelieferte Data außerhalb dieses Aufrufs nutzen können. Ich kriegs aber irgendwie nicht hin. Ich hätt gern außerhalb des http.get eine Variable, in die die Data dann gespeichert wird.

So sieht mein Source-Code aus:

http_get = http.get('exampleapi.com/api', (res) => {
    //console.log('statusCode: ', res.statusCode);
    //console.log('headers:', res.headers);



    let response = '';
    res.on('data', (d) => {
        response += d;
    })
    
    res.on('end', () => {
        console.log(response);
    })
});

Die Anfrage geht an ne Steam-API, welche mir ein JSON-Objekt zurückliefert, falls das hilft :)

...zum Beitrag

[PHP]Wieso bekomme ich hier ein Variable Fehler?

$eo=$result->fetch(PDO::FETCH_ASSOC);

syntax error, unexpected variable "$eo"

...zum Beitrag

NodeJS MySQL prepared statement return value?

Hallo zusammen,

ich hab folgendes Problem: Ich schreibe grade ein NodeJS-Backend mit einer Verbindung zu einer Datenbank. Dazu nutze ich das Node-Modul "mysql". Es funktioniert auch soweit prima. Wenn ich einen query ohne prepare stelle, erhalte ich auch ein Ergebnis der Datenbank. Wenn ich nun mit Prepare einen Query stelle, erhalte ich hingegen nur ein leeres Array zurück. Der Nutzername, der verwendet wird, existiert auf jeden Fall.

Weiß jemand in diesem Falle einen Rat?

LG,

...zum Beitrag

Spotify API Get Methode Blocked?

Moin, hab mal ne Frage, da ich es einfach nicht hin bekomme. Ich habe vor sowas wie eine Musikwunsch Seite für ein Schul Projekt zu coden. Dafür will ich die Spotify API nutzen, damit man über diese Songs suchen kann. Es kommt aber immer in der Netzwerkanalyse der Fehler NS_BINDING_ABORTED, obwohl mein Access Token korrekt ist. Hier ist meine script.js

const API_ENDPOINT = "https://api.spotify.com/v1/search";
const ACCESS_TOKEN = "your_access_token";

function searchSong() {
    let songName = document.getElementById("song-name").value;

    fetch(`${API_ENDPOINT}?q=${songName}&type=track`, {
        headers: {
            "Authorization": `Bearer ${ACCESS_TOKEN}`
        }
    })
    .then(response => response.json())
    .then(data => {
        let songResults = data.tracks.items;

        if (songResults.length > 0) {
            let songList = document.createElement("ul");

            for (let i = 0; i < songResults.length; i++) {
                let song = songResults[i];

                let songItem = document.createElement("li");
                songItem.innerHTML = `<a href="javascript:void(0)" onclick="selectSong('${song.id}')">${song.name} by ${song.artists[0].name}</a>`;

                songList.appendChild(songItem);
            }

            let songResultsDiv = document.getElementById("song-results");
            songResultsDiv.innerHTML = "";
            songResultsDiv.appendChild(songList);
        } else {
            let songResultsDiv = document.getElementById("song-results");
            songResultsDiv.innerHTML = "Sorry, no songs found.";
        }
    })
    .catch(error => {
        const errorMessage = document.getElementById("error-message");
        errorMessage.innerText = error;
    });
}

function selectSong(songId) {
    fetch("db.php", {
        method: "POST",
        body: JSON.stringify({songId: songId}),
        headers: {
            "Content-Type": "application/json"
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert("Song added to the list!");
        } else {
            alert("Error adding song to the list.");
        }
    })
    .catch(error => {
        console.log(error);
    });
}

Hier ist dann noch die Index.html:

 <!DOCTYPE html>
<html>
<head>
    <title>DJ Song Request</title>
    <script src="script.js"></script>
</head>
<body>
    <h1>DJ Song Request</h1>
    <form>
        <label for="song-name">Enter song name:</label>
        <input type="text" id="song-name" name="song-name">
        <button type="submit" onclick="searchSong()">Search</button>
    </form>
    <div id="song-results"></div>
</body>
</html>

Vielleicht kann mir ja jemand helfen, da ich echt nicht mehr weiter weiß, im vorraus schon mal Vielen Dank ;D

...zum Beitrag

Über PHP HTML Quellcode auslesen und in Variable speichern?

Hallo,

Kennt jemand eine Möglichkeit wie ich mit PHP einen bestimmten Teil HTML Quellcode aus der gerade geöffneten Seite/oder generell aus einer Datei auslesen kann und diesen dann als Text in einer ganz normalen PHP Variablen speichern kann.

Mit bestimmten Teil meine ich zum Beispiel alles was in einem Element wie einem div mit einer bestimmten id steht.

Zum Beispiel dieser HTML Code:

<body>
  <div id="Div1">
      <h1> Nicht dieses Div </h1>
  </div>

  <div id="Div2">
      <h1> Dieses Div </h1>
  </div>

  <div id="Div3">
      <h1> Nicht dieses Div </h1>
  </div>
</body>

Wenn ich dann den Inhalt von Div2 in eine PHP Variable schreiben wil soll in der Variable: "<h1> Dieses Div </h1>" stehen.

Ich hoffe meine Frage ist verständlich und jemand kennt eine Lösung.

Vielen Dank im voraus :D

...zum Beitrag

PHP: 'Parse error: syntax error, unexpected token "}"', obwohl alles richtig ist?

<?php

  class Login {
    private $error = "";

    public function evaluate($data) {
      $email = addslashes($data['email']);
      $password = addslashes($data['password']);

      $query = "select * from users where email = '$email' limit 1 ";

      $DB = new Database();
      $result = $DB->read($query);

      if ($result) {
        $row = $result[0];

        if ($password == $row['password']) {
          $_SESSION['userid'] = $row['userid'];
        }
        else {
          $error .= "Pwrong password or Email<br>"
        }
        else {
          $error .= "Ewrong password or Email<br>"
        }

        return $error;
      }
    }

Die Fehlermeldung:

Parse error: syntax error, unexpected token "}"

in /opt/lampp/htdocs/Website/classes/login.php on line 30

Hat jemand eine Idee?

...zum Beitrag

PHP variable in Echtzeit anzeigen?

Hi. Ich hatte vor in einem PHP Projekt von mir eine Variable von einer Datenbank in Echtzeit anzeigen zu lassen. Gegebenenfalls kann man dafür auch JavaScript verwenden, allerdings soll eine PHP Variable in Echtzeit auf der Seite sein. Also sollte sich die Variable in der Datenbank ändern, so sollte auch ohne dass man die Seite aktualisiert der Aktuelle Wert der Variable erscheinen. Wie das ganze geht weiß ich aber leider nicht.

Ich hoffe jemand kann mir da bei meinem Problemchen helfen. Ich bin für jede Antwort dankbar. LG :)

...zum Beitrag

Javascript Variable in PHP Variable speichern?

Liebe Community,

Ich habe in JS eine Variable welche ich in PHP benutzen will, um den Inhalt einer Datei zu verändern. Mein PHP Code sieht so aus:

<?php
if (isset($_GET["data"])) {
    $stuff = "<script>document.write(JSON.stringify(scripts));</script>";
    echo $stuff;
    $newfilecontent = $stuff;
    file_put_contents("scriptlist.js", "let scripts = " . $newfilecontent);
}
?>

Das echo funktioniert also es wird die Variable angezeigt, in die Datei wird allerdings nicht die JS Variable gepackt, sondern der Text <script>document.write(JSON.stringify(scripts));</script>

Wie kann ich das vermeiden sodass auch dort das gleiche wie beim echo eingefügt wird?

Viele Grüße Koner

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen