Javascript-forum
vue.js API data bleibt leer - Druckversion

+- Javascript-forum (https://javascript-forum.de)
+-- Forum: Javascript allgemeiner (https://javascript-forum.de/forumdisplay.php?fid=16)
+--- Forum: Vue.js (https://javascript-forum.de/forumdisplay.php?fid=23)
+--- Thema: vue.js API data bleibt leer (/showthread.php?tid=2618)

vue.js API data bleibt leer - BastiBln - 13.10.2023

Moin Kinners,

ich benötige mal einen Rat.
Ich habe eine API gebaut, das ist der Code dazu:

PHP-Code:
header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json');

include '../DBconnect.php';

$rslt = $pdo->query("SHOW TABLES");
$songs_random['data'] = array();
while ($db_table = $rslt->fetch(PDO::FETCH_NUM)) {
    $sql = "SELECT id, title, textauthor, musicauthor, genre FROM `$db_table[0]` ORDER BY RAND() LIMIT 3";    
    foreach ($pdo->query($sql) as $row) {
        $song_items = array(
            'id' => $row['id'],
            'title' => $row['title'],
            'textauthor' => $row['textauthor'],
            'musicauthor' => $row['musicauthor'],
            'genre' => $row['genre']
        );
        array_push($songs_random['data'], $song_items);
    }
}
echo json_encode($songs_random); 

So sieht das dann im Browser aus:

[Bild: Bildschirmfoto.png]

Und so versuche ich die Daten in vue.js darzustellen:

Code:
<template>
    <div class="container-sm text-center mt-4">
        <div class="container-sm mt-3">
            <h3>Hier eine zufällige Auswahl aus der Musik Datenbank.</h3>
        </div>
        <div class="container-sm text-justify mt-5">
            <ul>
                <li v-for="item in items" :key="item.id">{{ item.title }}</li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    mounted(){
    window.addEventListener("load", () => this.songsRandom());
    },
    data() {
        return {
        items:[]
        }
    },
    methods: {
        async songsRandom() {
            let apiURL = 'https://gracile-software.de/projects/service-api/xxxxxxxx/xxxx/xxxxxx.php';
            try {
                let response = await this.axios.get(apiURL);
                this.items = response.data;
                console.log(response.data);
            } catch (e) {
                console.log(e);
            }
        }
    }
}
</script>


Doch leider bleibt die Liste leer. In der Console kann ich alle Daten in der richtigen Reihenfolge sehen. Der EventListener ist erstmal nur zum Testen drin, das bau ich später um.

Hat mir wer einen Tipp, wo der Fehler liegen kann? Ich sehe ihn leider nicht.

Vielen Dank!

RE: vue.js API data bleibt leer - BastiBln - 19.10.2023

Hab den Fehler gefunden. Das array() der API war falsch strukturiert.

So funktioniert es nun:

PHP-Code:
$rslt = $pdo->query("SHOW TABLES");
$songs_random = array();
while ($db_table = $rslt->fetch(PDO::FETCH_NUM)) {
    $sql = "SELECT id, title, textauthor, musicauthor, genre FROM `$db_table[0]` ORDER BY RAND() LIMIT 3";    
    foreach ($pdo->query($sql) as $row) {
        $songs_random[] = array(
            'id' => $row['id'],
            'title' => $row['title'],
            'textauthor' => $row['textauthor'],
            'musicauthor' => $row['musicauthor'],
            'genre' => $row['genre']
        );
    }
}