Grab JSON Data from External Source and Loop in Etch

etch-external-loop

⏺ /**
   * External Data Provider for Etch Loops
   *
   * Injects external API data into Etch's dynamic data system, making it
   * available for use in loops and templates.
   *
   * HOW IT WORKS:
   * 1. Hooks into 'etch/dynamic_data/option' filter
   * 2. Fetches data from external API (cached with transients)
   * 3. Injects data as options.{key} for use in Etch templates
   *
   * USAGE IN ETCH:
   * - Loop block: target="options.external_users" itemId="user"
   * - Access fields: {user.name}, {user.email}, {user.company}, etc.
   *
   * CUSTOMIZATION:
   * - Change API URL to your own endpoint (Laravel, external DB, etc.)
   * - Adjust transient cache duration as needed
   * - Transform response data to match your template needs
   * - Add authentication headers if required
   *
   * EXAMPLE ETCH MARKUP:
   * <!-- wp:etch/loop {"target":"options.external_users","itemId":"user"} -->
   *   <!-- wp:etch/element {"tag":"p"} -->
   *     <!-- wp:etch/text {"content":"{user.name} - {user.email}"} /-->
   *   <!-- /wp:etch/element -->
   * <!-- /wp:etch/loop -->
   *
   * @see https://docs.etchwp.com/dynamic-data/dynamic-data-integration/option-dynamic-d
  ata-integration
   */
   
add_filter('etch/dynamic_data/option', function($data) {
      $cached = get_transient('my_laravel_data');

      if ($cached === false) {
          $response = wp_remote_get('https://your-laravel-app.com/api/users', [
              'timeout' => 10,
              'headers' => [
                  'Authorization' => 'Bearer ' . YOUR_API_KEY,
              ],
          ]);

          if (!is_wp_error($response) && wp_remote_retrieve_response_code($response) ===
   200) {
              $cached = json_decode(wp_remote_retrieve_body($response), true);
              set_transient('my_laravel_data', $cached, 5 * MINUTE_IN_SECONDS);
          } else {
              $cached = [];
          }
      }

      $data['my_laravel_data'] = $cached;
      return $data;
  });