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;
	
}