The form is set up to take user input which is being collected into a the address var.
Using jQuery to serialize address per url requirements. jquery serialize
Using getJSON to send the request to google geocode api.
Using a for in loop within a for loop to run through the results.
Finally, accessing the JSON results.
Question: Why am I getting undefined as result?
Code:
$(function() {
var address = document.getElementById('address').value;
address += " "+document.getElementById('street_add').value;
address += " "+document.getElementById('city').value;
address += " "+document.getElementById('state').value;
address += " "+document.getElementById('postcode').value;
$('#clickme').click(function() {
var strAddress = $( "address" ).serialize();
// data is an object containing info also called a map key/values
$.getJSON("http://maps.googleapis.com/maps/api/geocode/json?address=strAddress&sensor=false", function( data ) {
for (var i = 0; i <= data.length; i++) {
for (key in data.results[i]) {
var mystring = data.results[0].formatted_address;
var mylat = data.results[0].geometry.location.lat;
var mylng = data.results[0].geometry.location.lng;
}
}
$("<ul/>", {
"class": "zombies",
html: document.write(mystring,'<hr />', mylat, '<hr />', mylng),
}).appendTo( "body" );
});
});
});
Firstly, you need to append the value of address to the url string.
Secondly, you are assigning the return value of document.write to the html property of the new ul element. document.write does not return anything, hence you are seeing undefined.
Also, you are looping through data.results but for every iteration only retrieve the first item hence the for is redundant. Try this instead.
$.getJSON("http://maps.googleapis.com/maps/api/geocode/json?address=" + strAddress + "&sensor=false", function( data ) {
var mystring = data.results[0].formatted_address;
var mylat = data.results[0].geometry.location.lat;
var mylng = data.results[0].geometry.location.lng;
$("<ul/>", {
"class": "zombies",
html: mystring + '<hr />' + mylat + '<hr />' + mylng),
}).appendTo("body");
});
Related
I am working on a Google Maps API script but having trouble working with my arrays. The screenshot below shows my console.log statements from the code below. There are two arrays, they look exactly how I want them. I then console.log to verify the length (in this case 6). I then start a loop from 0 to 5 (6 minus 1). But the verify first console.log after than (markers[i][0]) returns TypeError: x[r] is undefined. I'm baffled by why I can clearly see the array directly above where I'm trying to extract a value.
if ($('#propertymap').length){
var map=new google.maps.Map(document.getElementById('propertymap'), {
center: {lat: 37.09024, lng: -95.712891},
zoom: 5
});
var bounds=new google.maps.LatLngBounds();
var geocoder=new google.maps.Geocoder();
var id;
var location;
var street;
var city;
var state;
var zip;
var squarefootage;
var ownedacreage;
var leasedacreage;
var hotelrooms;
var website;
var markers=[];
var infocontent=[];
$.post('/_getproperties.php', {task:'getproperties'}, function(result){
var locationsSplit=result.replace('{', '').split('}');
var i;
for (i=0; i<locationsSplit.length-1; i++){
var currentFields=locationsSplit[i].split('|');
id=currentFields[0];
location=currentFields[1];
street=currentFields[2];
city=currentFields[3];
state=currentFields[4];
zip=currentFields[5];
squarefootage=currentFields[6];
ownedacreage=currentFields[7];
leasedacreage=currentFields[8];
hotelrooms=currentFields[9];
website=currentFields[10];
geocodeAddress(location, street + ', ' + city + ', ' + state + ' ' + zip, location + '<br />' + street + '<br />' + city + ', ' + state + ' ' + zip, i);
}
console.log(markers);
console.log(infocontent);
console.log(locationsSplit.length-1);
for (i=0; i<locationsSplit.length-1; i++){
console.log(i);
console.log(markers[i][0]);
}
});
function geocodeAddress(locationtitle, locationaddress, locationdescription, i){
geocoder.geocode({'address': locationaddress}, function(results, status){
if (status==='OK'){
markers[i]=[];
markers[i][0]=locationtitle;
markers[i][1]=results[0].geometry.location.lat();
markers[i][2]=results[0].geometry.location.lng();
infocontent[i]=[];
infocontent[i][0]=locationdescription;
} else {
console.log('Geocode was not successful for the following reason: ' + status);
}
});
}
}
geocoder.geocode appears to be an asyncronous operation. At the time the program goes through the first iteration of the for loop the markers and infoContent arrays aren't populated yet.
The reason you're seeing results in the console as populated arrays is because the items are objects, and by the time manage to expand them they've been populated with data. The console is not displaying the data as it was at the point in time you called console.log, instead it's displaying the content of the object as it is at this moment.
To verify this, instead of passing the markers instance to console.log, pass the stringified version by calling console.log(JSON.stringify(markers)). I bet it'll show an empty array instead.
I want to create a google.Visualization.DataTablein the end, to show a graph. By now, I have a Problem with the following:
This is my code for getting Object from JSON-string and listing Properties:
var jsonData = <?php echo "'". $jsonTable. "'"; ?>;
var parsed = JSON.parse(jsonData);
var sensors = [];
for (var x in parsed){
sensors.push(parsed[x]);
}
var text ="";
for (var sensor in sensors){
if (sensors.hasOwnProperty(sensor)){
var measures = sensors[sensor];
text += ('\r\n' + sensor);
for (var time in measures){
if(measures.hasOwnProperty(time)){
text += ('\r\n' + time + " = " + measures[time]);
}
}
}
}
$(document.getElementById('chart_div')).text(text);
And my jsonData looks like this:
jsonData = '{"sensor1":
{"Date(2016,1,08,10,30,03)":19.187,
"Date(2016,1,08,10,00,02)":18.937[,...]},
"sensor2":
{"Date(2016,1,08,10,30,04)":18.687,
"Date(2016,1,08,10,00,03)":18.437[,...]}
[,...]}'
My Problem is that i don't get the values "sensor1", "sensor2" and so on in the loop. text += ('\r\n' + sensor); only returns the index of the sensor-object in the sensors-object.
How can I get the sensor name instead of the index?
One simple workaround
Remove the var sensors = [];
Find sensors and replace with parsed.
Code:
for (var sensor in parsed){
if (parsed.hasOwnProperty(sensor)){
var measures = parsed[sensor];
text += ('\r\n' + sensor);
console.log(parsed);
for (var time in measures){
if(measures.hasOwnProperty(time)){
text += ('\r\n' + time + " = " + measures[time]);
}
}
}
How can I get the sensor name instead of the index?
You need to do something with the property name in your first loop.
At present you are taking the property name (sensor1), using it to get the value ({"Date...) and then putting the value in an array while discarding the property name.
The simplest option would be to get rid of your first loop entirely and work with parsed instead of sensors in your second loop.
I have a function for a jQuery plugin that loop through some images.
//load images
function ImageSettings(config, fileNames) {
//loop through the array in the second argument
for (var x = 0; x < fileNames.length; x++) {
//create image
$("<img />").attr({
id: fileNames[x],
src: config.imgDir + fileNames[x] + config.imgFormat,
title: fileNames[x] + " layout"
}).appendTo("#" + config.imgContainer);
}
};
Further down my plugin, I need to pass the image attr ID inside a unordered list item , but my variable is located inside my function called fileNames.
so if use:
$(config.sidebar).append('<ul>' + fileNames + '</ul>');
//I get a string like: home, about, contact but I need it to be styled in a list item
If I use the split method to remove the " , " then I get an unknown method split.
So, is it possible to pass the function and variable inside? like for instance so I work around the unknown method?
$(config.sidebar).append('<ul>' +
ImageSettings(fileNames[x]).each(function() {
$( this ).wrap( "<li>" );
+ '</ul>');
I thought about using something like $('img').attr('id') and then style this in a list item but because I will have several images on my page but not all will be loaded and not all will need to be wrapped in a list item. Hence the reason why I would like to use my variable inside the function. Thank you.
You code seems a bit convoluted. Does this solve your problem?
Here's the code:
var config = {
"imgContainer": "imgContainer",
"sidebar": "ul",
"imgDir": "",
"imgFormat": "jpg"
};
var fNames= [/* list of file names */];
function ImageSettings(fileNames) {
//loop through the array in the second argument
for (var x = 0; x < fileNames.length; x++) {
var fname = fileNames[x];
//create image
$("<img />").attr({
id: fname.substr(fname.lastIndexOf("/"+1, fname.length)),
src: config.imgDir + fname + "."+config.imgFormat,
title: fname.substr(fname.lastIndexOf("/"+1, fname.length)) + " layout"
}).appendTo("#" + config.imgContainer);
$(config.sidebar).append('<li>' + fname + '</li>');
}
}
ImageSettings(fNames);
I need to output inputs and their values into a div. However, because I need to match the correct labels to the correct inputs, and some fields allow null values, I'm running into matching issues. Using the following code to pull each label/input into an array, and then output:
var inputArr = $('input, select').map(function(){
return "<p>" + $(this).val() + "</p>";
}).get()
var labelArr = $('label').map(function(){
return "<p>" + $(this).text() + "</p>";
}).get()
function setValuesForConfirm() {
//Clear Div Contents
$("#test-output-1, #test-output").html('');
for (var i = 0; i < labelArr.length; i++) {
$("#test-output-1").append(labelArr[i]);
}
for (var i = 0; i < inputArr.length; i++) {
$("#test-output").append(inputArr[i]);
}
}
So if any of the input's are blank, the fields do not match the labels.
My question is, can I name the array keys to the field name or ID in JS using the .map() function as I am currently?
JSFiddle Here
You could create an object using the inputs:
var formObj={};
$('input, select').each(function(){
formObj[this.name]={val: this.value, labelText: $(this).prev('label').text()};
});
then when loop over object can throw together html
$.each(formObj, function(key, item){
var labelHtml='<p>'+item.labelText+'</p>';
var inputHtml='<p>Name: '+ key+', value: '+item.val+'</p>';
/* do something with html*/
})
While what you have seems to work okay to me, .map creates an array and you can only have numeric ordinal keys in arrays in JavaScript, so you would need an object.
var inputArr = {};
$('input, select').each(function(){
inputArr[$(this).attr('name')] = "<p>" + $(this).val() + "</p>";
});
http://jsfiddle.net/Mz9Vy/1/
From the google maps API documentation I have got this working:
var flightPlanCoordinates = [
new google.maps.LatLng(37.772323, -122.214897),
new google.maps.LatLng(21.291982, -157.821856),
new google.maps.LatLng(-18.142599, 178.431),
new google.maps.LatLng(-27.46758, 153.027892)
];
what ive tried to do is replicate this piece of code with my own loop so I can use previously stored co-ords, like so:
var output;
$.getJSON('DisplayMap.php', function(data) {
var output = "[ ";
for (var i in data.b) {
output+= "new google.maps.LatLng" + "(" + data.b[i].Ya + ", " + data.b[i].Za + ")," + " ";
}
output+= "]";
document.getElementById("placeholder").innerHTML=output;
alert(output);
});
output+= "]";
Ive checked the output and it looks exactly as I want it to. however, when I substitute it in like this is doesnt work:
var flightPlanCoordinates = output;
In your new code you are building a string instead of an array. You should have something like this instead:
var output = [];
for (var i in data.b) {
output.push(new google.maps.LatLng(data.b[i].Ya, data.b[i].Za));
}
In addition, I am slightly confused by the fact that you create a variable named output both inside and outside of getJSON. Keep in mind that getJSON is asynchronous and you will not be able to use the variable from within getJSON immediately after it is called.
You have to set up a correct javascript Array instead of a string. Like this:
var output = [];
$.getJSON('DisplayMap.php', function(data) {
for (var i in data.b) {
output.push(new google.maps.LatLng(data.b[i].Ya, data.b[i].Za));
}
});