13.10.2023, 07:34
Moin Kinners,
ich benötige mal einen Rat.
Ich habe eine API gebaut, das ist der Code dazu:
ich benötige mal einen Rat.
Ich habe eine API gebaut, das ist der Code dazu:
PHP-Code:
<?php
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]](https://gracile-software.de/projects/service-api/songattic/songs/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!