JQuery没有读取JSON数组值

Question

I’m reading X,Y Coordinates from MySQL Database.

2 files(I can post the connection file if needed): coordinate_array, and map.php

coordinate_array: I am making a multidimensional arrays so I can then use json_encode($desk). I only need x,y values for the JS/Jqueryt part.

updated PHP code and JQuery CODE.. still does not work!?

    <?php
          include 'db_conn.php';

    header('Content-Type: application/json');

    $coordinate_sql = "SELECT x_coord, y_coord FROM coordinates";

    $result = mysqli_query($conn,$coordinate_sql);

    //see if query is good
    if($result === false) {
        die(mysqli_error()); 
    }

    //array that will have number of desks in map area
    while($row = mysqli_fetch_assoc($result)){  

        //get desk array count
        $desk[] = array('x' => $row['x_coord'],                                 
                        'y' => $row['y_coord']);
    } //end while loop
          echo json_encode($desk);  //encode array
?>

The code above gives me this as the result for the array:

[{"x":"20","y":"20"},{"x":"30","y":"30"},{"x":"40","y":"40"},{"x":"50","y":"50"}]

map.php : This is the part where is not entirely working. I'm trying to get the values from json_encode with JQuery but I get no output on screen.

Don't know which of these two I should use

 <script type="text/javascript" src="jquery-1.11.1.min.js"></script> 
 <script  src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

Need help here please

 <canvas id="imageView" width="600" height="500"></canvas>          
 <script type="text/javascript">

                //I have no idea how to get the encoded values
    $.post('coordinate_array.php', {}, function(data) {
    results = JSON.parse(data);
        for(i = 0;i < results.length;i++) {
            Paint(results[i].x, results[i].y);
        }
    });

I want to execute this function

        //function to paint rectangles
        function Paint(x,y)
                {
                var ctx, cv;
                cv = document.getElementById('imageView');
                ctx = cv.getContext('2d');
                ctx.lineWidth = 5;
                ctx.strokeStyle = '#000000';
                //x-axis,y-axis,x-width,y-width
                ctx.strokeRect(x, y, x+100 , y+100); 
                }
            </script>

Answer 1

The JSON formal definition tends to have an object (or, key-associative-array: {}) as the root of any JSON object, as opposed to an array ([]).

To wrap it inside one associative object:

$deskOutput = array("coords" => $desk);
echo json_encode($deskOutput);  //encode array

Then, on the JavaScript side, you will just need to get "each(data.coords," and you'll have your array.

For that matter, it seems like you're putting unnecessary complexity in your array structure at the PHP level. How about this?

$desk[] = array("x" => $row['x_coord'], "y" => $row['y_coord']));

That will create just one object for each x/y set. I'll leave it to you to figure out how you could simplify your JavaScript accordingly.