Loading Data From MySQL to JavaScript Array of Array Using jQuery Ajax

Question

I have a php and jquery code like below

<script>
$( document ).ready(function() {
  var data =[];
    $("#submit").on("click",function(){
        $.ajax({
                type:"POST",
                url:"map.php",
                success: function (html) {
                    $('#message').html(html);
                }
        });
    });
});
</script>

PHP

<?php
define ( 'DB_HOST', 'localhost' );
define ( 'DB_USER', 'root' );
define ( 'DB_PASS', '' );
define ( 'DB_NAME', 'test' );
  $con = new mysqli(DB_HOST,DB_USER,DB_PASS,DB_NAME);
  $query = "SELECT x,y FROM app";
  $results = $con->query($query);
  $return = array();
  if($results) {
    while($row = $results->fetch_assoc()) {
      $return[] = array((float)$row['x'],(float)$row['y']);
    }
  }
   echo json_encode($return);
  $con->close();
 ?>

which return values from database like this in $('#message').html(html);

[ [ 20 , 20 ],[ 20 , 30 ],[ 50 , 35 ],[ 40 , 20 ] ]

How can I parse/export/push this result into data =[]; to have an array of array there so eventually the result looks like this?

var data  =[ [ 20 , 20 ],[ 20 , 30 ],[ 50 , 35 ],[ 40 , 20 ] ];

Romeo Onisim · Accepted Answer · 2014-05-28 07:10:43Z

1

Include dataType: 'json'

$.ajax({
     type:"POST",
     url:"map.php",
     dataType: 'json',
     success: function (html) {
         $('#message').html(html);
         data = html;
         console.log(data);
     }
});

edited May 28, 2014 at 7:10

answered May 28, 2014 at 6:47

Romeo Onisim

6044 silver badges10 bronze badges

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

4 Comments

Mona Coder Over a year ago

Hi Romeo, Thanks for reply but is there any other way to see the actual result rather than console? because I am not sure what exactly i am getting there with some numbers like 0:, 1:

Romeo Onisim Over a year ago

You can see the true result if you open your Inspector / Firebug, the Network tab, then run that ajax and here in the tab you will see a new request. Click on it and on Preview you can see exactly what is sent from the server.

Mona Coder Over a year ago

Thanks again, just for confirmation, so the structure of the data[] in reality looks like var data =[ [ 20 , 20 ],[ 20 , 30 ],[ 50 , 35 ],[ 40 , 20 ] ]; right? I mean I am getting the correct result in console or alert(data.join('\n')); but to be honest the format of data[] is very important for me to since I am using this format to load circles to raphael.js paper so must be in that format exactly

Romeo Onisim Over a year ago

Yes it has to be right. You can also check what you get with the others people solution: data = JSON.parse(html); or data = $.parseJSON(html);

muffel · Accepted Answer · 2014-05-28 06:47:57Z

0

The opposite of your json_encode PHP function in Javascript is JSON.parse(json):

var myArr = JSON.parse("[ [ 20 , 20 ],[ 20 , 30 ],[ 50 , 35 ],[ 40 , 20 ] ]");

answered May 28, 2014 at 6:47

muffel

7,4709 gold badges63 silver badges110 bronze badges

1 Comment

muffel Over a year ago

@MonaCoder instead of $('#message').html(html); write data = JSON.parse(html);

Sankalp Bhatt · Accepted Answer · 2014-05-28 06:48:48Z

0

simple do

data  = $.parseJSON('[ [ 20 , 20 ],[ 20 , 30 ],[ 50 , 35 ],[ 40 , 20 ] ]');

or

data = $.parseJSON(html);

NOTE: remove var while assigning array to data variable, it will assign the array to global data variable.

So final script will be:

<script>
$( document ).ready(function() {
  var data =[];
    $("#submit").on("click",function(){
        $.ajax({
                type:"POST",
                dataType:'json',
                url:"map.php",
                success: function (html) {
                    $('#message').html(html);
                    data = $.parseJSON(html);
                }
        });
    });
});
</script>

answered May 28, 2014 at 6:48

Sankalp Bhatt

1,20414 silver badges18 bronze badges

2 Comments

Mona Coder Over a year ago

hi Sankalp, thanks for code but I am getting this error "Uncaught SyntaxError: Unexpected token ,"

Sankalp Bhatt Over a year ago

can you paste more details about the error you are getting?

pankaj · Accepted Answer · 2014-05-28 06:58:01Z

0

Have you tried adding - "dataType: "json" to your ajax call.. If you do this, json_encode in your php script will take care of returning proper array structure.

$.ajax({
            type:"POST",
            url:"map.php",
            dataType: "json",
            success: function (html) {
                $('#message').html(html);
            }
});

answered May 28, 2014 at 6:58

pankaj

1,3663 gold badges17 silver badges27 bronze badges

2 Comments

Mona Coder Over a year ago

Hi pankaj thanks for reply now the result looks like 218.5149144,215.5990218219.2915206,216.8274247254.5833588,311.9862023254.2178971,314.9889649 so how can I add them to data[];

pankaj Over a year ago

can you paste the output of var_dump($return) from your php script and also check if you are receiving proper json response by using some tool like - firebug..

sanjay · Accepted Answer · 2014-05-28 06:58:15Z

0

instead of echo json_encode($return); you can use echo json_encode(array('data'=>$return)); to get response in associative array format.

answered May 28, 2014 at 6:58

sanjay

986 bronze badges

Collectives™ on Stack Overflow

Loading Data From MySQL to JavaScript Array of Array Using jQuery Ajax

5 Answers 5

4 Comments

1 Comment

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

1 Comment

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related