How can put the data into an array in laravel blade javascript?

I have these data in table containing:
1 Fält Sundsvall 62.39 17.31 
2 Precision Landskrona 55.87 12.83
outputted by (in the view blade):
@foreach ($data As $i)
{{ $i->id }} {{ $i->name }} {{ $i->contact_city }} {{ $i->lat }} {{  $i->lng  }}

I want those  in an array in the <script> area of the blade view to 
populate a google map with markers for each place 
(Sundsvall and Landskrona)
How can I do that?

If I try (in the <script> area where the map builds:
for (i = 1; i < locations; i++) {
var locations = JSON.parse('{{$data}}');

I'm getting (part): '[{&quot;id&quot;:1,&quot;championships_id&quot;:0,&quot;is_public&quot;:0,&quot;
contact_name&quot;:&quot;&quot;,&quot;contact_venue&quot;:&quot;Sundsvalls skjutbana&quot;.......................

Browser page source, seems to be raw data from the table.

Hi @comprog-ux,

I actually have a side-project at (open sourcing the code on this is on my radar) that does exactly this stuff. Built on Laravel and outputting stuff like this in JS.

Laravel escapes certain output by default for safe rendering but in this case you want the actual code to be output.

Try this:

var locations = JSON.parse('{!! $data !!}')

reference: Blade Templates - Laravel - The PHP Framework For Web Artisans

Depending on how $data is stored (array, collection, iterable etc.) you may need to tweak this but that’s how you don’t output “raw”(unencoded), use {!! $thing !!} instead of {{ $thing }}

Let me know how you get on or if you need anything more.

Billy :cowboy_hat_face:

also this bit looks like the lines are the wrong way round, set the variable then access it in the loop

I found out the way to do it.
var locations = [
@foreach ($data as $i)
[ "{{ $i->name }} " + “i " + “{{ $i->contact_city }}” + " br>” + “{{ $i->date }}” + " Anmälda: " + “{{ $i->signups_count }}” , {{ $i->lat }},{{ $i->lng }},0, “{{ $i->signups_closing_date }}” , “{{ $i->closed_at }}”,‘http://localhost:8080/app/competitions/’+{{ $i->id }}+ ‘/information’],
And for the loop where I put out the markers:
var t=new Date();
var visa;
var ldstr=t.toLocaleDateString(); // Today’s date.
// The loop
for (i = 0; i < locations.length; i++) {
date1=new Date(locations[i][4]);
date2=new Date(ldstr);
var newLat = locations[i][1] + (Math.random() -.5) / 20;// * (Math.random() * (max - min) + min);
var newLng = locations[i][2] + (Math.random() -.5) / 20;// * (Math.random() * (max - min) + min);
if (locations[i][5]){
var marker = new L.marker([newLat, newLng],marker3); // closed competition
marker.url = locations[i][6]; // pick up the date for closed competition
marker.bindPopup(locations[i][0]+’ br> Stängd’);
marker.on(‘click’, function(){
window.location = (this.url);
});marker.on(‘mouseover’, function (e) {this.openPopup();});
marker.on(‘mouseout’, function (e) { this.closePopup();});
} else if ( date1 < date2 ) {
var marker = new L.marker([newLat, newLng], marker2);
and so on…
The random lines are to separate competitions for a couple of kilometers on the same city as you can see on the map (cluster).
I have cut the < off the br-s for better reading…
Works perfect. Thanks guys!

1 Like