Wenn eine Variable ein Array ist, führt der PHPStorm HTTP Client eine Anfrage mehrfach aus. Hier im Beispiel habe ich einen API Insert aus einer JSON Datei die im Body gesendet wird 40.000 mal ausgeführt.

## API Insert From JSON Body
< {%

    const longrandomUid = $random.uuid
    const longrandomPatientUid = $random.uuid
    const stationName = 'Station1'

    request.variables.set("randomUid", longrandomUid)
    request.variables.set("randomPatientUid", longrandomPatientUid)
    request.variables.set("stationName", stationName)

    let run_id = [];
    for (let i = 1; i <= 40000; i++) { r.push(i); }

    request.variables.set("run_id", run_id)

%}

POST http:// .HOST. /analysis/insert
X-Run: {{run_id}}
Content-Type: application/json

< ./body_request_random.json

Beim Arbeiten mit JavaScript stoßen wir oft auf die Herausforderung, mehrere Objekte zusammenzuführen. Ein simples Object.assign() reicht dabei nicht immer, da es nur flach kopiert. Verschachtelte Objekte werden dabei überschrieben, anstatt rekursiv zusammengeführt. Genau hier kommen die beiden kleinen Helferlein isObject und deepMerge ins Spiel.

/**
 * Prüft auf Objekt
 */
export function isObject(item) {
  return (item && typeof item === 'object' && !Array.isArray(item));
}

Diese Funktion prüft, ob ein Wert ein echtes Objekt ist. Arrays oder null werden ausgeschlossen – ein wichtiger Schritt, um später korrekt zu mergen.

/**
 * Zwei Objekte rekursiv zusammenfügen
 */
export function deepMerge(target, ...sources) {

  if (!sources.length) return target;
  const source = sources.shift();

  if (isObject(target) && isObject(source)) {
    for (const key in source) {
      if (isObject(source[key])) {
        if (!target[key]) Object.assign(target, { [key]: {} });
        deepMerge(target[key], source[key]);
      } else {
        Object.assign(target, { [key]: source[key] });
      }
    }
  }

  return deepMerge(target, ...sources);
}

Wie funktioniert das?

Falls es ein primitiver Wert ist (String, Zahl, etc.), wird er einfach überschrieben.

• Parameter: target ist das Objekt, das erweitert wird. Danach folgen beliebig viele sources.
• Abbruchbedingung: Wenn keine sources mehr da sind, wird das fertige Objekt zurückgegeben.
• Rekursives Mergen: Falls ein Schlüssel im source selbst ein Objekt ist, wird in die Tiefe gegangen.

Anwendungen sind z.B. das merge bei VueUse

https://vueuse.org/core/useStorage

Wenn du in Vue 3 mathematische Formeln mit LaTeX darstellen möchtest, ist MathJax die ideale Lösung. Mit diesem Ansatz kannst du sowohl statische als auch dynamische Inhalte rendern.

1. MathJax einbinden

Zuerst musst du MathJax in dein Projekt einbinden, zum Beispiel über ein CDN in der HTML-Datei:

<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

2. Vue 3 App mit MathJax

Die folgende Vue 3 Komponente zeigt, wie du MathJax in einer Vue-App verwenden kannst. Dabei wird jede Formel gerendert, sobald die Komponente gemountet oder aktualisiert wird:

<div id="app">
  <p>Hier ist eine Formel: \(E = mc^2\)</p>
</div>

<script type="module">

  import { createApp, ref, onMounted, onUpdated } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";

  const app = createApp({
    setup() {

      const renderMath = () => {

        if (window.MathJax) {

          window.MathJax.typesetPromise();

        }

      };

      onMounted(renderMath);
      onUpdated(renderMath);

      return { wsg_1080 }

    }
  });

  app.mount('#app');

</script>

3. Erklärung

• onMounted(renderMath) sorgt dafür, dass MathJax die Formeln beim ersten Rendern verarbeitet.
• onUpdated(renderMath) stellt sicher, dass auch dynamisch geänderte Inhalte korrekt gerendert werden.
• window.MathJax.typesetPromise() rendert alle LaTeX-Formeln auf der Seite.

