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 Fragesteller 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

Fragesteller

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

Fragesteller

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

Fragesteller

17.05.2022, 17:03

@regex9

Werde ich nachher einmal probieren, Vielen Dank erst einmal

DerAnonyme35604

Fragesteller

17.05.2022, 20:44

@DerAnonyme35604

Hat super funktioniert, danke sehr

Ähnliche Fragen

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

...zur Frage

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

...zur Frage

JavaScript objekt komplett ausgeben?

Wenn ich console.log(data),eingeben würde wird mir das ganze objekt data ausklappbar angezeigt.

Dann steht da sowas wie pet:"dog" ... , Ich möchte es aber alles mit Document.write ausgeben lassen auf der Html seite.

Das dort nur Dog steht.

document.write(data.pet + data.age ....) abtippen würde keiner machen

...zur Frage

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?

...zur Frage

Javascript PHP Variable ausgeben?

Hallo,

ich möchte an einer Stelle in folgendem Code

https://pastebin.com/MV88qs08

eine PHP Variable ausgeben. Nur leider funktioniert das nicht so, wie ich mir gedacht habe. Sucht in dem Code mit Strg+F nach "$the_code" und nehmt das 2. Suchergbnis. Das nach default_content.

Stattdessen kommt immer ein HTTP 500 Error. Als Fehler beim PHP Log kommt folgendes:

[20-Mar-2022 18:45:43 UTC] PHP Parse error:  syntax error, unexpected 'ace' (T_STRING), expecting ';' or ',' in /home/emclouds/public_html/dev/pythonnow/userpanel/testuser/editor/editor.php on line 64

Wäre nett wenn ihr mir kurz helfen könntet.

...zur Frage

php if variable = true then html button?

Hey,

Ich will machen, dass in meiner php Datei ein Button angezeigt wird, wenn etwas in php passiert.

if($_SESSION["username"] != "ironflipper") {
	html knopf
}

Ich will, dass dann dort drin ein Knopf erstellt wird. Da es aber php ist, kann ich dort kein HTML Code einfuegen

Wie soll ich das machen?

...zur Frage

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

...zur Frage

JSON parsen in JavaScript?

Moin, ich habe das Problem, dass ich eine JSON-Response bekomme. Aus dieser würde ich gerne einen bestimmten Wert (beispielsweise "NAME-REPLACEMENT" zu dem Schlüssel "name") auslesen. Kann mir vielleicht jemand dabei weiterhelfen?

Die JSON-Datei habe ich hier verlinkt (aus Datenschutzgründen sind ein paar Sachen übrigens von mir ersetzt worden). https://pastebin.com/Zk7fJQNc

Das ganze soll in JavaScript realisiert werden, das heißt, der Wert soll in eine Variable eingelesen werden (und mit console.log() ausgegeben werden).

...zur Frage

[PHP]Wieso bekomme ich hier ein Variable Fehler?

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

syntax error, unexpected variable "$eo"

...zur Frage

React JS, was ist <React.StrictMode>?

Das ist ja standardmäßig in der index.js aber was bringt es genau ?
Wenn ich es nicht weglasse dann werden meine Funktionen innerhalb der Komponente doppelt aufgerufen die zwischen dem <React.StrictMode> sind.

Also kann ich es weglassen ?

App JS :

import {React,useEffect,useState} from 'react'
export default function App() {
useEffect(() => {
  // http://api.icndb.com/jokes/random
  const fetchJoke = async()=>(
    await fetch(`http://api.icndb.com/jokes/random`)
    .then(response => response.json())
    .then(data => console.log(data.value.joke))
  )
fetchJoke()
}, [])
  return (
    <div>App</div>
  )
}

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>    
 <App />
<React.StrictMode> 
);

Hab ja auch useEffect Hook benutzt damit es nur 1x beim laden ausgeführt werden soll.

...zur Frage

Javascript Datei senden?

Hallo,

angenommen ein Javascript liest bestimmte Werte und speichert diese als String in einer Variablen, wie kann ich diese Variable dann versenden(vom Browser des Nutzer) zu mir?

...zur Frage

JavaScript Ausgabe mit PHP auslesen, wie?

Hallo,

Ich habe eine Ausgabe/Variable in JavaScript und würde sie gerne mit PHP verarbeiten. (Gerne auch mit HTML als Schnittstelle...)

Kann mir jemand helfen?

Vielen Dank im voraus :)

...zur Frage

Wie kann ich eine Datei z.b. .exe Datei Analysieren mit Python3?

Wie kann ich mit Python3 eine .exe Datei analysieren und wichtige Informationen ausgeben z.b. Hex Muster, RAW Data...

...zur Frage

PHP Funktion aufrufen?

Ich habe eine PHP Funktion in einer anderen ausgelagerten Datei und möchte diese jetzt in einer JavaScript Funktion aufrufen siehe Quellcode:

was mache ich falsch und bitte mit Lösungsvorschlägen


function PersonXSenden()
{
   InhaltPersonX = document.getElementById("X").value;
   console.log(InhaltPersonX);
   document.cookie = "XCookie = " + InhaltPersonX;
   test3();

   <?php
       include "Chat2.php";
       test();
   ?>
}

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen