How to get stdclass object to Javascript

Lassie · July 14, 2015

I am getting some varaibles from the databse and want to convert my array to javascript and use the input to make a map with markers.

I am cont get json encode to convert the stdclass object to a js object.

My second problem is how to accees the js vars to get an array of postcodes, lats and lng.

I have posted this topic before but became very confused so I am srtaring again.

I have commented where I think I have the problems.

Any suggestions welcome

<?php
                            //get town and county
                            //retrieve postcodes
                            //populate form
                            
                            //get town and county
                            $town=$_GET['town'];
                            $county=$_GET['county'];
                            global $wpdb;
                            $wpdb->show_errors();//debug
                            
                            $coords=array();
                            $results = $wpdb->get_results("SELECT postcode,latitude,longitude FROM uk_postcodes WHERE town = '$town'AND county='$county' ");// Get the postcode and lat and long
                            foreach ($results as $poi) {
                                    //echo $poi->{'postcode'},$poi->{'latitude'},$poi->{'longitude'} . '<br/>';
                                    
                                    $coords[]=$poi;
                                   
                                    //var_dump($coords);
                                   
                                }
                             
                                     echo "<pre>";
                                 print_r($coords);
                                    echo "</pre>"; 
                                //gives st class object
                                
                               //get the coords into javascript array
                               ?>
                            <script>
                                var coords = <?php echo json_encode($coords, true) ?>;
                                alert(coords);
                                //alert fails
                               
 
                            </script>
                            
                             <div id="map" style="width: 500px; height: 400px;"></div>
                            <script src="http://maps.google.com/maps/api/js?sensor=false" 
                            type="text/javascript"></script>
                            <script type="text/javascript">
                                //replace with coords, postcode, lat, lng
                            var locations = [
                            ['KT23', 51.28, -0.37, 4],
                            ['KT24', 51.26, -0.42, 5],
                            ['KT22', 51.30, -0.33, 5]
                                ]
                            var map = new google.maps.Map(document.getElementById('map'), {
                             zoom: 10,
                             center: new google.maps.LatLng(51.35, -0.26),
                            mapTypeId: google.maps.MapTypeId.ROADMAP
                            });
                            var infowindow = new google.maps.InfoWindow();

                             var marker, i;

                            for (i = 0; i < locations.length; i++) {  
                             marker = new google.maps.Marker({
                            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                            map: map
                                });

                            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                            return function() {
                            infowindow.setContent(locations[i][0]);
                            infowindow.open(map, marker);
                            }
                             })(marker, i));
                           }
                        </script>

Ch0cu3r · July 14, 2015

You need to pass the PHP json value to JSON.parse in your javascript code

var coords = JSON.parse('<?php echo json_encode($coords, true) ?>');
// coords will no be a JSON object

Lassie · July 14, 2015

Thanks for that. I now get a js syntax error and the alert still fails.

error =

SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data

var coords = JSON.parse('');

Ch0cu3r · July 14, 2015

You are getting that error because the PHP code is not outputting the json object, this results in an empty value being passed to JSON.parse and so you are getting the unexpected end of data error.

Are you sure $coords is defined and values are being set?

Lassie · July 14, 2015

Well, I set $coords=array(); and then ran the query and print r gives me the stdclass object as expected withthe right data.

I have put the following json encode in as a test.

$output = json_encode($coords);
                                
                                 echo "<pre>";
                                 print_r($output);
                                 echo "</pre>";

This gives

{"postcode":"AB10","latitude":"57.13","longitude":"-2.11"},{"postcode":"AB11","latitude":"57.13","longitude":"-2.09"},{"postcode":"AB12","latitude":"57.10","longitude":"-2.11"},{"postcode":"AB15","latitude":"57.13","longitude":"-2.16"},{"postcode":"AB16","latitude":"57.16","longitude":"-2.15"},{"postcode":"AB21","latitude":"57.21","longitude":"-2.20"},{"postcode":"AB22","latitude":"57.18","longitude":"-2.11"},{"postcode":"AB23","latitude":"57.21","longitude":"-2.08"},{"postcode":"AB25","latitude":"57.15","longitude":"-2.11"}]

