how to iterate through php array in javascript

Question

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Attendance Manager - Home</title>
<link rel="stylesheet" href="../css/skeleton.css">
<link rel="stylesheet" href="../css/subjects.css">
<link rel="icon" type="image/jpg" href="../media/icon.png">
</head>

<body>
<header>
    <div class="left">
        <button id="menuButton" onclick="openMenu()">≡</button>
    </div>

    <div class="center">
        <div>
            <div id="month">
            </div>
            <div id="year">
            </div>
        </div>

        <div id="day">
        </div>

        <img id="icon" src="../media/icon.png" alt="App Icon" width="48" height="48">

        <div id="name">
        </div>
    </div>

    <div class="right">
        <a id="info" href="../html/index.php">l</a>
    </div>
</header>

<main>
    <menu>
        <a href="home.php">Home</a>
        <a href="subjects.php">Subjects</a>
        <a href="criteria.php">Edit Attendance Criteria</a>
        <a href="help.html">How to Use</a>
        <a href="developer.html">Developer Information</a>
        <a href="privacy.html">Privacy Policy</a>
        <a href="contact.html">Contact Us</a>
    </menu>
</main>

<section id="main_container">
    <?php

    session_start();
    $email = $_SESSION["email"];
    $dbhost = 'localhost';
    $dbuser = 'root';
    $dbpass = '';
    $dbname = 'attendance_system';



    $conn = new mysqli($dbhost, $dbuser, $dbpass, $dbname);


    $query = "SELECT * FROM subject WHERE email='$email'";
    $result = $conn->query($query);
    $n = $result->num_rows;
    $subject_name = array();
    $subject_total_hours = array();
    $subject_hours_completed = array();
    $subject_hours_present = array();
    $subject_hours_absent = array();
    $subject_credit = array();
    $subject_atendance = array();

    while ($row = $result->fetch_assoc()) {
        $subject_name[] = $row['name'];
        $subject_total_hours[] = $row['total_hours'];
        $subject_hours_completed[] = $row['hours_completed'];
        $subject_hours_present[] = $row['hours_present'];
        $subject_hours_absent[] = $row['hours_absent'];
        $subject_credit[] = $row['credit'];
        $subject_attendance[] = $row['attendance'];
    }

    ?>
    <h3>Subjects</h3>
    <table>
        <tr>
            <td>No.</td>
            <td>Name</td>
            <td>Total<br>Classes</td>
            <td>Present</td>
            <td>Absent</td>
            <td>Attendance</td>
            <td>Credit</td>
        </tr>
        <tr>
            <td>1.</td>
            <td>Machine Learning</td>
            <td>40</td>
            <td>36</td>
            <td>4</td>
            <td>90 %</td>
            <td>4</td>
        </tr>

    </table>
</section>

<script type="text/javascript">

/* let subject = document.createElement("tr");
let subject_number = 
subject.innerHTML = '<?php echo $subject_name[0] ?>';

let section = document.getElementById("main_container");
section.appendChild(subject);*/

</script>

<footer>
    <div class="left">
        Attendance Manager<br>2020 ©
    </div>
    <div class="center">
        <span>
            Official Page -
        </span>
        <span>
            <a href="https://twitter.com/AlokPur32580593?s=08">
                <img src="../media/twitter.png" alt="Twitter Icon" height="48px" width="48px">
            </a>
        </span>
    </div>
    <div class="right">
        <a id="privacyPolicy" href="privacy.html">Privacy Policy</a>
    </div>
</footer>

<script type="text/javascript" src="../javascript/home.js"></script>
</body>

</html>

I am new to PHP. I want to add each and every value of all the arrays created in my PHP code to my table in the HTML document one by one from my javascript (inside the script tag). I have created the array in PHP using the values extracted from a MySQL database in PHP. But the thing is, the number of values extracted will be different every time and hence the size of the array will be different every time the document loads. I am not able to access the PHP array elements one by one by using a javascript for a loop. So kindly tell me how do I do that dynamically. I don't want to write a separate javascript code for each value of the PHP array.

Answer 1

You can do this by php without js

<table>
    <tr>
        <td>No.</td>
        <td>Name</td>
        <td>Total<br>Classes</td>
        <td>Present</td>
        <td>Absent</td>
        <td>Attendance</td>
        <td>Credit</td>
    </tr>

    <?php for ($i = 0; $i < count($subject_name); $i++): ?>
    <tr>
        <td><?= $i ?></td>
        <td><?= $subject_name[$i]; ?></td>
        <td><?= $subject_hours_completed[$i]; ?></td>
        <td><?= $subject_hours_present[$i]; ?></td>
        <td><?= $subject_hours_absent[$i]; ?></td>
        <td><?= $subject_attendance[$i]; ?></td>
        <td><?= $subject_credit[$i]; ?></td>
    </tr>
    <?php endfor;?>

</table>

Answer 2

If you want to bind data in table by javascript,then you have to store your value in json encoded format inside php script.Then you can use it in your javascript OR you can fetch and bind from javascript by using ajax etc.

$.get(your url + 'your method name',function(response){
            Here you can bind your value using forEach()
        },'json');

how to iterate through php array in javascript

Question

2 answers

solution1
1 ACCPTED 2020-11-01 10:56:10

solution2
1 2020-11-01 11:30:17

how to iterate through php array in javascript

Question

2 answers

solution1 1 ACCPTED 2020-11-01 10:56:10

solution2 1 2020-11-01 11:30:17

solution1
1 ACCPTED 2020-11-01 10:56:10

solution2
1 2020-11-01 11:30:17