Analizar cadenas JSON en React

1. Analizar cadenas JSON en React
2. Analizar datos JSON locales en React
3. Analizar datos JSON externos en React

JavaScript es el lenguaje de la web. Los datos en Internet a menudo se intercambian en formato JSON.

A veces, desea convertir datos de JavaScript sin procesar en JSON. Otras veces, necesita analizar datos JSON para obtener datos JavaScript.

Este artículo describirá el proceso de análisis de datos JSON para obtener datos JavaScript válidos.

Analizar cadenas JSON en React

JSON es el formato más común para intercambiar datos en la web. Por esta razón, JavaScript tiene incorporado el método JSON.parse(str) para transformar cadenas JSON en objetos JavaScript válidos.

Analizar datos JSON locales en React

Echemos un vistazo al ejemplo en el que tomamos un objeto JavaScript normal y lo formateamos como JSON:

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

Usamos el método JSON.stringify() para almacenar datos en formato JSON. Si va y verifica la consola en CodeSandbox, los datos se guardan como JSON.

Luego, podemos usar el método JSON.parse(str) para convertir estos datos de JSON nuevamente en objetos JavaScript válidos.

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

Una vez más, hacemos console.log() los datos para que puedas ver la diferencia entre los dos formatos.

Usar JSON.parse() dentro de JSX

Es más legible analizar datos JSON fuera de JSX. No obstante, también puedes hacerlo dentro de la declaración de retorno.

Vamos a ver:

<div className="Aplicación">
       <h1>{JSON.parse(datos de muestra).nombre}</h1>
     </div>

Puede usar este código para mostrar la propiedad name en la variable sampleData.

JSX es solo un lenguaje de plantillas. Se compila en la API React de nivel superior, que está completamente escrita en JavaScript, por lo que puede usar libremente JSON.parse(str) y otros métodos de JavaScript dentro de JSX.

Analizar datos JSON externos en React

La mayoría de las veces, recibirá datos JSON de una fuente externa. Para estas ocasiones, puede usar la API Fetch y la sintaxis asociada para convertir los datos JSON en datos JavaScript regulares.

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