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.