Dynamische Datenübertragung: Javascript-Objekte via AJAX übergeben

In einem Projekt standen mir eine grosse Anzahl von Eingabefeldern zur Verfügung, die ich mithilfe eines ACF-Formulars per AJAX verarbeiten musste. In diesem Beispiel erkläre ich dir, wie du die Daten eines Repeater-Fields geschickt als JavaScript-Objekt übergibst und sie anschliessend problemlos verarbeitest.

1. Objekt erstellen

Um loszulegen, erstellen wir ein Objekt namens my_ausruestung. In diesem Objekt fügen wir weitere Objekte namens my_ausruestung_obj hinzu. Diese enthalten die ID der acf-row, des acf-field und das value. Zusätzlich fügen wir die ID des repeater-field selbst als Zeichenkette hinzu. Um dies zu vereinfachen, nutzen wir jQuery, da es auch für die AJAX-Anfrage verwendet wird.

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 elegant zusammenzuführen, können wir den Spread-Operator [...], der seit ES6 existiert, nutzen. Damit können wir mehrere Objekte zu einem neuen vereinen. In unserem Fall ist das Objekt my_ausruestung ein Teil des myTourDetails-Objekts, das letztendlich Teil des parameters-Objekts ist. Dieses Objekt wird schließlich per AJAX-Anfrage übergeben.

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 das parameters-Objekt ohne vorheriges stringify(), da wir die übergebenen Daten als Array weiterverarbeiten möchten.

$.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);
  }
});

Um alles abzurunden, benötigen wir noch den passenden Hook für den AJAX-Aufruf in der functions.php mit den Präfixen 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

Mit var_dump($_POST['myDetailsAusruestung']); können wir das übergebene Objekt myDetailsAusruestung als assoziatives Array auslesen.

  ["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 formatieren wir die übergebenen Daten des Arrays in einer Schleife neu. Alternativ kannst du dies auch direkt in JavaScript erledigen und die Daten mit JSON.stringify() und json_encode() weiterverarbeiten.

$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:

Wenn du mehr über das Arbeiten mit JavaScript-Objekten erfahren möchtest, haben wir einen Tipp für dich: Schau dir die Ressourcen für Entwickler von Mozilla an. Dort findest du jede Menge nützliches Material. Also, nichts wie hin und lass dich von Mozilla in die wunderbare Welt der Objekte entführen!