Mit dieser Methode kannst du LaTeX-Formeln überall in deiner Vue-App verwenden, egal ob statisch oder dynamisch.

Mit folgender PHP Klasse/Funktion kann ein CSV String in einen Array geparsed werden. In Zeile 1 wird der Kopf erwartet, der dann als Schlüssel für die Daten fungiert.

abstract class csvHelper {

  public static function csvToArray(string $csvString): array {
      
    $lines = explode("\n", $csvString);
    
    $arKeys = array_map('trim', str_getcsv(array_shift($lines)));
    $arResult = [];

    foreach ($lines as $line) {
      
      if (trim($line) !== "") {
        
        $arValues = array_map('trim', str_getcsv($line));
        $arResult[] = array_combine($arKeys, $arValues);
      
      }
    
    }

    return $arResult;
  
  }

}

Oder besser mit der Bibliothek league/csv

abstract class csvHelper {

  public static function csvToArray(string $csvString): array {

    $reader = League\Csv\Reader::createFromString($csvString);
    $reader->setHeaderOffset(0);

    return [
	  iterator_to_array($reader->getRecords())
    ];

  }

}

/**
 * Gibt die größten n Elemente eines Arrays zurück
 * 
 * @param ar
 * @param n
 */
export function getTopXfromArray(ar, x) {

	return ar.sort((a, b) => b - a).slice(0, x);

}

Mit folgender Funktion kann man mit Javascript einen Array der aus mehreren Objekten besteht auf- oder absteigend nach einem Schlüssel sortieren:

export function order_array(arr, key, direction = 'asc') {
	
	const ar = [...arr];

	ar.sort((a, b) => {
		
		const wertA = a[key];
		const wertB = b[key];
	
		if (wertA < wertB) return direction === 'asc' ? -1 : 1;
		if (wertA > wertB) return direction === 'asc' ? 1 : -1;
		
		return 0;
		
	});
	
	return ar;
	
}

Setzt man das Attribute „autocomplete“ auf einem Input Feld auf den Wert „one-time-code“ kommt es nicht mehr zum automatischen füllen durch Chrome.

<input type="text" name="email" id="email" autocomplete="one-time-code" />

Um ein Bild, das als base64 String vorliegt mit FPDF zu zeichnen kann folgende Funktion verwendet werden.

function addBase64Image($base64Image, $x, $y, $w = 0, $h = 0) {
			
	list($type, $data) = explode(';', $base64Image);
	list(, $data) = explode(',', $data);
	$data = base64_decode($data);

	$tempFile = tempnam(sys_get_temp_dir(), 'fpdf') . '.png';
	file_put_contents($tempFile, $data);

	$this->Image($tempFile, $x, $y, $w, $h);

	unlink($tempFile);
	
}

Möchte man mit Vue/Javascript Dateien eines Uplaod Feldes einlesen und an den Server senden, so kann man folgenden Code nutzen.

const fileToBase64 = (file) => {

  return new Promise((resolve, reject) => {

    const reader = new FileReader();

    reader.onload = () => resolve(reader.result.split(",")[1]); // Nur Base64-Daten
    reader.onerror = () => reject(new Error(`Fehler beim Lesen von ${file.name}`));

    reader.readAsDataURL(file);

  });

}

const handle_upload = async () => {

  const arFiles = Array.from(ref_file.value.files);

  const base64Files = await Promise.all(

    arFiles.map(async (file) => {

      const base64 = await fileToBase64(file);

      return { name: file.name, type: file.type, base64: base64, };

    })

  );

  console.log(base64Files);

  // ... base64Files an den Server senden mit fetch/xhr  

}

Ich wollte in einer Spalte einen Wert ändern. In meinem Fall hatte ich einen Code der mit | getrennt war um ein Feld erweitert. Um Alte Einträge anzupassen habe ich folgenden Trick verwendet

UPDATE node_value
SET value = CONCAT(value, '|')
WHERE (LENGTH(value) - LENGTH(REPLACE(value, '|', ''))) = 10 AND key = 'calc_key'