Why isn't my JSON structure updating when I explicitly assign a new value?
items[0][i]['human_addressItem'] = address;
I am trying to reverse geocode the latitude and longitude to obtain the human address, which is working fine. However, I cannot insert it into the JSON. Why is that?
Here is the example in action:
CODE:
HTML:
<script src="http://code.jquery.com/jquery-2.0.2.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<div class="container-fluid">
<!-- Tables -->
<section id="tables">
<table>
<thead>
<tr>
<th>[name]</th>
<th>[txtLat]</th>
<th>[txtLon]</th>
<th>[human_address]</th>
</tr>
</thead>
<tbody id="items">
<script id="tmpItems" type="text/html">
<tr>
<td><input value="${name}" type="text" name="[name]"></td>
<td><input value="${Latitude}" type="text" name="[txtLat]"></td>
<td><input value="${Longitude}" type="text" name="[txtLon]"></td>
<td><input value="${human_addressItem}" type="text" name="[human_address]"></td>
</tr>
</script>
</tbody>
</table>
</section>
</div>
JAVASCRIPT:
//GEOCORDER
geocoder = new google.maps.Geocoder();
items = [
[{
"Longitude": -73.929489,
"Latitude": 40.76079,
"name": "Electronics"
}, {
"Longitude": -73.761727,
"Latitude": 40.695817,
"name": "02 Dodge (PICS)"
}], {
"active": 0
}];
for (var i = 0; i < items[0].length; i++) {
var address = "";
var lat = parseFloat(items[0][i]['Latitude']);
var lng = parseFloat(items[0][i]['Longitude']);
var latlng = new google.maps.LatLng(lat, lng);
geocoder.geocode({
'latLng': latlng
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
var address = results[1].formatted_address;
//alert(address);
console.log(address);
} else {
alert('No results found in: ' + items[0][i]['name']);
}
} else {
alert('Geocoder failed due to: ' + status + " in: " + items[0][i]['name']);
}
});
items[0][i]['human_addressItem'] = address;
}
var o = items;
$("#tmpItems").tmpl(items[0]).appendTo("#items");