I'm newbie in AngularJS and testing with Jasmine. I have two describe with several httpBackend.whenPOST, but i dont know if its possible the next:
I want to include two nested describes, which the second uses all httpBackend.whenPost from the first one. But i want that one of these httpBackend.whenPost returns another Json having the same url. Is this possible?
describe('describe1', function(){
beforeEach(function(){
$httpBackend.whenPOST(/backend\/economicresponsible\/get\/.*/).
respond(function(method, url, data, headers) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.open('POST', 'tests/json/economicData1.json', false);
xmlhttp.send();
return [200, JSON.parse(xmlhttp.response), {}];
});
.... more requests...
});
it('should be test', function(){
get response economicData1.json
});
describe('describe2', function(){
beforeEach(function(){
$httpBackend.whenPOST(/backend\/economicresponsible\/get\/.*/).
respond(function(method, url, data, headers) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.open('POST', 'tests/json/economicData2.json', false);
xmlhttp.send();
return [200, JSON.parse(xmlhttp.response), {}];
});
});
it('should be test 2', function(){
get response economicData2.json
});
});
});
Related
I have a map with a number of pins on it, the pins are generated from an endpoint api (json). I want to filter the pins via an input that has a v-modal - the search criteria is already set up and is pulled from the same api.
Even if someone can give some tips as to where in the vue lifecycle the filter should happen, i.e mounted, updated computed ect
Originally I used this article as a reference
https://medium.com/#limichelle21/integrating-google-maps-api-for-multiple-locations-a4329517977a
created() {
axios
.get(
`https://cors-anywhere.herokuapp.com/myEndpoint`
)
.then(response => {
// JSON responses are automatically parsed.
this.allProperties = response.data;
this.markers = this.allProperties.map(function (x) {
return {
lat: parseFloat(x.lat).toFixed(3),
lng: parseFloat(x.lng).toFixed(3),
add: x.dispAddress,
propId: x.property_id,
propPrice: x.outputAskingPrice,
propImg: x.imagePath
};
});
this.allProperties = response.data.map(x => {
x.searchIndex = `${x.sellingStatus} ${x.priceType} ${x.typeNames[0]} ${x.typeNames[1]} ${x.dispAddress}`.toLowerCase();
return x;
});
});
},
mounted: function () {
var _this = this;
function initMap() {
var center = {
lat: 53,
lng: -3
};
var map = new google.maps.Map(document.getElementById("map-canvas"), {
zoom: 10,
center: center
});
var newPin = new google.maps.Marker({
position: center,
map: map
});
}
},
updated() {
var _this = this;
var map = new google.maps.Map(document.getElementById("map-canvas"), {
zoom: 9,
center: new window.google.maps.LatLng(55.961, -3)
});
var infowindow = new google.maps.InfoWindow({});
var newPin;
var count;
for (count = 0; count < _this.markers.length; count++) {
newPin = new google.maps.Marker({
position: new google.maps.LatLng(
_this.markers[count].lat,
_this.markers[count].lng
),
map: map,
icon: "../assets/img/map-pin.png"
});
google.maps.event.addListener(
newPin,
"click",
(function (newPin, count) {
return function () {
infowindow.setContent(` ${_this.markers[count].add} <p> ${_this.markers[count].propPrice}</p><img src="${_this.markers[count].propImg}"><p>`);
infowindow.open(map, newPin);
};
})(newPin, count)
);
}
If you have v-model on an <input> field like mentioned in your question, you are binding the value of this <input> field to a variable probably defined in the data part of your Vue component. The value is always up to date in the model (reactive binding). You can watch this value and then trigger a function which updates Google Maps. Here is an example:
Vue.component('demo', {
data () {
return {
inputField: ''
};
},
created () {
console.log('Component script loaded, HTML not yet ready, load the data from your backend. Use a flag like isLoading or similar to indicate when the data is ready to enable input.');
},
mounted () {
console.log('Component mounted, HTML rendered, load Google Maps');
},
watch: {
inputField (newValue) {
console.log(`inputField changed to ${newValue}. Trigger here a method which update Google Maps. Make sure to debounce the input here, so that it does not trigger a Google Maps update too often.`);
}
},
template: `
<div>
<input type="text" v-model="inputField" placeholder="Lookup place">
</div>`
});
new Vue({ el: '#vue-demo-container' });
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="vue-demo-container">
<demo></demo>
</div>
I'm using the Cordova Geolocation plugin to get the users lat and long data. The intention is use that lat and long and apply it to an api call I'm making to Breezometer. Unfortunately my code is is not working correctly. Can someone let me know what im missing here:
.controller('GeoCtrl', function($cordovaGeolocation, $scope, $http) {
var posOptions = {timeout: 10000, enableHighAccuracy: false};
$cordovaGeolocation
.getCurrentPosition(posOptions)
.then(function (position) {
var lat = position.coords.latitude
var long = position.coords.longitude
$scope.result = "";
$http.get('https://api.breezometer.com/baqi/?lat='+ lat + 'lon=-' + long + '&key=c329a5b015f442748e088cfd13726267')
.success(function(data, status, headers,config){
console.log('data success');
console.log(data); // for browser console
$scope.result = data; // for UI
})
.error(function(data, status, headers,config){
console.log('data error');
})
.then(function(result){
things = result.data;
});
}, function(err) {
// error
});
var watchOptions = {
frequency : 1000,
timeout : 3000,
enableHighAccuracy: false // may cause errors if true
};
var watch = $cordovaGeolocation.watchPosition(watchOptions);
watch.then(
null,
function(err) {
// error
},
function(position) {
var lat = position.coords.latitude
var long = position.coords.longitude
});
watch.clearWatch();
// OR
$cordovaGeolocation.clearWatch(watch)
.then(function(result) {
// success
}, function (error) {
// error
});
})
The url for your http request is wrong.
Try the following,
$http.get(https://api.breezometer.com/baqi/?lat='+ lat + '&lon='+ long +'&key='+ key)
You have miised & in between lat and lon. And lon need not be prefixed with -
Example:
https://api.breezometer.com/baqi/?lat=13.082680199999999&lon=80.2707184&key=c329a5b015f442748e088cfd13726267
Click here to view the results.
So I have a map and when user clicks on any marker I want to get a json. All variables have a value and when I manually put them in browser I get an response. At the moment I get:
XMLHttpRequest cannot load
https://maps.googleapis.com/maps/api/directions/json?origin=53.5411328&-2.1114581&destination=53.54027.
No 'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'my url of course' is therefore not allowed
access.
And the link looks like this:
https://maps.googleapis.com/maps/api/directions/json?origin=53.541111&-2.1114894&destination=53.54027
while it should be:
https://maps.googleapis.com/maps/api/directions/json?origin=53.541111,-2.1114894&destination=53.54027,-2.1121799&key=AIzaSyAirYgs4Xnt9QabG9v56jsIcCNfNZazq65
Code:
marker.addListener('click', function() {
var destinationLat = marker.getPosition().lat();
var destinationLng = marker.getPosition().lng();
console.log(lat);
console.log(lng);
console.log(destinationLng);
console.log(destinationLat);
var test = $.getJSON('https://maps.googleapis.com/maps/api/directions/json?origin='+lat+'',''+lng+'&destination='+destinationLat+'',''+destinationLng+'&key=AIzaSyAirYgs4Xnt9QabG9v56jsIcCNfNZazq65', function(data) {
console.log(test);
});
console.log(test);
});
}
The mistake's in this line:
var test = $.getJSON('https://maps.googleapis.com/maps/api/directions/json?origin='+lat+'',''+lng+'&destination='+destinationLat+'',''+destinationLng+'&key=AIzaSyAirYgs4Xnt9QabG9v56jsIcCNfNZazq65', function(data) {
That should be:
var test = $.getJSON('https://maps.googleapis.com/maps/api/directions/json?origin='+lat+','+lng+'&destination='+destinationLat+','+destinationLng+'&key=AIzaSyAirYgs4Xnt9QabG9v56jsIcCNfNZazq65', function(data) {
In order to avoid the CORS headers issue in your JavaScript code you should use a built-in Directions service of Maps JavaScript API.
https://developers.google.com/maps/documentation/javascript/directions
Replace your AJAX call with something similar to
directionsService.route({
origin: new google.maps.LatLng(lat,lng),
destination: new google.maps.LatLng(destinationLat,destinationLng),
travelMode: 'DRIVING'
}, function(response, status) {
if (status === 'OK') {
//Process response here
} else {
window.alert('Directions request failed due to ' + status);
}
});
Take a look at examples
https://developers.google.com/maps/documentation/javascript/examples/directions-simple
I hope this helps!
I am using kmllayers from the standard Google Dev site:
var ctaLayer = new google.maps.KmlLayer({
url: 'http://gmaps-samples.googlecode.com/svn/trunk/ggeoxml/cta.kml'
});
ctaLayer.setMap(map);
How do you do error checking? In my example I have url with a get parameter to get a filtered response from a database whose return is a kml.
If I get a null response or a kml with no data, I want to redirect the page. How do I perform the check?
Per the documentation on KmlLayer, the KmlLayerStatus can be retrieved from the KmlLayer:
var ctaLayer = new google.maps.KmlLayer({
url: 'http://gmaps-samples.googlecode.com/svn/trunk/ggeoxml/cta.kml'
});
google.maps.event.addListener(ctaLayer,'status_changed', function() {
if (ctaLayer.getStatus() != OK) {
alert("error loading KML, status="+ctaLayer.getStatus());
}
}
ctaLayer.setMap(map);
I am trying to display a successful message once the form gets sent:
$('emeraldForm').addEvent('submit', function(){
onSuccess: function(){
alert('df');
}
});