Diferencia entre revisiones de «React map array and object»
De enunpimpam
| Línea 1: | Línea 1: | ||
[[Categoría:React]] | [[Categoría:React]] | ||
| − | == | + | =Archivo JSON= |
<syntaxhighlight lang="json"> | <syntaxhighlight lang="json"> | ||
[ | [ | ||
| Línea 26: | Línea 26: | ||
"title": "Earth Observations taken by the Expedition 35 Crew" | "title": "Earth Observations taken by the Expedition 35 Crew" | ||
} | } | ||
| − | ] | + | ]},] |
| − | }, | ||
| − | ] | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| + | Importamos el archivo se mapea para que cada objeto el array se renderice, importante declarar el atributo key en el objeto contenedor. | ||
<syntaxhighlight lang="js"> | <syntaxhighlight lang="js"> | ||
import data from "./data.json"; | import data from "./data.json"; | ||
Revisión del 20:06 20 ago 2020
Archivo JSON
[
{
"href": "https://images-assets.nasa.gov/image/iss035e017479/collection.json",
"links": [
{
"href": "https://images-assets.nasa.gov/image/iss035e017479/iss035e017479~thumb.jpg",
"rel": "preview",
"render": "image"
}
],
"data": [
{
"media_type": "image",
"center": "JSC",
"keywords": [
"EARTH OBSERVATIONS (FROM SPACE) EXPEDITION 35",
"TWEETED PHOTO",
"SOCIAL MEDIA"],
"nasa_id": "iss035e017479",
"photographer": "Chris Hadfield",
"description": "Earth observation taken by the Expedition 35 crew ",
"date_created": "2013-04-06T00:00:00Z",
"title": "Earth Observations taken by the Expedition 35 Crew"
}
]},]
Importamos el archivo se mapea para que cada objeto el array se renderice, importante declarar el atributo key en el objeto contenedor.
import data from "./data.json";
export default class DefaultPost extends Component {
render() {
return (
<>
<Container fluid={true}>
<Row>
{data.map((postData, index) => (
<div key={index}>
<h4>ESTA ES: {postData.href}</h4>
<p>link:{postData.links[0].href} </p>
<p>NASA ID:{postData.data[0].nasa_id}</p>
<p>TITULO:{postData.data[0].title}</p>
<p>DESCRIPCION:{postData.data[0].description}</p>
<p>TAG:{postData.data[0].keywords + " "}</p>
</div>
))}
</Row>
</Container>
</>
);}}