Need help in getting table data from my php script into javascript code

Question

I am very, very new to PHP (Started this morning), so excuse my ignorance and lack of what could be common knowledge.

I'm working on a website that already has the functionality to take form data and store it in a MySQL database. I now want to fetch said data from the database every time a certain page is loaded, and use the same to apply some HTML divs to my page. Essentially I have 3 cards pre-defined in the source code, but I want it to add more cards to the page as soon as it loads, so long as there are rows in my MySQL table.

This is the code I'm using to partially achieve this: PHP:

<?php
  $server = "localhost";
  $username = "root";
  $password = "";
  $dbname = "newnotes";

  $conn = new mysqli($server, $username, $password, $dbname);
  $sql = "SELECT * FROM newnotesdetails";
  $result = $conn->query($sql);
  if($result->num_rows > 0){
      while($row = $result->fetch_assoc()){
          $src = $row["src"];
          $alt = $row["alt"];
          $title = $row["title"];
          $text = $row["text"];
          $href = $row["href"];
      }
  }
  echo $src, $alt, $title, $text, $href;
?>

Javascript:

<script type="text/javascript">
  function createNewNotes() {
    const src = "<?php echo $src; ?>";
    const alt = "<?php echo $alt; ?>";
    const title = "<?php echo $title; ?>";
    const text = "<?php echo $text; ?>";
    const href = "<?php echo $href; ?>";

    console.log(src + alt + title + text + href);

    const divelem = document.createElement("div");
    divelem.classList.add("col-12", "col-md-4");
    const cardelem = document.createElement("div");
    cardelem.classList.add("card", "shadow", "h-100");
    const area = document.querySelector(".notesblock");
    divelem.appendChild(cardelem);
    area.appendChild(divelem);

    cardelem.innerHTML =
      '<img src="' +
      src +
      '" alt="' +
      alt +
      '" class="card-img-top">' +
      '<div class="card-body">' +
      '<h4 class="card-title">' +
      title +
      "</h4>" +
      '<p class="card-text">' +
      text +
      "</p>" +
      '<a href="' +
      href +
      '" class="stretched-link"></a>' +
      "</div>";
  }
</script>

As might be evident, the issue is that PHP already finishes iterating to the last row in the table by the time my javascript code accesses the data, so I'm only adding a single card, for the last element in the MySQL table at any given time.

I'm stuck and don't know how I can iterate this to have all the rows' data successfully transfer to the js script. I'd greatly appreciate some help

1) Create an array. 2) Put each $row into the array. 3) when the loop ends, encode the array as JSON. You can then give that JSON to the JS as an object literal. 4) Your createNotes function should accept the array data and process all of the items in it - at the moment it can only create one card. — ADyson, Apr 09 '21 at 13:31
If I remember my PHP correctly, you don't even need the javascript code here. If you just want the data output on the page, you can have PHP `echo` it. — Ortund, Apr 09 '21 at 13:36
If you just got started with this, I would recommend learning and using PDO over MySQLi. PDO offers more ways of fetching the result (and has a less verbose API making it easier to use), like the `PDOStatement::fetchAll()`, which basically would do what you're trying to do with the loop, returning all results as an array. — M. Eriksson, Apr 09 '21 at 13:44
As already pointed don't need to use JS to render PHP, what is a clue of doing it? — biesior, Apr 09 '21 at 13:45
*"the issue is that PHP already finishes iterating to the last row in the table by the time my javascript code accesses the data,"* ... you might want to give this the once-over: https://stackoverflow.com/questions/13840429/what-is-the-difference-between-client-side-and-server-side-programming — CD001, Apr 09 '21 at 14:38
Thank you Ortund and biesior, I took your advice on getting it done through PHP functions, and it works. I'm facing a newer issue now however, which is that loading the page isn't sufficient for the PHP function to add the HTML divs into my document. Rather, I'm having to submit another form entry before all the table fields show up as cards, even if there existed database entries when I initially loaded in. — Akash Bagchi, Apr 09 '21 at 17:35

score 0 · Answer 1 · answered Apr 09 '21 at 14:52

You should use the 'echo' command in PHP, as this allows you to read and show data from your database in the front end. Here's an example as to how you could use this.

<?php
$txt1 = "//data in your database";
$txt2 = "//data in your database";

echo "Image1" . $txt1 . "<br>";
echo "Image2" . $txt2 . "<br>";

?>

Need help in getting table data from my php script into javascript code

1 Answers1