Sending PHP Array data to javascript

Question

I have a PHP function that I am querying mySQL database and I need to send the data from that query over to a javascript function so that the data can be used in plotly graph. I am able to query the data in PHP and get the information I need but when I try to get the information in my javascript file it says NULL. Here's my code with comments about what I am getting.

PHP function:

function getCourses() {
    $conn = getDBConn();
    $query = "SELECT course_id FROM TraineeEventCourses GROUP BY course_id;";
    $result = mysqli_query($conn, $query) or die('Error connecting to mysql');

    while ($row = mysqli_fetch_assoc($result)) {
        foreach ($row as $courseID) {
            $course = $courseID;
            print_r($course); 
            echo "<br>";   // Print's 1 2 3 4 8 9 10 as expected 
            // return $course;
        }
    }
    // print_r($course); 
    // echo "<br>"; // When not commented out this goes with the return statement but it only returns 10 for some reason instead of returning the whole array. 
}

Javascript:

var courses = "<?php echo json_encode($course, JSON_PRETTY_PRINT) ?>";

            console.log(courses); // Returns NULL but should be returning 12348910

            TESTER = document.getElementById('tester');
            Plotly.plot( TESTER, [{
                x: [courses],
                y: [courses] }],
                { margin: { t: 0 } } );

Answer 1

You need to put all the course IDs into an array, and return it from the function.

There's also no need for the foreach loop. $row is an array with a single element, you can access it directly with an array index.

function getCourses() {
    $conn = getDBConn();
    $query = "SELECT course_id FROM TraineeEventCourses GROUP BY course_id;";
    $result = mysqli_query($conn, $query) or die('Error connecting to mysql');
    $courses = array();
    while ($row = mysqli_fetch_assoc($result)) {
        $course = $row['course_id'];
        print_r($course); 
        echo "<br>";   // Print's 1 2 3 4 8 9 10 as expected 
        $courses[] = $course;
    }
    return $courses;
}

$course = getCourses();
?>
<script>
var courses = "<?php echo json_encode($course, JSON_PRETTY_PRINT) ?>";
console.log(courses); // Returns NULL but should be returning 12348910

TESTER = document.getElementById('tester');
Plotly.plot( TESTER, [{
    x: [courses],
    y: [courses] }],
  { margin: { t: 0 } } );

Answer 2

Why dont you get your results of your query into an array, going blind here: while($row = mysqli_fetch_array($result, MYSQLI_NUM)) { $data[] = $row; } while($row = mysqli_fetch_array($result, MYSQLI_NUM)) { $data[] = $row; }

return $data; as its a function you wrapped it around and json_encode($data_variable) based on the variable you assign when you call function getCourse() into your javascript?