Trying to render array of coordinates from ACF Field in group

wispyco · April 24, 2024, 8:37pm

I am trying to render coordinates into an array so I can map them to a google map. I am using ACF

I have an ecoprovince field group with two fields. The one I want to target in my blade.php file is the Eco Province Locations. And in the Eco Province Locations field group specifically the field polygon_area_coordinates_for_ecozone. You Should be able to see them in my provided screenshots.The coordinates are dumped into a custom post type called ecoprovince.

I have written the following code

{{-- Template Name: Eco Province --}}

@extends('layouts.app')

@section('content')

  @php
    // Set up the arguments for WP_Query
    $args = [
        'post_type' => 'ecoprovince', // Replace with your custom post type
        'posts_per_page' => -1, // Fetch all posts
        'fields' => 'ids', // Only get post IDs to improve performance
    ];

    // Perform the query
    $eco_zone_posts = new WP_Query($args);

    // Initialize an array to store our eco zones data
    $eco_zones_data = [];

    // Loop through the posts
    foreach ($eco_zone_posts->posts as $post_id) {
      // Retrieve the entire group field 'ecoprovince_locations' first
        $ecoprovince_locations = the_field('ecoprovince_locations', $post_id);

        // Now you can access the subfield 'polygon_area_coordinates_for_ecozone'
        // Ensure you access the subfield as a key of the group field array
        $coordinates = get_sub_field('polygon_area_coordinates_for_ecozone') ?? '';

        // Check if coordinates are not empty and add them to the array
        if (!empty($coordinates)) {
            $eco_zones_data[] = [
                'coordinates' => $coordinates,
            ];
        }
    }
    wp_reset_postdata(); // Important to reset post data after a custom query
  @endphp

  {{-- Debug output --}}
  <div class="debug-output">
    @dump($eco_zones_data)
    @dump($eco_zone_posts)
  </div>

  {{-- Add a container for the Google Map --}}
  <div id="eco-province-map" style="height: 500px;"></div>

  {{-- Passing ACF data to JavaScript --}}
  <script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {
      window.ecoZonesData = @json($eco_zones_data);
      // The rest of your JavaScript initialization can go here
      // Or it can be included from an external file as before
    });
  </script>

 
@endsection

But I think I am lacking something in my ACF Call. The ID’s that are are returned for the posts are correct but there is no associative ACF fields for the posts that I can grab and put into the $eco_zones_data array.

Thanks ahead of time

wispyco · April 24, 2024, 10:05pm

I had to look at the structure of the JSON output to see it was a two field groups and then a field, so this worked


{{-- Template Name: Eco Province --}}

@extends('layouts.app')

@section('content')

  @php
    // Set up the arguments for WP_Query
    $args = [
        'post_type' => 'ecoprovince', // Replace with your custom post type
        'posts_per_page' => -1, // Fetch all posts
        'fields' => 'ids', // Only get post IDs to improve performance
    ];

    // Perform the query
    $eco_zone_posts = new WP_Query($args);

    // Initialize an array to store our eco zones data
    $eco_zones_data = [];

    // Loop through the posts
    foreach ($eco_zone_posts->posts as $post_id) {
      // Retrieve the entire group field 'ecoprovince_locations' first
        //$ecoprovince_locations = the_field('ecoprovince_locations', $post_id);

        // Now you can access the subfield 'polygon_area_coordinates_for_ecozone'
        // Ensure you access the subfield as a key of the group field array
        //$coordinates = @field('polygon_area_coordinates_for_ecozone') ?? '';


        $ecoprovince_information = get_field('ecoprovince_information', $post_id);

        // If the top-level group field is not empty, dig into the sub-group
        if (!empty($ecoprovince_information)) {
            $ecoprovince_locations = $ecoprovince_information['ecoprovince_locations'];

            // If the sub-group is not empty, access your coordinates
            if (!empty($ecoprovince_locations)) {
                $coordinates = $ecoprovince_locations['polygon_area_coordinates_for_ecozone'];

                // Check if the coordinates field is not empty
                if (!empty($coordinates)) {
                    $eco_zones_data[] = [
                        'coordinates' => $coordinates,
                    ];
                }
            }
        }

        // Check if coordinates are not empty and add them to the array
        if (!empty($coordinates)) {
            $eco_zones_data[] = [
                'coordinates' => $coordinates,
            ];
        }
    }
    wp_reset_postdata(); // Important to reset post data after a custom query
  @endphp

  {{-- Debug output --}}
  <div class="debug-output">
    @dump($eco_zones_data)
    @dump($eco_zone_posts)
    @dump($coordinates)
  </div>

  {{-- Add a container for the Google Map --}}
  <div id="eco-province-map" style="height: 500px;"></div>

  {{-- Passing ACF data to JavaScript --}}
  <script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {
      window.ecoZonesData = @json($eco_zones_data);
      // The rest of your JavaScript initialization can go here
      // Or it can be included from an external file as before
    });
  </script>

 
@endsection