JSON in React anzeigen

1. die Methode JSON.stringify()
2. das <pre>-Tag in HTML
3. JSON in React anzeigen

Beim Erstellen von Webanwendungen in React ist es eine häufige Notwendigkeit, externe Daten zu empfangen und anzuzeigen. JSON (JavaScript Object Notation) ist ein Format, das häufig verwendet wird, um als Objekte gespeicherte Daten gemeinsam zu nutzen.

Der Schwerpunkt dieses Artikels liegt darauf, zu zeigen, wie JSON-formatierte Daten in React angezeigt werden.

Wenn Sie sauber formatierte JSON-Daten drucken müssen, müssen Sie zwei Konzepte verstehen: die Methode JSON.stringify() und das Element <pre> in HTML.

die Methode JSON.stringify()

Diese Methode nimmt gültige JavaScript-Objekte und konvertiert sie in Zeichenfolgen im JSON-Format. Es kann bis zu drei Argumente annehmen.

Für diesen Artikel müssen wir jedoch nur das erste Argument verstehen, das gültige JavaScript-Objekte akzeptiert und sie in JSON-Strings konvertiert.

JSON.stringify(value)

Die Methode gibt das als String formatierte Argument value (JavaScript-Objekt) zurück. Der zurückgegebene Wert ist als lesbarer JSON-String formatiert; Es kann jedoch schwierig sein, es anzuzeigen, um die Lesbarkeit zu erhalten.

das <pre>-Tag in HTML

Frontend-Entwickler verwenden das <pre>-Tag, um die Formatierung des Textes beizubehalten. Buchstaben im Text sind gleich breit.

Es behält auch Leerzeichen und Zeilenumbrüche im Originaltext bei, der mit diesem Tag umschlossen ist.

Wenn Sie JSON.stringify() verwenden, um Daten in einen JSON-String zu konvertieren, müssen Sie den zurückgegebenen Wert mit <pre>-Tags umschließen.

JSON in React anzeigen

So nehmen Sie ein JavaScript-Objekt und konvertieren es in einen JSON-String und behalten dabei die ordentliche Formatierung bei:

export default function App() {
  const data = { name: "Irakli", age: 24, height: 185 };
  return (
    <div className="App">
      <p>{JSON.stringify(data)}</p>
      <pre>{JSON.stringify(data)}</pre>
    </div>
  );
}

Öffnen Sie die CodeSandbox-Live-Demonstration, um den wirksamen Code zu sehen.

Die Live-Demo enthält den JSON-String mit und ohne <pre>-Tag. Es kann Ihnen helfen, den Unterschied zwischen formatiertem und nicht formatiertem Text visuell zu verstehen.