Faire une boucle sur un objet dans le rendu React

Question

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

javascript reactjs

1

user13286 8 nov. 2019 à 05:20

Answer 1

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]} />

2

Gangadhar Gandi 8 nov. 2019 à 02:31

Answer 2

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.

1

Edrian 8 nov. 2019 à 02:25

Faire une boucle sur un objet dans le rendu React

2 réponses

Questions connexes

De nouvelles questions

javascript