Push javascript array objects from mysql query

Question

I have a database with flashcards with the following fields:

cartid, front, back

I want to retrieve the data form them and push them to javascript array with objects.

There's two objects: face and back;

So, for example, I have two records in the database:

| carid      |  front       | back         |
|:-----------|------------: |:------------:|
| 1          |      face1   |     back1    |
| 2          |      face2   |    back2     |

Here's what I tried:

Code:

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="caro.css">
    <script
            src="https://code.jquery.com/jquery-3.4.1.min.js"
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
            crossorigin="anonymous"></script>
</head>

<body>

<div class="wrapper">
    <div class="carousel">
    </div>
    <button class="prev">Prev</button>
    <button class="next">Next</button>

</div>

<br>

<?php

include 'connection.php';
$stmt = $db->prepare("SELECT * FROM `cards`");

$stmt->bind_result($cartid, $front, $back);
$stmt->execute();


while ($stmt->fetch()) {
    ?>

    <script>
        let cards = []; //Array to store the front and the back of the flashcards
        cards.push({
            front: "<?php echo $front; ?>",
            back: "<?php echo $back; ?>"
        });

        //flash carousel
            let currentCard = 1,
            carousel = document.querySelector(".carousel"),
            next = document.querySelector(".next"),
            prev = document.querySelector(".prev");

        renderCards();

        function renderCards() {
            carousel.style.width = `${cards.length}00vw`;
            cards.map(el => {
                let div = document.createElement("div");
                div.classList.add("card");
                let front = document.createElement("div");
                front.classList.add("front");
                let back = document.createElement("div");
                back.classList.add("back");
                front.textContent = el.front;
                back.textContent = el.back;
                div.appendChild(front);
                div.appendChild(back);
                div.addEventListener("click", function (e) {
                    e.srcElement.parentNode.classList.toggle("active");
                });
                carousel.appendChild(div);
            });
        }

        next.addEventListener("click", function (e) {
            if (currentCard >= cards.length) {
                return;
            }
            currentCard++;
            cardFly();
        });

        prev.addEventListener("click", function (e) {
            if (currentCard - 1 <= 0) {
                return;
            }
            currentCard--;
            cardFly();
        });

        function cardFly() {
            carousel.style.transform = `translateX(-${currentCard - 1}00vw)`;

        }

    </script>

    <?php

} //closing while loop

?>

</body>


</html>

The problem is that it only prints me the data from the first row of the table. (face1 and back1).

Edit: Another try with json_econde

 $stmt = $db->prepare("
                 SELECT * FROM `cards`" );

        $stmt->bind_result($cartid, $front, $back);
        $stmt->execute();


            $result_array = Array();

            $result_array2 = Array();

            while ($stmt->fetch()) {

                $result_array[] = $front;

                $result_array2[] = $back;

                }
       $json_array = json_encode($result_array);

       $json_array2 = json_encode($result_array2);

But then how to push each data row to the javascript array? The final filled array should look like this: pic

Look at the rendered javascript. Your loop is creating all of that code multiple times. Instead, create an array with the results, use json_encode() to put the data in a format javascript will like, then output the javascript. — aynber
– aynber, Commented Jul 29, 2019 at 15:56
No, you're creating two different arrays. You want only 1 array. Hold on, I'll add an answer. — aynber
– aynber, Commented Jul 29, 2019 at 16:26

aynber · Accepted Answer · 2019-07-29 17:00:04Z

1

You want to create a single array with the results, then use json_encode to put the data in a format that javascript can use easily.

$cards = array();

while ($stmt->fetch()) {
    $cards[] = array('front' => $front, 'back' => $back);
}

--

let cards = <?php json_encode($cards); ?>;

Edit

To put the front and back in their own objects, then you would need to create two arrays, and then merge them

$frontArr = array();
$backArr = array();

while($stmt->fetch()) {
   $frontArr[] = $front;
   $backArr[] = $back;
}

$cards = array($frontArr, $backArr);

edited Jul 29, 2019 at 17:00

answered Jul 29, 2019 at 16:29

aynber

23.2k9 gold badges57 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

fingolfin Over a year ago

Thanks. And print them like that: let cards = <?php echo json_encode($cards); ?>; But then I just get the data in the rows. image: i.imgur.com/FeoEghg.png face1 and face2 should be attached to front object and back1 and back2 to back object. So the array should be something like this: imgur.com/mFWINfy

aynber Over a year ago

Ah. Then you probably will need to create two arrays, then merge.

fingolfin Over a year ago

I get the same thing. How to I echo them properly? The filled array should look like this: imgur.com/mFWINfy

aynber Over a year ago

Oh, then the first array is what you want. However, you probably need the array keys

fingolfin Over a year ago

That solution solves it. Thank you for your time and help.

Collectives™ on Stack Overflow

Push javascript array objects from mysql query

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related