zmiana mysqli_fetch_assoc do js

Question

Witajcie kombinuje i nie umiem wykombinować jak pobrać dane z bazy danych mysql i uzyskane dane przekazać do js. Próbuje zrobić odtwarzacz mp3 i o ile działa jak sama podstawię dane to teraz chcę to przerobić na php i tak mam listę odtwarzania w js

let allMusic = [
    {
        name: "",  //tytul 1 utworu 
        artist: "",  //Artysta 1
        img: "",  //nazwa obrazka do utworu tylko jpg
        src: ""  //nazwa utworu tylko mp3 
    },
    {
        name: "",  //tytul 2 utworu
        artist: "",  //Artysta 2
        img: "",  //nazwa obrazka do utworu tylko jpg
        src: ""  //nazwa utworu tylko mp3 
    }
];

utworzyłam tabele w mysql

SELECT `id`, `name`, `artist`, `img`, `src`, `data` FROM `miusic`

i teraz pobieram dane

$sth = mysqli_query($con, "SELECT * FROM `miusic`");
$rows = [];
while($r = mysqli_fetch_assoc($sth)) {
    $rows[] = $r;
}
echo json_encode($rows);

i jak uzyskaną tablicę

{"0":{"id":"1","name":"test","artist":"testy","img":"2259539387506900.jpg","src":"2259539387514000.mp3","data":"2023-07-13 17:35:03"},"

przekazać do js czyli

let allMusic = [
    {
        name: "",  //tytul utworu
        artist: "",  //Artysta
        img: "",  //nazwa obrazka do utworu tylko jpg
        src: ""  //nazwa utworu tylko mp3 
    }
];

Będę wdzięczna za wszelkie sugestie i porady jak dane z tablicy pobrane w pętli przekazać i żeby wczytywał automatycznie do skryptu js.

Comments

Ja bym tak to widział w js:
 

const queryResult = {
  0: {
    id: "1",
    name: "test",
    artist: "testy",
    img: "2259539387506900.jpg",
    src: "2259539387514000.mp3",
    data: "2023-07-13 17:35:03",
  },
};

const allMusic = Object.values(queryResult).map(({ name, artist, img, src }) => ({
  name,
  artist,
  img,
  src,
}));

 

---

ok, a jak podstawić otrzymane dane z php do js tak żeby automatycznie je wczytał z tego co znajdzie w bazie do tego co podałeś?

Answer 1

Potrzebujesz

let allMusic = [
    {
        name: "",  //tytul utworu
        artist: "",  //Artysta
        img: "",  //nazwa obrazka do utworu tylko jpg
        src: ""  //nazwa utworu tylko mp3 
    }
];

więc uściślij sql na początek

$sql = "SELECT `name`, `artist`, `img`, `src` FROM `miusic` ORDER BY `id`";

 

prosty przykład:

load_list.php

<?php
  $sql = "SELECT `name`, `artist`, `img`, `src` FROM `miusic` ORDER BY `id`";
  $sth = mysqli_query($con, $sql);
  $rows = [];

  while($r = mysqli_fetch_assoc($sth)) {
    $rows[] = $r;
  }

  header('Content-Type: application/json'); // dodaj tę linię
  echo json_encode($rows);
?>

index.htm

<style>
    ol {
        list-style-type: decimal;
    }
    li img {
        width: 20px;
        aspect-ratio: 1;
        vertical-align: middle;
        margin-left: .25rem;
    }
    button {
        display: block;
        margin-top: 1rem;
    }
</style>

<audio src="" controls></audio>
<button>Pokaż listę</button>
<ol></ol>

<script>
    const button = document.querySelector('button');
    let allMusic;

    button.addEventListener('click', loadListFromServer);
    async function loadListFromServer() {
        const response = await fetch('load_list.php');
        allMusic = JSON.parse(await response.json());

        const list = document.createDocumentFragment();
        for (const row of allMusic) {
            const li = document.createElement('li');
            li.innerHTML = `<a href="mp3/${row.src}">${row.artist} - ${row.name}</a>`
                         + `<img src="${row.img}" alt="${row.img}" title="${row.img}">`;
            list.appendChild(li);
        }

        const ol = document.querySelector('ol');
        ol.appendChild(list);
        ol.addEventListener('click', playMusic);
    }

    function playMusic(e) {
        e.preventDefault();
        if (e.target.matches('a')) {
            const audio = document.querySelector('audio');
            audio.src = e.target.href;
            audio.play();
        }
    }
</script>

 

Comments

Dziękuje za podpowiedz ale nie wiem czemu nie wczytuje tzn nie wykonuje się

const response = await fetch('load_list.php');
        allMusic = JSON.parse(await response.json());

bo kiedy odpalam sam

load_list.php

to mi pokazuje z echo

	
0	
name	"test"
artist	"test "
img	"2412503395287500.jpg"
src	"2412503395300900.mp3"

czyli to co obecnie w bazie ale nie idzie to dalej do

 const response = await fetch('load_list.php');
        allMusic = JSON.parse(await response.json());

więc kombinowałam dalej i na podstawie podpowiedzi Comandeer  oraz Twojej zrobiłam tak:

$sql = "SELECT `name`, `artist`, `img`, `src` FROM `miusic`";
  $sth = mysqli_query($con, $sql);
  $rows = [];
 
  while($r = mysqli_fetch_assoc($sth)) {
    $rows[] = $r;
  }

następnie

<script type="text/javascript">const test = <?=json_encode($rows);?>;</script>

całość wygląda tak

<?php
session_start();
include('db.php');
?>
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Miusic</title>
    <link rel='stylesheet' href='https://cdn-uicons.flaticon.com/uicons-solid-rounded/css/uicons-solid-rounded.css'>
    <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
    <div class="wrapper">
        <header>
            <button class="hdbtn">
                <i class="fi fi-sr-arrow-small-left"></i>
            </button>
            <h3 class="p-now">Playing now</h3>
            <button class="hdbtn">
                <i class="fi fi-sr-list"></i>
            </button>
        </header>
        <div class="player">
            <div class="img-area">
                <img id="main-img" src="assets/images/" alt="">
            </div>

            <div class="song-details">
                <h1 class="name">Animation</h1>
                <h3 class="artist">Coding</h3>
            </div>

            <div class="audioC">
                <div class="song-timer">
                    <span class="current-time">0:00</span>
                    <span class="max-duration">0:00</span>
                </div>
                <div class="progress-area">
                    <div class="progress-bar">
                        <audio id="main-audio" src="assets/songs/"></audio>
                    </div>
                </div>
            </div>

            <div class="controls">
                <button id="prev" class="btnC">
                    <i class="fi fi-sr-rewind"></i>
                </button>
                <button class="play-pause btnC">
                    <i class="fi fi-sr-play play"></i>
                </button>
                <button id="next" class="btnC">
                    <i class="fi fi-sr-forward"></i>
                </button>
            </div>
        </div>
    </div>

    <?php
  $sql = "SELECT `name`, `artist`, `img`, `src` FROM `miusic`";
  $sth = mysqli_query($con, $sql);
  $rows = [];
 
  while($r = mysqli_fetch_assoc($sth)) {
    $rows[] = $r;
  }
?>
<script type="text/javascript">const test = <?=json_encode($rows);?>;</script>
    <script src="assets/js/music-list.js"></script>
    <script src="assets/js/script.js"></script>
</body>
</html>

w music-list.js mam

let allMusic = test;

działa i wczytuje ale natrafiłam na problem w

function loadMusic(indexNumb) {
    musicName.innerText = allMusic[indexNumb - 1].name;
    musicArtist.innerText = allMusic[indexNumb - 1].artist;
    musicImg.src = `assets/images/${allMusic[indexNumb - 1].src}.jpg`;
    mainAudio.src = `assets/songs/${allMusic[indexNumb - 1].src}.mp3`;
}

musicImg.src wczytuje jako mainAudio.src tzn w inspektorze widzę, że js podstawia to tak

<div class="player">
            <div class="img-area">
                <img id="main-img" src="assets/images/2412503395300900.mp3.jpg" alt="">  // <-------------------------------
            </div>

            <div class="song-details">
                <h1 class="name">test</h1>
                <h3 class="artist">test </h3>
            </div>

            <div class="audioC">
                <div class="song-timer">
                    <span class="current-time">0:00</span>
                    <span class="max-duration">0:00</span>
                </div>
                <div class="progress-area">
                    <div class="progress-bar">
                        <audio id="main-audio" src="assets/songs/2412503395300900.mp3.mp3"></audio>  //  <--------------------
                    </div>
                </div>
            </div>

            <div class="controls">
                <button id="prev" class="btnC">
                    <i class="fi fi-sr-rewind"></i>
                </button>
                <button class="play-pause btnC">
                    <i class="fi fi-sr-play play"></i>
                </button>
                <button id="next" class="btnC">
                    <i class="fi fi-sr-forward"></i>
                </button>
            </div>
        </div>

ładuje ten same dane z mainAudio.src i nie bardzo wiem dla czego a

echo json_encode($rows);

dostaje

[{"name":"test","artist":"test ","img":"2412503395287500.jpg","src":"2412503395300900.mp3"}]

i czy js dostając

musicImg.src = `assets/images/${allMusic[indexNumb - 1].src}.jpg`;
    mainAudio.src = `assets/songs/${allMusic[indexNumb - 1].src}.mp3`;

wczytuje ostatnie src do obu jak to rozdzielić ew inna jest metodologia?

---

@infinityhost, zwracaliśmy Ci już uwagę na Twój sposób komentowania, widać bez żadnej poprawy z Twojej strony. Więc się żegnamy.

---

@gatka84, Pierwsza propozycja poprawki to

<?php
    session_start();
    include('db.php');
?>
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Miusic</title>
    <link rel='stylesheet' href='https://cdn-uicons.flaticon.com/uicons-solid-rounded/css/uicons-solid-rounded.css'>
    <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
    <div class="wrapper">
        <header>
            <button class="hdbtn">
                <i class="fi fi-sr-arrow-small-left"></i>
            </button>
            <h3 class="p-now">Playing now</h3>
            <button class="hdbtn">
                <i class="fi fi-sr-list"></i>
            </button>
        </header>
        <div class="player">
            <div class="img-area">
                <img id="main-img" src="assets/images/" alt="">
            </div>

            <div class="song-details">
                <h1 class="name">Animation</h1>
                <h3 class="artist">Coding</h3>
            </div>

            <div class="audioC">
                <div class="song-timer">
                    <span class="current-time">0:00</span>
                    <span class="max-duration">0:00</span>
                </div>
                <div class="progress-area">
                    <div class="progress-bar">
                        <audio id="main-audio" src="assets/songs/"></audio>
                    </div>
                </div>
            </div>

            <div class="controls">
                <button id="prev" class="btnC">
                    <i class="fi fi-sr-rewind"></i>
                </button>
                <button class="play-pause btnC">
                    <i class="fi fi-sr-play play"></i>
                </button>
                <button id="next" class="btnC">
                    <i class="fi fi-sr-forward"></i>
                </button>
            </div>
        </div>
    </div>

<?php
    $sql = "SELECT `name`, `artist`, `img`, `src` FROM `miusic`";
    $sth = mysqli_query($con, $sql);
    $rows = mysqli_fetch_all($sth, MYSQLI_ASSOC);
?>
    <script type="text/javascript">const allMusic = <?=json_encode($rows);?>;</script>
    <script src="assets/js/music-list.js"></script>
    <script src="assets/js/script.js"></script>
</body>
</html>

w wyniku zapisu

<script type="text/javascript">const allMusic = <?=json_encode($rows);?>;</script>

w pozostałych skryptach js możesz korzystać od razu z allMusic

bez

let allMusic = test;

 

Błąd jest tutaj

musicImg.src = `assets/images/${allMusic[indexNumb - 1].src}.jpg`;
mainAudio.src = `assets/songs/${allMusic[indexNumb - 1].src}.mp3`;

ponieważ masz w

name    "test"
artist  "test "
img "2412503395287500.jpg"
src "2412503395300900.mp3"

dla obrazka masz img a Ty wpisałaś src, druga sprawa, masz }.jpg przecież jpg masz już w nazwie pliku img "2412503395287500.jpg", to samo z .mp3 src "2412503395300900.mp3"

