如何使用 JSON 将数组从 Twig 传递到 Javascript

Question

我需要你的帮助来创造奇迹。

我想将 Twig 数组转换为 Javascript 数组，然后在循环中使用它并为 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>

当我取回数组时，公司向我显示一个空数组。

但是当我将它转储到树枝上时，我的阵列没问题..

有人可以帮助我吗？

Answer 1

json_encode 将默认通过输出所有 public（即可访问）属性来序列化对象。由于您的对象没有 public 属性，因此序列化为空。您可以实现 JsonSerializable 接口。（恕我直言，最简单的解决方案）

还有其他更复杂的方法可以实现这一点。如果 json 序列化会因上下文而异，它们就会变得相关....替代方案是实现一个 twig 函数，该函数将从您的对象中获取某些字段，编写适当的序列化程序或在您的对象上实现公开适当的函数序列化取决于上下文。

Answer 2

我把我所有的价值观都放在了一个隐藏的输入中。最后我在 json 中得到了 JSON.parse 我的 Json 结果。它并不完美，但它正在工作。

我的 Twig 代码：

{% 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 }}">

我的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>

如何使用 JSON 将数组从 Twig 传递到 Javascript

How to pass array from Twig to Javascript using JSON

javascript

arrays

symfony

twig

symfony4