J'ai du JSON que je boucle dans mon application React. Dans le JSON que je boucle, j'ai un objet qui contient plusieurs images. Je voudrais parcourir ces images et les rendre également. Voici ce que j'ai essayé:
const locations = [
{
"name": "First Location",
"photos": [
{
"url": "http://placehold.it/250x250",
}, {
"url": "http://placehold.it/250x250",
}
]
}, {
"name": "Second Location",
"photos": [
{
"url": "http://placehold.it/250x250",
}, {
"url": "http://placehold.it/250x250",
}
]
}
]
const element = (
<div className="community-list">
{locations && locations.map((location, index) => (
<div key={index} className="location">
<h2>{location.name}</h2>
{Object.keys(location.photos).map(function(key) {
return <img src="{location.photos[url]}" />;
})}
</div>
))}
</div>
);
ReactDOM.render(element, document.getElementById('mountNode'));
Cependant cela me donne 2 images cassées
2 réponses
Le problème réel, il y a des guillemets supplémentaires pour la balise img. Supprimez les guillemets doubles entourant les accolades. Vos images seront affichées
<img src={location.photos[url]} />
Ce que vous voulez faire, c'est ceci:
const locations = [
{
"name": "First Location",
"photos": [
{
"url": "http://placehold.it/250x250",
}, {
"url": "http://placehold.it/250x250",
}
]
}, {
"name": "Second Location",
"photos": [
{
"url": "http://placehold.it/250x250",
}, {
"url": "http://placehold.it/250x250",
}
]
}
]
const element = (
<div className="community-list">
{locations && locations.map((location, index) => (
<div key={index} className="location">
<h2>{location.name}</h2>
{location.photos.map(function(photo) {
return <img src="{photo.url}" />;
})}
</div>
))}
</div>
);
ReactDOM.render(element, document.getElementById('mountNode'));
Cela permettrait de parcourir le tableau photos
d'un location
, puis d'utiliser le nœud url
de l'objet photo
.
Questions connexes
De nouvelles questions
javascript
Pour des questions concernant la programmation dans ECMAScript (JavaScript / JS) et ses divers dialectes / implémentations (hors ActionScript). Veuillez inclure toutes les balises pertinentes dans votre question; par exemple, [node.js], [jquery], [json], etc.