动态获取Javascript变量中的数据库值

Question

I researched this subject many times but I could not find the right answer to my question. Let me explain it.

I'm creating an app with the Google Maps API where I want to have multiple locations shown on the map, based on my database values. I'm having an object called Locations in my javascript, where I store the the variables 'name', 'lat' and 'lon' (latitude, longtitude).

var Locations =
[{  
    name: 'test',
    lat: 52.351753, 
    lon: 5.002035 

  }, 
  {     
    name: 'test2',
    lat: 52.390839, 
    lon: 4.908722

  }];

This part is where I store my locations. Although this is working, it is hardcoded. So, I want to get all my mysql database values out of the database into my javascript variable dynamically. I foreach'd through the database entry's with PHP:

    foreach ($query as $post)
    {
        ?> <h1><?php echo $post['naam'] ?></h1> 
               <p><?php echo $post['plaats'] ?></p> 
               <p><?php echo $post['categorie'] ?></p> 
               <?php
    }

Now I tried to get all of those values and put them into my javascript variable, but without any succes.

var bedrijven = <?php echo json_encode($post); ?>;

When I console.log 'bedrijven' i'm only getting the last entry, but I want every row stored. Can someone help me with this? Would be really cool if it worked.

I hope I explained well enough.

Thanks!

Answer 1

$post is your iteration variable, so it only contains one element of the array at a time. If you want the entire array, assign that:

var bedrijven = <?php echo json_encode($query); ?>;

Answer 2

The examples on http://us1.php.net/json_encode should be helpful. It looks like your $post should be an associative array:

$post[] = ("name"=>"test","lat"=>52.351753, "lon"=> 5.002035); ?>
var bedrijven = <?php echo json_encode($post); ?>;

outputs:

var bedrijven = [{"name":"test","lat":52.351753,"lon":5.002035}];

Answer 3

Try:

PHP:

function getMarkers(){
    $response = array();

    foreach ($query as $post) {

    $response[] = array(
        'name' => $post['naam'],
        'lat' => $post['plaats'],
        'lng' => $post['categorie'],
    );
}
echo json_encode($response);
}

then JS:

function addMarkers(json){
    var title =json[index]["naam"];
    var lat =json[index]["plaats"];
    var lng =json[index]["categorie"];

    marker = new google.maps.Marker({
        position: new google.maps.LatLng (lat, lng),
        map: YOUR_MAP
    });
}

jQuery.getJSON("URL OF PAGE",{
    format: "json",
    dataType: 'json',
    contentType: "application/json; charset=utf-8"},
    function(json){addMarkers(json);
});

better, to send the info with json and retrieve it with jQuery's getJSON , this may need some tweaking.. But I have created what your talking about. Shout if any further help is required.

You May have to look into this a tiny bit to configure it..

GOOD LUCK!