Php $var in Javascript function Laravel

Question

I pass php $var into Javascript from controller. $var has fetched addresses from DB. And i put it in Javascript. Now i can see the addresses in the console. No problem with that, I don't know why syntax error pop up too.

This is how I insert it into JS.

function initMap(){
        var options = {
            zoom:8,
            center:
                '{!! $estates[0]->address !!}'
        }

        var map = new google.maps.Map(document.getElementById("map"), options);

        var marker = new google.maps.Marker({
            position:
                    @foreach($estates as $addr)
                        '{!! $addr->address !!}',
                    @endforeach
            map:map
        });

        var infoWindow = new google.maps.InfoWindow({
            content:'content here'
        });

        marker.addListener('click', function () {
            infoWindow.open(map, marker);
        });
    }

my foreach running without a problem I can see the addreses in the console but also at this line: '{!! $estates[0]->address !!}' error pops up too. Actually I am seeing the address not this line.

error is this:

Uncaught SyntaxError: Invalid or unexpected token

Do you have any idea? am I making syntax mistake. But if do that then how can I retrieving the addresses at the console?

Also having this error too at the same line:

Undefined variable: estates (View: /var/www/html/laravel/resources/views/layouts/app.blade.php) (View: /var/www/html/laravel/resources/views/layouts/app.blade.php)

Controller

public function index()
{
    $estates = DB::table("allestates")
        ->get();
    return view("home", compact('estates'));
}

the topic is different the duplicated ones. it's not pure JS i am working with Laravel.

@jin Javascript is inside Blade templates, so this should work. `PHP` in `.js` files won't work (unless you tell your server to) — brombeer, Dec 04 '18 at 08:37
Possible duplicate of [How to pass variables and data from PHP to JavaScript?](https://stackoverflow.com/questions/23740548/how-to-pass-variables-and-data-from-php-to-javascript) — online Thomas, Dec 04 '18 at 08:42
@MateiMihai updated the question. added the controller. But also I have another controller and fetching the same table with same $estates. but there is no problem with that. — firefly, Dec 04 '18 at 08:58
Does PHP or your browser throw the first error about an invalid token? Can you share the generated code? — Nico Haase, Dec 04 '18 at 09:00
@NicoHaase you lost me there. I don't know how to figure it out. Php or browser. and what generated code? — firefly, Dec 04 '18 at 09:01
Your server generates some JS code through PHP and sends it to the browser. The browser tries to interpret that code and might throw an error - if you could share that code (or inspect it on your own), you could spot the error — Nico Haase, Dec 04 '18 at 09:04

Mihai Matei · Answer 1 · 2018-12-04T09:24:52.980

0

I think one of the addresses contains the ' character. To avoid it use the addslashes function. You could do that in the controller:

public function index()
{
    $estates = DB::table("allestates")->get()->map(function($estate) {
        $estate->address = addslashes($estate->address);
        return $estate;
    });

    return view("home", compact('estates'));
}

And the according js would be:

var options = {
    zoom:8,
    center: new google.maps.LatLng({{$estates[0]->lat}}, {{$estates[0]->long}});
}

Because you have multiple addresses, it means you will have multiple markers too. That being said your code should look something like:

function initMap(){
    var options = {
        zoom:8,
        center: new google.maps.LatLng({{$estates[0]->lat}}, {{$estates[0]->long}});
    }

    var map = new google.maps.Map(document.getElementById("map"), options);
    var infoWindow = new google.maps.InfoWindow({
        content:'content here'
    });
    var markers = [];

   @foreach ($estates as $key => $estate)

    markers[{{$key}}] = new google.maps.Marker({
        position:  new google.maps.LatLng({{$estate->lat}}, {{$estate->long}});
        map: map
    });

    markers[{{$key}}].addListener('click', function () {
        infoWindow.open(map, markers[{{$key}}]);
    });

    @endforeach
}

edited Dec 04 '18 at 09:24

answered Dec 04 '18 at 08:46

Mihai Matei

24,166
5
32
50

@Snickers make sure that the `estates` variable is really named like that.. It seems to be some kind of typo – Mihai Matei Dec 04 '18 at 08:49
no problem with the name I checked it but yoru code not worked same error still there – firefly Dec 04 '18 at 08:50
thanks for update but now i am getting this error. `InvalidValueError: setCenter: not a LatLng or LatLngLiteral: not an Object` by the way there are 4 addreses in the database. if you delete foreach how can I itarate thoese with marker? – firefly Dec 04 '18 at 09:10
Well, now there is another story.. The center property expects an object with latitude and longitude set. You can't pass it an address string. Probably the position too. Also, the implode I wrote does the same thing as your foreach – Mihai Matei Dec 04 '18 at 09:12
I gave the center: city lat and lng but marker need to go with address string. Now error jump to the marker section. – firefly Dec 04 '18 at 09:16
I am really thankful the updated code. but now I getting this error: `Undefined property: stdClass::$lat` Also i think some syntax at these lines `[{{$key}}]` I use `["{{$key}}"]` these but still same error. – firefly Dec 04 '18 at 09:33

score -2 · Answer 2 · answered Dec 04 '18 at 08:44

-2

You can use php variables inside laravel blade files as

var options = { zoom:8, center: '{{$estates[0]->address}}' }

answered Dec 04 '18 at 08:44

Kingslayer

36
8

Php $var in Javascript function Laravel

2 Answers2