Analysieren Sie JSON-Strings in React

1. Analysieren Sie JSON-Strings in React
2. Analysieren Sie lokale JSON-Daten in React
3. Analysieren Sie externe JSON-Daten in React

JavaScript ist die Sprache des Webs. Daten im Internet werden häufig im JSON-Format ausgetauscht.

Manchmal möchten Sie JavaScript-Rohdaten in JSON konvertieren. In anderen Fällen müssen Sie JSON-Daten parsen, um JavaScript-Daten zu erhalten.

In diesem Artikel wird der Prozess zum Analysieren von JSON-Daten beschrieben, um gültige JavaScript-Daten zu erhalten.

Analysieren Sie JSON-Strings in React

JSON ist das am weitesten verbreitete Format zum Austausch von Daten im Web. Aus diesem Grund verfügt JavaScript über die integrierte Methode JSON.parse(str), um JSON-Strings in gültige JavaScript-Objekte umzuwandeln.

Analysieren Sie lokale JSON-Daten in React

Schauen wir uns das Beispiel an, in dem wir ein normales JavaScript-Objekt nehmen und es als JSON formatieren:

export default function App() {
  const sampleData = JSON.stringify({
    name: "Irakli",
    messages: ["hello", "goodbye", "good day"],
    age: 24
  });
  console.log(sampleData);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

Wir haben die Methode JSON.stringify() verwendet, um Daten im JSON-Format zu speichern. Wenn Sie die Konsole auf CodeSandbox überprüfen, werden Daten als JSON gespeichert.

Dann können wir die Methode JSON.parse(str) verwenden, um diese Daten von JSON wieder in gültige JavaScript-Objekte umzuwandeln.

export default function App() {
  const sampleData = JSON.stringify({
    name: "Irakli",
    messages: ["hello", "goodbye", "good day"],
    age: 24
  });
  console.log(sampleData);
  const parsedData = JSON.parse(sampleData);
  console.log(parsedData);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

Noch einmal console.log() die Daten, damit Sie den Unterschied zwischen den beiden Formaten sehen können.

Verwenden Sie JSON.parse() innerhalb von JSX

Es ist besser lesbar, JSON-Daten außerhalb von JSX zu analysieren. Sie können dies jedoch auch innerhalb der return-Anweisung tun.

Lass uns einen Blick darauf werfen:

<div className="App">
       <h1>{JSON.parse(sampleData).name}</h1>
     </div>

Sie können diesen Code verwenden, um die Eigenschaft name in der Variablen sampleData anzuzeigen.

JSX ist nur eine Vorlagensprache. Es wird in die Top-Level-React-API kompiliert, die vollständig in JavaScript geschrieben ist, sodass Sie JSON.parse(str) und andere JavaScript-Methoden innerhalb von JSX frei verwenden können.

Analysieren Sie externe JSON-Daten in React

Meistens erhalten Sie JSON-Daten von einer externen Quelle. Für diese Gelegenheiten können Sie die Fetch-API und die zugehörige Syntax verwenden, um JSON-Daten in reguläre JavaScript-Daten umzuwandeln.

export default function App() {
  fetch("https://api.chucknorris.io/jokes/random?category=dev")
    .then((res) => res.json()) // the .json() for parsing
    .then((data) => console.log(data));
  return (
    <div className="App">
      <h1></h1>
    </div>
  );
}