poprawiony zapis to po prostu

musicImg.src = `assets/images/${allMusic[indexNumb - 1].img}`;
mainAudio.src = `assets/songs/${allMusic[indexNumb - 1].src}`;

 

 

BTW, używasz angielskich nazw, spoko, ale IMO powinno być 

id, name, artist, img, src, data, miusic

data (dane) - date (data kalendarzowa)
miusic - music

---

ale gapa jestem faktycznie tylko src na img trzeba było zmienić, a na końcu dodałam .img i .src bo w desperacji wykombinowałam, żeby ta sama nazwa była dla pliku mp3 i jpg

musicImg.src = `assets/images/${allMusic[indexNumb - 1].img}`;
mainAudio.src = `assets/songs/${allMusic[indexNumb - 1].src}`;

(kombinowałam na różne sposoby), dziękuję kolejny raz za podpowiedz, oczywiście działa i biorę się do poprawy pokaleczonego angielskiego.

Answer 2

A czemu po prostu nie wygenerujesz w PHP kawałka kodu JS? Możesz przecież bezpośrednio wstawić tam wynik json_encode(), np:

<script>const config = <?=json_encode($data);?>;</script>

 

Comments

Dziękuję za podpowiedź jednak dalej nie potrafię zrozumieć jak z wyniku który uzyskuję z php

