I’m trying to get lat/lng from a repeater to make leaflet markers. I’ve tried every different variation of formatting I can think of and nothing returns the value.
<div class="row" is="dmx-repeat" id="repeat1" dmx-bind:repeat="sc_tripbits.data.all_tripbits">
<script>
var marker = L.marker([dmx.parse('repeat1.data.lat'), dmx.parse('repeat1.data.lng' )]).addTo(mymap);
</script>...
Thanks for any pointers!
Hi,
Did you debug it? Does it return any values?
Do you get a value without the repeat?
I mean if you just bind a value out of the repeat does it display the first value?
Sorry, yes, I should have said. I have two paragraph elements that are returning the values
<p dmx-text="lat"></p>, <p dmx-text="lng"></p>
However, i tried binding it outside the repeat like so…
<p>TEST: {{repeat1[0].lat}}</p>
and nothing was returned. That’s the Wappler generated code. Nothing is returned even if I put that back inside the repeat.
This returns the first value whether inside or outside the repeat
<p>TEST: {{sc_tripbits.data.all_tripbits[0].lat}}</p>
H.
Further - I’ve tried using a new page and a different table/repeater.
<div class="contentArea">
<div id="repeat1" is="dmx-repeat" dmx-bind:repeat="serverconnect1.data.all_trips">
<p dmx-text="'1' + trip_name"></p>
<p dmx-text="'2' + serverconnect1.data.all_trips[0].trip_name.value()"></p>
<p dmx-text="'3' + serverconnect1.data.all_trips[0].trip_name.getValue()"></p>
<p dmx-text="'4' + serverconnect1.data.all_trips.trip_name.value()"></p>
<p dmx-text="'5' + serverconnect1.data.all_trips.trip_name.getValue()"></p>
<p dmx-text="'6' + serverconnect1.data.all_trips[0].trip_name.value"></p>
<p dmx-text="'7' + serverconnect1.data.all_trips[0].trip_name.getValue"></p>
<p dmx-text="'8' + serverconnect1.data.all_trips.trip_name.value"></p>
<p dmx-text="'8' + serverconnect1.data.all_trips.trip_name.getValue"></p>
<p dmx-text="'9' + repeat1.trip_name.value"></p>
<p dmx-text="'10' + repeat1.trip_name.getValue"></p>
<p dmx-text="'11' + repeat1.trip_name.value"></p>
<p dmx-text="'12' + repeat1.trip_name.getValue"></p>
<p dmx-text="'13' + repeat1.trip_name"></p>
<p dmx-text="'14' + repeat1[0].trip_name"></p>
<p dmx-text="'15' + repeat1[0].trip_name.value"></p>
<p dmx-text="'16' + repeat1[0].trip_name.getValue"></p>
<p dmx-text="'17' + {{trip_name}}"></p>
<script>
console.log(dmx.parse("serverconnect1.data.all_trips[0].trip_name.value()"));
console.log(dmx.parse("serverconnect1.data.all_trips[0].trip_name.getValue()"));
console.log(dmx.parse("serverconnect1.data.all_trips.trip_name.value()"));
console.log(dmx.parse("serverconnect1.data.all_trips.trip_name.getValue()"));
console.log(dmx.parse("serverconnect1.data.all_trips[0].trip_name.value"));
console.log(dmx.parse("serverconnect1.data.all_trips[0].trip_name.getValue"));
console.log(dmx.parse("serverconnect1.data.all_trips.trip_name.value"));
console.log(dmx.parse("serverconnect1.data.all_trips.trip_name.getValue"));
console.log(dmx.parse("repeat1.trip_name.value()"));
console.log(dmx.parse("repeat1.trip_name.getValue()"));
console.log(dmx.parse("repeat1.trip_name.value"));
console.log(dmx.parse("repeat1.trip_name.getValue"));
console.log(dmx.parse("repeat1.trip_name"));
console.log(dmx.parse("repeat1[0].trip_name"));
console.log(dmx.parse("repeat1[0].trip_name.value()"));
console.log(dmx.parse("repeat1[0].trip_name.getValue()"));
console.log(dmx.parse("{{trip_name}}"));
</script>
</div>
The first and last of those are the only ones that print out the trip_name. And they all send the same error message to the console.
parser.js:384 TypeError: Cannot read property 'get' of undefined
at t (parser.js:649)
at parser.js:731
at parser.js:731
at parser.js:718
at parser.js:731
at parser.js:699
at parser.js:449
at Object.dmx.parse (parser.js:382)
at testing.php:39
dmx.parse @ parser.js:384
(anonymous) @ testing.php:39
testing.php:39 undefined
I could just write some php code to get the data directly, but I’d really rather do this the Wappler way if possible.
Thanks.
could you share url for check
I’ve been working on this all day so none of what I posted there is still there. I’ve searched the docs and can’t find anything where someone has managed to get a value inside a repeat into javascript. Maybe it’s not possible? I’ve tried setting php variables, setting cookies/sessions, etc, etc and nothing works.
I can put all that back in but I don’t think it would be helpful.
When I got this error It was data type error. I mean that I was trying to read a string as a number.
Try something like this and throw it inside the repeat
{{sc_tripbits.data.all_tripbits[$index].lat}}
to check if you ll get something
Thanks. That makes sense and works inside the repeat, but not parsing it in script.
{{sc_tripbits.data.all_tripbits[$index].lat}} <!--works-->
<script>
console.log(dmx.parse("{{sc_tripbits.data.all_tripbits[$index].lat}}")) //doesn't work
</script>
Please a try again with remove double quotas
Why are you adding the script block inside the repeater? I wouldn’t advice using script blocks in the middle of your html.
I’m not sure what you want to do, but you could better put the javascript inside a function and call it in an event, for example the load event of serverconnect or the updated event from your repeater.
Removing double quotes throws an error.
Uncaught SyntaxError: Unexpected token ‘{’
Hey Patrick,
In this particular instance I need to create a marker for my map and then place it on the map. I’m using leaflet as I don’t want to use Google maps (which are insanely expensive now!).
I have this working in a standalone app that I wrote using php/mysql for the data and already have all the scripts written from that. I just boiled it down to the simplest example to figure out how to get the lat/lng variable from the repeater.
I just tried …
<div class="row" is="dmx-repeat" id="repeat1" dmx-bind:repeat="sc_tripbits.data.all_tripbits" dmx-on:updated="mapMarker({{sc_tripbits.data.all_tripbits[$index].lat}})">
with the function outside the repeater at the end of my code with the rest of the javascript functions
function mapMarker(lat){console.log("LAT:" + lat);}
it returns “Lat: undefined”
So the problem is still, how to get a value from the repeater into javascript.
Maybe if you, or someone else, has a few minutes you could mock it up and see if you can get a value from a repeater into a script? I’m starting to think it might be a backend issue with Wappler, rather than a syntax issue on my end.
Thanks
Hi Heather,
Have you tried this?
<div class="row" is="dmx-repeat" id="repeat1" dmx-bind:repeat="sc_tripbits.data.all_tripbits" dmx-on:updated="mapMarker({{lat}})">
EDIT: might also want dmx-on:changed instead of updated. But also, this isn’t an input so it won’t be changed, right?
use onsuccess="setMapMarkers()" on the server connect component. In the javascript function get the data from the server connect, loop through them and do your work.
function setMapMarkers() {
var markers = dmx.parse('sc_tripbits.data.all_tripbits');
if (Array.isArray(markers)) {
markers.forEach(function(marker) {
console.log('LAT:' + marker.lat + ', LNG:' + marker.lng);
L.marker([marker.lat, marker.lng]).addTo(mymap);
});
}
}
Patrick!!! My Hero!!! That works perfectly. Thanks!!!