Parsing a php forloop to numbered constant objets

Hello everyone; I am trying to parse php variables from my blueprint into js and am really having trouble, and was hoping someone could point me in the right direction or quickly give me a run down on how they would do it; I’d greatly appreciate it!

In short I am trying to show map markers on a mapbox iframe based on data in a structured field. Yes there are some plugins that do similar things, but I am wanting to do it myself for a few reasons.

I have a structure field as follows:

           pointOfInterests:
            label: Local Area
            type: structure
            fields:
              name:
                label: Name
                type: text
              distance:
                label: Distance (miles)
                type: number
              coordinates:
                label: Coordinates
                type: text

And each item in the field is a ‘point of interest’ that I’m listing below:

<?php $pois = $page->pointOfInterests()->toStructure();
      foreach ($pois as $poi): ?>

        <li>
        <div class="name"><?= $poi->name() ?></div>
        <div class="distance"><?= $poi->distance() ?></div>
        </li>

<?php endforeach ?>

But each of these also need to show as a marker on the map. I can hard code this as follows:

  <script>
      mapboxgl.accessToken =
        'pk.eyJ1Ijo3423sVybWFmaWEiLCJhIjoiY2xpd3hqc343jNqcDlpN3N4M2R6NyJ9.4AxwvrOlZlT9WFejdZqPsQ';
      const map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v12',
        center: [1.311971, 51.120136],
        zoom: 10
      });

      // Create a default Marker and add it to the map.
      const marker1 = new mapboxgl.Marker()
        .setLngLat([1.3818405495821078, 51.15176168300233])
        .addTo(map);

      const marker2 = new mapboxgl.Marker()
        .setLngLat([1.4029068726455256, 51.18208586858427])
        .addTo(map);

      const marker3 = new mapboxgl.Marker()
        .setLngLat([1.2885619311005254, 51.15589304162437])
        .addTo(map);
    </script>

But I need a way to create a numbered marker constant for each item and I can only find examples of how to do this with a single variable, rather than from a forloop,
In particular I am referring to these constants:

   const marker1 = new mapboxgl.Marker()
        .setLngLat([1.3818405495821078, 51.15176168300233])
        .addTo(map);

Would greatly appreciate the help - thanks!

Create an array from the structure data and echo that as json in your script.

Then iterate over the json data in your script.