js-Objekte via AJAX übergeben

Für ein Projekt sollten per ACF-Formular mehr als ein paar Dutzend Eingabefelder per AJAX verarbeitet werden. Anhand dieses Beispiels zeige ich, wie man die Daten eines repeater-fields per js-Objekt übergibt und verarbeitet.

1. Objekt erstellen

Zuerst erstellen wir ein Objekt my_ausruestung, in welchem wir weitere Objekte my_ausruestung_obj hinzufügen, welche die ID der acf-row, des acf-field und des value enthalten. Die ID des repeater-field selbst fügen wir als Zeichenkette hinzu. Dafür setzen wird einfachheitshalber jQuery ein, da ebenfalls für die AJAX-Anfrage verwendet.

my_ausruestung = {}; 
my_ausruestung_obj = {}; 
var my_ausruestung_data_key = jQuery('.tour_details .acf-field-repeater.acf-field-611368c954a75').attr("data-key");
jQuery('.tour_details .acf-field-repeater.acf-field-611368c954a75 .acf-row:not(.acf-clone)').each(function( index ) {
  var my_ausruestung_row = jQuery(this).attr('data-id');
  var my_ausruestung_id = jQuery(this).find('.acf-field').attr("data-key");
  var my_ausruestung_val = jQuery(this).find('input[type="text"]').val();
  my_ausruestung_obj[my_ausruestung_row] = { my_ausruestung_id, my_ausruestung_val }; 
});
my_ausruestung.ausruestung = my_ausruestung_obj;
my_ausruestung.data_key = my_ausruestung_data_key;

Das Objekt my_ausruestung geben wir zur Überprüfung mit console.log(my_ausruestung); in der Konsole aus:

1.1 Objekte verschachteln, zusammenführen

Um Objekte zusammen zu führen, gibt es seit ES6 den sogenannten Spread-Operator [...]. Damit können mehrere Objekte in einem neuen zusammengeführt werden. In unserem Fall ist das Objekt my_ausruestung ein Teil des Objekts myTourDetails, welches letztlich ein Teil des Objekts parameters ist, welches dann letztlich per AJAX-Anfrage übergeben wird.

let myTourDetails = {
  myDetailsKarte25: my_karte_25000,
  myDetailsKarte50: my_karte_50000,
  myDetailsKarten: my_weitere_karten,
  myDetailsProgramm: my_programm,
  myDetailsAusruestung: my_ausruestung
}

let parameters = {
  ...myTourtitle,
  ...myTourTage,
  ...myTourGallery,
  ...myTourDaten,
  ...myTourDetails,
  ...myTourKontakt
};

2. AJAX Request

Bei der AJAX-Anfrage übergeben wir dann das Objekt parameters ohne ein vorgängiges stringify(), da wir die übergebenen Daten als Array weiterverarbeiten.

$.ajax({
  url: aw.ajaxurl,
  cache: false,
  data: parameters,
  success: function( result ) {
    console.log(result);

    jQuery('#ajax_feedback').html(success_message);
  },
  error:function(jqXHR, textStatus, errorThrown) {
    console.log("error: " + textStatus);
    console.log("incoming Text: " + jqXHR.responseText);
    jQuery('#ajax_feedback').html(failure_message + textStatus);
  }
});

Vollständigkeitshalber noch der entsprechende Hook für den AJAX-Aufruf in der functions.php mit «wp_ajax_» und «wp_ajax_nopriv_».

add_action( 'wp_ajax_create_new_tour', 'ud_create_new_tour' );
add_action( 'wp_ajax_nopriv_create_new_tour', 'ud_create_new_tour' );

function ud_create_new_tour() {

  // hier z.B. die $_POST-Variablen auslesen & verarbeiten

  $args = array(
    'post_title'    => $_POST['myTourMyTitle'],
    'post_content'  => $my_post_content,
    'post_status'   => 'draft', 
    'post_type'     => 'touren', 
  );
 
  $post_id = wp_insert_post($args); 
  wp_die();
}

3. $_POST Variablen auslesen

var_dump($_POST['myDetailsAusruestung']); gibt das übergebene Objekt myDetailsAusruestung als assoziatives Array zurück:

  ["myDetailsAusruestung"]=>
  array(2) {
    ["ausruestung"]=>
    array(3) {
      ["628365ec63f86"]=>
      array(2) {
        ["my_ausruestung_id"]=>
        string(19) "field_61137d4dc8d22"
        ["my_ausruestung_val"]=>
        string(4) "Seil"
      }
      ["628365f363f87"]=>
      array(2) {
        ["my_ausruestung_id"]=>
        string(19) "field_61137d4dc8d22"
        ["my_ausruestung_val"]=>
        string(12) "Wanderschuhe"
      }
      ["628365fc63f88"]=>
      array(2) {
        ["my_ausruestung_id"]=>
        string(19) "field_61137d4dc8d22"
        ["my_ausruestung_val"]=>
        string(10) "Steigeisen"
      }
    }
    ["data_key"]=>
    string(19) "field_611368c954a75"
  }

4. Daten verarbeiten und ausgeben

In unserem Beispiel werden die übergebenen Daten des Arrays in einer Schleife neu formatiert. Es ist auch möglich dies gleich mit js zu machen und die Daten dann mit JSON.stringify() und json_encode() zu verarbeiten.

$myDetailsAusruestung = $_POST['myDetailsAusruestung'];
$my_tour_details .= ',"' . $myDetailsAusruestung ["data_key"] . '":{';
$columnAusruestung = $myDetailsAusruestung["ausruestung"];
foreach ( $columnAusruestung as $key => $value ) {
  if ( $key === array_key_last($columnAusruestung) ) {

    $my_tour_details .= '"' . $key . '":{"' . $value["my_ausruestung_id"] . '":"' . $value["my_ausruestung_val"] . '"}';
  } else {

  $my_tour_details .= '"' . $key . '":{"' . $value["my_ausruestung_id"] . '":"' . $value["my_ausruestung_val"] . '"},';
  } // endif
} // end foreach
$my_tour_details .= '}';

Die Schleife gibt folgende Zeichenkette (grau hinterlegt) als Teil des WP-Blocks aus:

Grundlegendes und Weiterführendes zum Arbeiten mit js-Objekten findet sich in den Ressourcen für Entwickler von Mozilla.