Javascript draait in een loop vanwege JSON-string?

Door Ariën op 22-10-2017 23:00 gewijzigd op 22-10-2017 23:02

3.246 views

Ik heb hier een stukje AJAX-code die wat coordianten uit een API ophaalt, en verwerkt in Google Maps met een timertje die elke 5 seconden ververst. En zodoende heb je dus een mooie voertuigtracker... als het werkt.

Echter is het probleem dat deze in een recursieve loop draait, geeft de debugger weer, en inderdaad wordt er een hoop geheugen gebruikt.

Dus, het werkt niet. En het ligt aan de format van de JSON-string, heb ik het idee.
Als deze gewoon leeg is dan laad hij het script prima in (en uiteraard op de 0,0 locatie). Maar met onderstaande JSON-string in de request gaat hij dus voluit op zijn plaat op lijn nummer 15.

Wat gaat er mis?


{"1234":{"DateGPS":"2017-10-22T22:55:45+02:00","DateReceived":"2017-10-22T22:55:46.071+02:00","Longitude":5.74551,"Latitude":52.01425,"Speed":139,"DOP":0,"VehicleNumber":"1234","VehicleType":"Sprinter","TrainNumber":"4321"}}

Het stukje (ingekortte) code


function getCoords() {
	    $.ajax({
		url: "api.php",
		type: "GET",
		cache: false, 
		data: {
		    action : "trainset",
		    number : '1234'
		},
		dataType: "text",
		success: function(returnedData) {
		    alert(returnedData);
		    var jsondata = jQuery.parseJSON(returnedData);
		      console.log('Joehoe'+returnedData);
		      var coords = jsondata.Latitude+','+jsondata.Longitude;
		      alert(coords);
		      //console.log('Lat: '+jsondata.Latitude);
		      var coordsArray = coords.split(",");
		      moveMarkerMap(coordsArray[0], coordsArray[1]);
		      setTimeout(getCoords, 5000);
		      
		      
		},
		done: function(data) {
		    //setTimeout(getCoords, 5000); // hier werkt hij niet.
		} 	
	     }); 
	}

function moveMarkerMap(lat,lon) {
	    var newLatLang = new google.maps.LatLng(lat,lon);
	    map.panTo(newLatLang);
	    marker.setPosition(newLatLang);
	}

- SanThe -

22-10-2017 23:31 gewijzigd op 22-10-2017 23:32

Geen verstand van jquery, maar zo is ie normaal in js:
setTimeout(function(){ getCoords(); }, 5000);

Ariën

22-10-2017 23:48 gewijzigd op 22-10-2017 23:49

Maar daar ligt het niet aan, want als ik die wegcomment gaat 'ie wel goed, althans... hij 'loopt' dan niet.

Het gaat gewoon fout in die returnedData en de JSON-string.

Rob Doemaarwat

22-10-2017 23:54

Is het probleem niet dat je zowel op de success als de done een nieuwe timer start (dus 2x). Die starten beide ook weer 2 nieuwe timers, enz. Gaat best hard.

Tevens: waarom gebruik je niet dateType: 'json', hoef je niet met parseJSON() aan de slag.

Thomas van den Heuvel

22-10-2017 23:58 gewijzigd op 22-10-2017 23:58

Waarom geef je niet "json" aan bij de dataType parameter? Hoef je het ook niet te parsen lijkt mij?

EDIT: @Rob was me voor

Ariën

22-10-2017 23:58 gewijzigd op 23-10-2017 00:18

@Rob: Bij het done-event is hij ook weggecomment, omdat die daar niet werkte.

~~Maar als ik dataType JSON gebruik, hoe kan ik dan de data uit de JSON-string apart oproepen i.p.v. JSONparse?~~

Maar waarom gaat hij puur op zijn plaat op deze JSON-string dan? Dat snap ik echt niet.
Voorheen had deze techniek ook geen moeite, dus ik kan wel overstappen naar JSON als dataType, maar dat is nog geen oplossing voor dit probleem, lijkt mij.

Edit:
Hij loopt niet meer met dataType JSON. :-)
Inmiddels heb ik dit:


success: function(returnedData) {
	alert('Joehoe'+returnedData);
	var coords = returnedData.Latitude+','+returnedData.Longitude;
	alert(coords);

	/*
	console.log('Lat: '+jsondata.Latitude);
	var coordsArray = coords.split(",");
	moveMarkerMap(coordsArray[0], coordsArray[1]);
		      setTimeout(getCoords, 5000);
	*/
		},

Echter geeft hij aan dat coords undefined is.
Waarom?

Rob Doemaarwat

23-10-2017 00:15

Maar nog steeds dezelfde fout?

Als je beide setTimeouts() even weglaat? Nog steeds zelfde probleem?
En als je regel 15 t/m 19 weglaat? Nog steeds zelfde probleem? Je zit op regel 15 nl wel twee floats te concatten, misschien gaat dat mis, en triggert dat de verdere ellende (error handler ergens)?

Als je dataType: 'json' meegeeft is je returnedData meteen al JSON. Hoef je dus niks voor te doen.

Ariën

23-10-2017 00:17 gewijzigd op 23-10-2017 00:20

Zie mijn ninja-edit boven je ;-)
Ik ben een stapje verder, en volgens mij het laatste stapje tot het werkend is.

Nu nog die undefined ...

Er komen om vage redenen geen coordinaten door, dus gaat die andere setTimeout ergens dus onderuit.

Thomas van den Heuvel

23-10-2017 00:20 gewijzigd op 23-10-2017 00:36

De Latitude en Longitude zitten nog in een ~~subarray~~ subojbect van het treinnummer als de JSON-snippet uit je oorspronkelijke bericht nog steeds van toepassing is. Deze zul je dan daar uit moeten peuteren.

Ariën

23-10-2017 00:21

Aha, nu zie ik het. En hoe bewerkstelligen we dat met jQuery?

Thomas van den Heuvel

23-10-2017 00:54 gewijzigd op 23-10-2017 00:55

Hm, als ik mij niet vergis is die API-respons nogal onhandig opgezet. Immers, je vraagt iets van een specifieke trainset op. Vervolgens wordt de data teruggegeven als de waarde van een property... Waarom niet meteen de data? :/

Krijg je ooit waarden terug van meerdere trainsets? Want properties hebben geen vaste volgorde, dus je zult dan echt aan het trainset-nummer moeten refereren om de juiste data terug te krijgen :/.

Ik weet ook niet of properties de naamgeving van variabelen moeten volgen (lijkt mij van wel?), dus als dat echt letterlijk "1234" is (zal wel niet?) dan is dat technisch gezien niet eens een toegestane constructie.

Als die "1234" een soort van tekst is die voldoet aan de naamgeving van een variabele (bijvoorbeeld "blaat"), dan zou je hier aan kunnen refereren via returnedData.blaat.Longitude (dus gewoon een object syntax), maar dan moet je callback-functie wel dit nummer kennen. Je zou twee vliegen in een klap kunnen slaan door hier een parameter van te maken in je getCoords() functie, zodat deze ook meteen wat dynamischer wordt?

Reageren

Inloggen om te reageren