Home/ Questions/Q 3680506
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T03:35:04+00:00

I am trying to return my SQL query array into a javascript array and

  • 0

I am trying to return my SQL query array into a javascript array and then display the info one at a time. I have found a few helpful posts already on here but I still cannot get it to work. I am new to ajax and so please forgive any stupid mistakes. Below is the php followed by a description.
php: this is in an external file from index.php

<?php
include('connection.php');

$query = "SELECT * FROM photos";
$queryresult = mysql_query($query);

while ( $line = mysql_fetch_array($result) ) {
    $path[] = $row[0];
}
$paths = json_encode($path);
header('Content-type: application/json');
echo $paths;
?>

This gets the results (they are file paths) array and json encodes them to pass to javascript. Connection.php is correct and it is working.

HTML/Javascript:

<html>
<head>
<script src="JavaScript/gjs.js" type="text/javascript"></script>
<script src="jquery/jquery-1.4.3.min.js" type="text/javascript"></script>
<script>
function imageload(){
var i = 1;
$.getJSON('phpfiles/getpiccode.php', function(data) {

    var can = document.getElementById('canvas').getContext('2d');

    $.each(data,function(idx, row){
    var img = new Image();
    img.onload = function(){
        can.drawImage(img, 0, 0, 1280, 800);
    }
    img.src = row;
            i++;
});

});

}
</script>
</head>

<body>
<div class="container">
<canvas id="canvas" class="canvas-one" width="1280" height="800">
<script>imageload();</script>This text is displayed if your browser does not support HTML5 Canvas</canvas>
</div>

</body>
</html>

I hope that makes sense. Thanks again!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Use json_encode() to encode it as JSON.
    In recent browsers you can simply turn the string from that function into a JavaScript object using var obj = JSON.parse(yourstring); – but better use e.g. jQuery for AJAX and JSON parsing.

    Update: Your JavaScript should looke like that to iterate over the data from your query:

    $.getJSON('phpfiles/getpiccode.php', function(data) {
    // get canvas object. it's the same for all images so only do it once
    var can = document.getElementById('canvas').getContext('2d');
    // iterate over the elements in data
    $.each(data, function(idx, row) {
        var img = new Image();
        img.onload = function() {
            can.drawImage(img, 0, 0, 1280, 800);
        }
        img.src = row;
    });
});

    However, it might not do what you want: It will draw all images pretty much at once at the same position.

    Also replace <script>imageload() </script> (assuming that’s the function containing your JavaScript) with <script type="text/javascript">imageload();</script> as that’s the correct/proper syntax.

    In your PHP code you’ll have to replace return $paths; with echo $paths; unless you are using some framework which relies on your file returning something. Additionally it’d be good to send a JSON header: header('Content-type: application/json');

    PS: SELECT * combined with MYSQL_NUM is a BadThing. It relies on the columns in the table having a certain order. If you just need one column use “SELECT columnName”; if you need all, use MYSQL_ASSOC to get an associative array.

    • 0