JSON Array values to use in JQuery and execute function

Question

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

2 files, pretend the connection is there : coordinate_array, and map.php

Update here In coordinate_array: I am making a multidimensional arrays so I can then use json_encode($desk). I only need x,y values for the Javascript part.

 <?php
      include 'db_conn.php';

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

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

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

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

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

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

?>

The code above gives me this :

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

In map.php : I am trying to get those value with the use of JQuery. I want to get the values and run a loop that will execute my Paint function which will keep drawing rectangles for every row thats in the table. I am very new with JSON and JQuery and starting to use it.

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

NEED HELP HERE PLEASE

                //I have no idea how to get the encoded values
    $(document).ready(function(){
    $.getJSON('coordinate_array.php', function(data)){
    $.each(data, function(k,v){
     Paint(v[0].x, v[1].y);
    });//end each
    });//end get json
     });//end rdy func

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>

Thank you in advance it’s much appreciated!

In your getJson call add this line console.log(data); and post the output. — Hackerman
– Hackerman, Commented Sep 30, 2014 at 18:03
In your Javascript console(F12 in Chrome)...there you should be able to see the output... — Hackerman
– Hackerman, Commented Sep 30, 2014 at 18:08
@RobertRozas still nothing.. really weird it wont execute my jquery — mario
– mario, Commented Sep 30, 2014 at 18:31
Now first...$desk should be defined outside of your while like: $desk = array();...inside your while should be: $desk[] = array( "x"=>$row['x_coord'],"y"=>$Row['y_coord']);...and outside of the while...at the end of you php script echo json_encode($desk); ...not inside the while... — Hackerman
– Hackerman, Commented Sep 30, 2014 at 18:37
@RobertRozas ok your method gives me this result: [[{"x":"20"},{"y":"20"}],[{"x":"30"},{"y":"30"}],[{"x":"40"},{"y":"40"}],[{"x":"50"},{"y":"50"}]] WHERE AS in the comments from the answer bellow from Marc B it gives me this instead: [{"coordinate_id":"1","x_coord":"20","y_coord":"20"},{"coordinate_id":"2","x_coord":"30","y_coord":"30"},{"coordinate_id":"3","x_coord":"40","y_coord":"40"},{"coordinate_id":"4","x_coord":"50","y_coord":"50"}] which one is the one im suposd to use? one has an extra square bracket compared to the other one.... — mario
– mario, Commented Sep 30, 2014 at 18:44

Marc B · Accepted Answer · 2014-09-30 18:03:24Z

1

You're doing the json wrong. it should be encoded AFTER your DB fetch loop completes. Since you're doing the encoding inside the loop, you're spitting out multiple independent JSON-encoded strings, which will be treated as a syntax error on the receiving end.

e.g.

while($something) {
   echo json_encode($some_array);
}

will spit out

[something][something][something]

three separate json-encoded arrays jammed up against each other. What you want is something more like this:

while($something) {
   build_array();
}
echo json_encode($array);

which would spit out

[something,something,soemthing]

instead.

answered Sep 30, 2014 at 18:03

Marc B

362k44 gold badges433 silver badges508 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

mario Over a year ago

I just tried what you suggested and I ended up from this : [{"x":"20"},{"y":"20"}][{"x":"30"},{"y":"30"}][{"x":"40"},{"y":"40"}][{"x":"50"},{"y":"50"}] TO THIS .. only the last coords from the table : [{"x":"50"},{"y":"50"}] ..

Marc B Over a year ago

while ($row = mysqli_fetch) { $arr[] = $row; } echo json_encode($arr);

mario Over a year ago

thanks the array worked. How would I ignore the coordinate_id since I only want X,Y from being used into JQuery?

Marc B Over a year ago

you're doing select * in the query. select only the fields you really want.

mario Over a year ago

cool, changed it to SELECT x_coord, y_coord FROM coordinates; still wont display the rectangles

|

Darius · Accepted Answer · 2014-09-30 18:18:08Z

0

Try to use header('Content-Type: application/json'); in coordinate_array.php

answered Sep 30, 2014 at 18:18

Darius

1471 silver badge3 bronze badges

2 Comments

mario Over a year ago

I did, what will this help with?

Darius Over a year ago

You will get proper headers.

Collectives™ on Stack Overflow

JSON Array values to use in JQuery and execute function

2 Answers 2

6 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related