I put this before the script with the json decode. Is this what I should expect and if so how to proceed?

scootstah · July 14, 2015

json_encode() does not want a boolean as the second argument, it wants an option constant. It could be failing to encode and returning false. In your test above you removed the second argument and it works.

Lassie · July 14, 2015

OK.

Just to be clear my (messey) code now is as follows before the google map

$coords=array();
                            $results = $wpdb->get_results("SELECT postcode,latitude,longitude FROM uk_postcodes WHERE town = '$town'AND county='$county' ");// Get the postcode and lat and long
                            foreach ($results as $poi) {
                                    //echo $poi->{'postcode'},$poi->{'latitude'},$poi->{'longitude'} . '<br/>';
                                    
                                    $coords[]=$poi;
                                   
                                    //var_dump($coords);
                                //$poi     = get_object_vars($poi);
                               // $postcode = $poi['postcode'];
                               // $Lat   = $poi['latitude'];
                                //$Lng  = $poi['longitude'];
                                //echo $Lat;
                                //echo $Lng;
                                   
                                }
                             
                                    // echo "<pre>";
                                 //print_r($coords);
                                    //echo "</pre>"; 
                                //gives st class object
                                
                               //get the coords into javascript array
                                $output = json_encode($coords);
                                
                                 echo "<pre>";
                                 print_r($output);
                                 echo "</pre>"; 
                                //gives st class object 
                                
                               ?>
                            <script>
                                
                                var coords = JSON.parse('<?php echo json_encode($coords) ?>');
                                alert(coords);
                                //alert fails
                               
 
                            </script>

Now alert (coords) gives [object}.[Object] etc having removed true ?

scootstah · July 14, 2015

Yes, it should. If you want to see the value of coords in Javascript, use console.dir(coords); and then open the developer console.

Lassie · July 14, 2015

I opened the developer console in chrome and it shows an array but not the values.

Array[9]0: Object1: Object2: Object3: Object4: Object5: Object6: Object7: Object8: Objectlength: 9__proto__: Array[0]

I have very little js expeireince so I am stuck. I want the values in an arry si can iterate through.

Any suggested approaches I can try, thanks.

scootstah · July 14, 2015

It is an array. An array of objects. You can expand the object in the developer console to examine the properties and values.

For example:

Edited July 14, 2015 by scootstah

Lassie · July 14, 2015

Ok, my problem is how to use the properties and values.

scootstah · July 14, 2015

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript

You use dot notation to access object properties in Javascript. Example:

var coords = [{"postcode":"AB10","latitude":"57.13","longitude":"-2.11"},{"postcode":"AB11","latitude":"57.13","longitude":"-2.09"}];

// coords[0].postcode
// coords[0].latitude

// coords[1].postcode
// coords[1].latitude

EDIT: You can loop over the array with something like:

var coords = [{"postcode":"AB10","latitude":"57.13","longitude":"-2.11"},{"postcode":"AB11","latitude":"57.13","longitude":"-2.09"}];

for (var i = 0; i < coords.length; i++) {
    document.write('Postcode: ');
    document.write(coords[i].postcode);
    document.write('<br />');
}

Will output:

Postcode: AB10
Postcode: AB11

Edited July 14, 2015 by scootstah

Lassie · July 14, 2015

Thanks.

So will

$output = json_encode($coords);
<script>
var coords = <?php echo $output?>;
</script>
  <div id="map" style="width: 500px; height: 400px;"></div>
                            <script src="http://maps.google.com/maps/api/js?sensor=false" 
                            type="text/javascript"></script>
                            <script type="text/javascript">
                                //replace with coords, postcode, lat, lng
                                var locations = [coords];
or (var i = 0; i < locations.length; i++) {
    document.write('Postcode: ');
    document.write(locations[i].postcode);
    document.write('<br />');
}

work. thanks

scootstah · July 14, 2015

var locations = [coords]; You don't need this, coords is already an array.

And you misspelled for. or (var i = 0; i < locations.length; i++) {

Also, please see this thread as to why you should not be passing the JSON the way that you are.

Lassie · July 14, 2015

Ok I understand. I will get this working and then apply that logic.

Thanks very much.

Sign In

How to get stdclass object to Javascript

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information