[{"id":"1","name":"test","artist":"testy","img":"2259539387506900.jpg","src":"2259539387514000.mp3","data":"2023-07-13 17:35:03"}]

wstawić tak do js żeby dane były odczytane w takiej stróże js

let allMusic = [
    {
        name: "",  //tytul utworu
        artist: "",  //Artysta
        img: "",  //nazwa obrazka do utworu tylko jpg
        src: ""  //nazwa utworu tylko mp3 
    }
];

i kombinuje na wszelkie sposoby ale nie wiem jak to rozbić w js tak jak to robię w php np zrobiła bym tak w pętli

let allMusic = [
<?php
$media = "SELECT * FROM `miusic`";
    $media_run = mysqli_query($con, $media);
    $pobrane_dane1 = array();
    if (mysqli_num_rows($media_run) > 0) {
        foreach ($media_run as $media) { 
                                ?>
    {
        name: "<?= $media['name'] ?>",  //tytul utworu
        artist: "<?= $media['artist'] ?>",  //Artysta
        img: "<?= $media['img'] ?>",  //nazwa obrazka do utworu tylko jpg
        src: "<?= $media['src'] ?>"  //nazwa utworu tylko mp3 
    }
<?php
}}
?>

];

i nie umiem zrozumieć jak pobrane dane w pętli rozbić i podstawić tak żeby to było czytelne dla js.

