Envoyer les valeurs d'une entité convertie en Json au Javascript

Bonsoir à tous,
Je cherche à afficher la localisation de mes biens dans un map ( j'ai suivis la formation de symfony 4 par exemple). pour cela j'ai converti mon entité en json que j'ai envoyé à ma vue. Et de ma vue, renvoyer au javaScript:

 $user = $this->getUser();
        $biens = $this->bienRepository->findByBiensMap($user);

        $encoders = [new XmlEncoder(), new JsonEncoder()];
        $normalizers = [new ObjectNormalizer()];
        $serializer = new Serializer($normalizers, $encoders);
        $biensTab = $serializer->serialize($biens, 'json');

        return $this->render('biens/map.html.twig', compact('biensTab'));

 <div class="my-5" id="mapid" style="width: 600px; height: 400px" data-biens="{{ biensTab }}" ></div>

 <script>

        let biens = document.querySelector('#mapid')

        let mymap = L.map('mapid').setView([xx, xx], 13);

        L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?' +
            'access_token=pk.eyJ1IjoiYXNzYWlsODYiLCJhIjoiY2twcnhlcmUzMDR2YjJ4bzE0M25ra2VsYSJ9.C2TKn5mvTlT_sOYvpG10DA', {
            maxZoom: 18,
            attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
                'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
            id: 'mapbox/streets-v11',
            tileSize: 512,
            zoomOffset: -1
        }).addTo(mymap);

        for (let i = 0; i < biens.length; i++) {
            marker = new L.marker([biens[i][2],biens[i][3]])
                .bindPopup(biens[i][0])
                .addTo(mymap);
        }
        //[biens[i][2] et biens[i][3]] representent la lat et lng, et biens[i][0]] l'adresse

Ce que je veux

Je veux afficher dans le map (leaflet) la localisation de tous les biens d'un user.

Ce que j'obtiens
Dans la console du navigateur, si je tape "biens" il m'affiche cette div :

<div class="my-5 leaflet-container leaflet-touch leaflet-retina leaflet-fade-anim leaflet-grab leaflet-touch-drag leaflet-touch-zoom" id="mapid" style="width: 600px; height: 400px; position: relative;" data-biens="[{"nom":"boutique pressing","quartier":"a","lat":9,"lng":9},{"nom":"bou 1","quartier":"d","lat":2,"lng":12},{"nom":"Pharmacie","quartier":"Diguel","lat":92,"lng":22},{"nom":"boutique pressing 2","quartier":"Diguel","lat":xx,"lng":xx}]" tabindex="0">

au lieu de ce resultat :

[{"nom":"boutique pressing","quartier":"a","lat":9,"lng":9},{"nom":"bou 1","quartier":"d","lat":2,"lng":12},{"nom":"Pharmacie","quartier":"Diguel","lat":92,"lng":22},{"nom":"boutique pressing 2","quartier":"Diguel","lat":xx9,"lng":1xx}]

En revenche, le problème vient de la variable "biens", j'arrive pas à récupérer les valeurs du tableau. Je viens de commencer la formation en javascript et je ne connais pas bien ce langage. Merci pour votre aide!