Lassie Posted July 14, 2015 Share Posted 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> Quote Link to comment Share on other sites More sharing options...
Ch0cu3r Posted July 14, 2015 Share Posted 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 Quote Link to comment Share on other sites More sharing options...
Lassie Posted July 14, 2015 Author Share Posted 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(''); Quote Link to comment Share on other sites More sharing options...
Ch0cu3r Posted July 14, 2015 Share Posted 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? Quote Link to comment Share on other sites More sharing options...
Lassie Posted July 14, 2015 Author Share Posted 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? Quote Link to comment Share on other sites More sharing options...
scootstah Posted July 14, 2015 Share Posted 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. Quote Link to comment Share on other sites More sharing options...
Lassie Posted July 14, 2015 Author Share Posted 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 ? Quote Link to comment Share on other sites More sharing options...
scootstah Posted July 14, 2015 Share Posted 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. Quote Link to comment Share on other sites More sharing options...
Lassie Posted July 14, 2015 Author Share Posted 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. Quote Link to comment Share on other sites More sharing options...
scootstah Posted July 14, 2015 Share Posted July 14, 2015 (edited) 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 Quote Link to comment Share on other sites More sharing options...
Lassie Posted July 14, 2015 Author Share Posted July 14, 2015 Ok, my problem is how to use the properties and values. Quote Link to comment Share on other sites More sharing options...
scootstah Posted July 14, 2015 Share Posted July 14, 2015 (edited) 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].latitudeEDIT: 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 Quote Link to comment Share on other sites More sharing options...
Lassie Posted July 14, 2015 Author Share Posted 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 Quote Link to comment Share on other sites More sharing options...
scootstah Posted July 14, 2015 Share Posted 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. Quote Link to comment Share on other sites More sharing options...
Lassie Posted July 14, 2015 Author Share Posted July 14, 2015 Ok I understand. I will get this working and then apply that logic. Thanks very much. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.