---

Ale nie musisz nic robić. Wyciągasz dane z bazy, mielisz do tablicy przez np. mysqli_fetch_all() i po prostu traktujesz to json_encode(). I w tym momencie masz de facto poprawny kod JS (JSON jest poprawnym składniowo JS-em), który wystarczy podstawić pod zmienną.

Answer 3

i jak uzyskaną tablicę

{"0":{"id":"1","name":"test","artist":"testy","img":"2259539387506900.jpg","src":"2259539387514000.mp3","data":"2023-07-13 17:35:03"},"

Jak byś miał coś takiego:

{"id":"1","name":"test","artist":"testy","img":"2259539387506900.jpg","src":"2259539387514000.mp3","data":"2023-07-13 17:35:03"}

To zadziałby JSON.parse

let allMusic = JSON.parse(`{"id":"1","name":"test","artist":"testy","img":"2259539387506900.jpg","src":"2259539387514000.mp3","data":"2023-07-13 17:35:03"}`) 

 

 

Comments

Witaj mogę uzyskać dane w ten sposób

$zapytanie_pobierz = "SELECT * FROM `miusic`";
$wynik_pobierz = mysqli_query($con, $zapytanie_pobierz);
$pobrane_dane = array();
  
while ($wiersz = mysqli_fetch_row($wynik_pobierz)) 
{
  $pobrane_dane[] = $wiersz;
}
echo json_encode($pobrane_dane);

uzyskam

[{"id":"1","name":"test","artist":"testy","img":"2259539387506900.jpg","src":"2259539387514000.mp3","data":"2023-07-13 17:35:03"}] 

ale dalej nie bardzo wiem jak te dane podstawić, tak żeby automatycznie pobrał je do js

let allMusic = [
    {
        name: "",  //tytul utworu
        artist: "",  //Artysta
        img: "",  //nazwa obrazka do utworu tylko jpg
        src: ""  //nazwa utworu tylko mp3 
    }
];

 

---

Musisz to co uzyskałeś zapisać do zmiennej  let allMusic 

W samym tylko JavaScript można by zaspisać w ten sposób:

let allMusic = JSON.parse(`[{"id":"1","name":"test","artist":"testy","img":"2259539387506900.jpg","src":"2259539387514000.mp3","data":"2023-07-13 17:35:03"}]
`); 

 

allMusic[0];

Dostaniesz :

Object { id: "1", name: "test", artist: "testy", img: "2259539387506900.jpg", src: "2259539387514000.mp3", data: "2023-07-13 17:35:03" }
​
artist: "testy"
​
data: "2023-07-13 17:35:03"
​
id: "1"
​
img: "2259539387506900.jpg"
​
name: "test"
​
src: "2259539387514000.mp3"