How to pass array from Twig to Javascript using JSON

Question

I need your help to work miracles.

I want to convert Twig array to Javascript array and then use it in a loop and create markers for the Google API.

<script>
    var map, marker, i, e;
    var companies = {{ companies.items | json_encode() | raw }};

    console.log(companies);
    var address = {{ search.city.first.name | json_encode() | raw }};

    function initMap() {
        var geocoder = new google.maps.Geocoder();

        map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: 44.8333, lng: -0.5667},
            zoom: 12,
            disableDefaultUI: true
        });

        //for (i = 0; i < locations.length; i++) {
            //marker = new google.maps.Marker({
                //position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                //map: map
            //});

    }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=APIKEYLOL&callback=initMap"></script>

When I get my array back, companies show me an empty array.

Screen of empty array of console.log(companies)

But when I dump this on twig my array is ok ..

Dump array on Twig

Can someone help me?

This symfony doc explains how

A1rPun
– A1rPun

2019-11-21 23:29:35 +00:00
Commented Nov 21, 2019 at 23:29 — A1rPun
– A1rPun, Commented Nov 21, 2019 at 23:29

Jakumi · Accepted Answer · 2019-11-21 16:51:29Z

2

json_encode will by default serialize an object by outputting all public (i.e. accessible) properties. Since your objects have no public properties, the serialization is empty. you could implement the JsonSerializable interface. (IMHO, the simplest solution)

There are other more complicated ways to achieve this. They become relevant if the json serialization will vary on context .... Alternatives would be to implement a twig function that will fetch certain fields from your objects, writing a proper serializer or implementing functions on your objects that expose the proper serialization depending on context.

answered Nov 21, 2019 at 16:51

Jakumi

8,3842 gold badges18 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tonyRICHER · Accepted Answer · 2019-11-21 18:14:34Z

0

I put all my values into a hidden input. And I get it in json at last I JSON.parse my Json result. It's not perfect but it's working.

My Twig code :

{% set array = [] %}
  {% for company in companies %}
    {% set array = array | merge([{name: company.title, latitude: company.latitude, longitude: company.longitude}]) %}
  {% endfor %}
  <input type="hidden" id="array" value="{{ array|json_encode }}">

My javascript :

<script>
    var map, marker, i;
    var array = document.getElementById('array').value;
    var companies = JSON.parse(array);

    var address = {{ search.city.first.name | json_encode() | raw }};

    function initMap() {
        var geocoder = new google.maps.Geocoder();

        map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: 44.8333, lng: -0.5667},
            zoom: 14,
        });

        geocoder.geocode({'address': address}, function (results, status) {
            if (status === 'OK') {
                map.setCenter(results[0].geometry.location);
            } else {
                alert('Geocode was not successful for the following reason: ' + status);
            }
        });

        for (i = 0; i < companies.length; i++) {
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(companies[i].latitude, companies[i].longitude),
                map: map
            });

            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                    infowindow.setContent(companies[i].name);
                    infowindow.open(map, marker);
                }
            })(marker, i));
        }
    }
</script>

answered Nov 21, 2019 at 18:14

tonyRICHER

871 gold badge2 silver badges7 bronze badges

1 Comment

DarkBee Over a year ago

Don't forget you could just create a jascript variable in your twig template instead of using the hidden input

var address = {{ { 'name': company.title, 'latitude': company.latitude, 'longitude': company.longitude, } | json_encode }}

. This variable will be accessible in your external JS files

Collectives™ on Stack Overflow

How to pass array from Twig to Javascript using JSON

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related