PHP array isn’t displaying in page

The list of notes should be displayed within the ul li spans, any reason as to why they aren’t showing and instead the array is showing at the top of the page?

The database connection appears to be working perfectly fine, however the notes aren’t showing within the spans. It also removes the ‘you haven’t added any notes text’

code

<?php

require_once 'app/init.php';

$notesQuery = $db->prepare("
    SELECT ID, note
    FROM notes
");

$notesQuery->execute();

$notes = $notesQuery->rowCount() ? $notesQuery : [];

foreach($notes as $note) {
    print_r($note);
}

?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Notes</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>myNotes</h1>
        <nav>
            <a href="index.php">Home</a>
            <a href="about.html">About</a>
            <a href="contact.html">Contact</a>
        </nav>
    </header> 
    <div class="container">
        <form action="add.php" method="post"> 
                <textarea name="note" placeholder="Insert a note..." autocomplete="off" required></textarea>
                <input type="submit" value="Add" />
        </form>
        <div class="notes">
            <h2>Notes</h2>

            <?php if(!empty($notes)): ?>

            <ul>
                <?php foreach($notes as $note): ?>
                    <li>
                        <span><?php echo $note['note']; ?></span>
                    </li>
                <?php endforeach; ?>
            </ul>
                <?php else: ?>
                    <p>you haven't added any notes yet.</p>
                <?php endif; ?>

        </div>

Answer

Working Code

<?php

require_once 'app/init.php';

$notesQuery = $db->prepare("
    SELECT ID, note
    FROM notes
");

$notesQuery->execute();

$notes = $notesQuery->rowCount() ? $notesQuery : [];


?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Notes</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>myNotes</h1>
        <nav>
            <a href="index.php">Home</a>
            <a href="about.html">About</a>
            <a href="contact.html">Contact</a>
        </nav>
    </header> 
    <div class="container">
        <form action="add.php" method="post"> 
                <textarea name="note" placeholder="Insert a note..." autocomplete="off" required></textarea>
                <input type="submit" value="Add" />
        </form>
        <div class="notes">
            <h2>Notes</h2>

            <?php if(!empty($notes)): ?>

            <ul>
                <?php foreach($notes as $note): ?>
                    <li>
                        <span><?php echo $note['note']; ?></span>
                    </li>
                <?php endforeach; ?>
            </ul>
                <?php else: ?>
                    <p>you haven't added any notes yet.</p>
                <?php endif; ?>
        </div>
    </div>
</body>
</html>

Advertisement

Answer