Saltar al contenido

Cómo mostrar los pares de claves y valores de JSON en ReactJS

Puede haber muchas fuentes de archivos JSON, ya sea a través de una llamada a la API o importando un archivo JSON creado localmente (con extensión .json). En la mayoría de las aplicaciones de front-end, interactuamos con un servidor para obtener los datos y llenar el esqueleto o plantilla de la interfaz de usuario. Por ahora, asumo que JSON está disponible en componente. Uno por uno, discutiremos todos los valores y cómo renderizarlos o mostrarlos en la UI.

Renderización de valores de cuerdas/números

Una cadena es una secuencia de cero o más caracteres Unicode envueltos en comillas dobles. Los valores de las cadenas o los números pueden ser mostrados directamente en JSX usando {}. Por ejemplo:

Cómo mostrar los pares de claves y valores de JSON en ReactJS
Cómo mostrar los pares de claves y valores de JSON en ReactJS
1234567891011121314151617importReactfrom$0027react$0027;const sampleJSON ={"string":"", "number":1};functionApp(){return(<div><p>String:{sampleJSON. string}</p...p...;Número:{sampleJSON.number}</p...|div...}ReactDOM.render(<App/>,document.getElementById($0027app$0027));

javascript

Renderizando Nulo/Verdadero/Falso

Los valores booleanos (verdadero y falso), nulos e indefinidos son hijos válidos, pero estos valores no se renderizarán en la interfaz de usuario si los pones directamente dentro de {} en JSX:

123456<div / <div,/div,/div,

Si quieres que un valor como falso, verdadero, nulo o indefinido se muestre en la salida, tienes que convertirlo primero en una cadena.

Por ejemplo:

1234<div... {Cuerda(verdadero)}</div...
javascript

En la salida, esto hará que sea verdadero, falso, indefinido y nulo respectivamente.

Nota: Hay muchas maneras posibles de convertir estos valores en una cadena. Usa cualquiera.

Renderización de objetos

Aquí viene la parte más difícil de la representación del par nombre-valor de JSON. Reaccionar no nos permite directamente renderizar ningún objeto en JSX. Si hacemos eso por error, resultará en el siguiente error:

Ahora la cuestión es cómo renderizar un objeto sin romper el código.

Como ya hemos discutido, sólo podemos dar valores de hojas. En el caso de un objeto, tenemos que especificar el nombre exacto de la propiedad utilizando la notación de puntos o la notación de corchetes, que tiene el valor renderizable.

Por ejemplo, para renderizar todas las propiedades del objeto en la interfaz de usuario, necesitamos ejecutar un bucle:

1234567891011121314151617181920212223242526272829importReactfrom$0027react$0027;importReactDOMfrom$0027react-dom$0027;const sampleJSON ={"object":{"name":"", "number":1, "address": "India", "website": "https://www..com/"}}functionApp(){return(<div>{Object. keys(sampleJSON.object).map((key, i)=>(<p key={i};<span ];KeyName:{key}</span><span ];Value:{sampleJSON. object[key]}</span>||||</div;} }ReactDOM.render(<App/&;,document.getElementById($0027app$0027));

javascript

Nota: Si queremos mostrar sólo una propiedad renderizable en la UI, entonces no necesitamos ejecutar un bucle. Podemos simplemente escribirlo usando la notación de puntos. Por ejemplo, para mostrar el valor del nombre del objeto:

1<p>Nombre: {sampleJSON.object.name}</p>

Renderización de valores de la matriz

Y ahora, la última parte de la guía, pero por supuesto no la menos importante. Renderizar los valores de los arreglos en la interfaz de usuario con el estilo adecuado es una de las cosas comunes que hacemos en aplicaciones como Todo App, Travel App, etc.

Primero discutamos un caso en el que queremos renderizar un conjunto de valores de hoja sin ningún estilo extra o etiqueta HTML para cada artículo. Esto será similar a unir los valores usando una coma o un espacio, y luego renderizar esa cadena. La matriz (con todos los valores renderizables) se puede renderizar directamente así:

123456789101112131415161718importReactfrom$0027react$0027;importReactDOMfrom$0027react-dom$0027;const muestraJSON ={"arrOfNumbers":[1,2,3,4], "arrOfStrings":["a", "b", "c", "d"]}functionApp(){retorno(<div>{muestraJSON. arrOfNumbers}{sampleJSON.arrOfStrings}</div>)}ReactDOM.render(<App/>,document.getElementById($0027app$0027));

javascript

A continuación, o bien queremos un estilo separado para cada artículo o el artículo no es un valor directamente representable. En todos esos casos, necesitamos ejecutar un bucle. Por suerte, esto es fácil de hacer en JSX usando Array.map. Cuando usamos map, se ejecutará a través de todos los elementos de esa matriz y podemos devolver una nueva matriz de JSX.

Considere este ejemplo:

123456789101112131415161718192021222324252627282930313233343536373839importReactfrom$0027react$0027;importReactDOMfrom$0027react-dom$0027;const muestraJSON ={"arrOfNumbers":[1,2,3,4], "arrOfStrings": ["a", "b", "c", "d"], "arrOfObjects":[{"a":1, "b":1},{"a":2, "b":2},{"a":3, "b":3}]}funciónApp(){retorno(|div.)};h2;ArraydeNúmeros:};/h2,};ül};{muestraJSON. arrOfNumbers. map((item, i)={{Nretorno<li key={i};{item}</li>})}</ul...h2{N-arreglo de cuerdas:}{N- h2{N-ul...} {muestraJSON. ArrOfStrings.map((item, i)={{Nretorno<li key={i};{item}</li>})}</ul>h2{N-arreglodeObjetos:}{N-jSON}. arrOfObjects.map((item, i)={N-{retorno<li key={i};{item.a}-{item.b}</li>})}</ul=;|div;)}ReactDOM.render(<App/{N-documento.getElementById($0027app$0027));

javascript