Discussion

Récupérer des données depuis une API

Résolu

Bonjour à tous, j'ai besoin d'aide pour afficher des données depuis une api.


J'ai un problème pour afficher les données sur mon front-end comme vous pouvez le voir j'utilise une api qui me permet de récupérer des données("nom", "adresse", "prix") sur 100 cryptos. Toutes ces données apparaissent dans la console.log( res.data) et la console.log(res.data[1].price) ne me permet d'afficher qu'une seule donnée de la deuxième crypto de la liste qui est son prix. Je voudrais pouvoir faire exactement la même chose en front-end dans le sens où je veux utiliser cette api pour récupérer les données des 100 cryptos mais je veux pouvoir afficher les données une par une en front-end ce que je ne peux pas faire. En retour vous pouvez voir le code qui me permet d'afficher le prix des 100 cryptos en une fois mais ce n'est pas ce que je veux faire je voudrais pouvoir afficher par exemple seulement le prix de la troisième crypto de la liste sur le front-end


Merci d'avance pour votre réponse


Le script :

function App(){
const [data, setData] = useState([]);
const fetchData = () => {
  axios
  .get('http://localhost:4500/sushiswap')
  .then((res) => {
    console.log(res.data)
    console.log(res.data[1].price)
    setData(res.data)
  })
  .catch((err) => {
    console.log(err)
  })
}
useEffect(() => {
  fetchData()
}, [])

return(
  <Fragment>
    <ul>
      {data.map(item =>(
        <li key={item.name}>
          <p>{item.price.slice(0, 8)}</p>
        </li>
      ))}
    </ul>
  </Fragment>
)

Sortie du premier console.log : (100) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: adress: "0x397ff1542f962076d0bfe58ea045ffa2d347aca0" name: "USDC/ETHView chart" price: "$1.0101$1.01010.000928 ETH0.000928 ETH" [[Prototype]]: Object......
There are 100 of these
sortie du deuxieme console.log : $1,084.77$1,08545.38 ALCX45.38 ALCX

Merci d'avance pour vos réponse 
340 vues
24 juillet 2022 à 13:51 (Édité)
Cette pub permet au site de vivre ...

1 commentaire

Bonsoir,


Je pense qu'il faudrait que tu créés un Array ( gigantesque ) pour chaque type de crypto (valeur A) retournées.

Une fois ceci fait, tu pourras ensuite gérer tes valeurs " A " comme bon te semble. ( ex: array[crypto0[0].name], [...], array[crypto99[0].name] )


Il est également possible si les données sont sûre à 100% vis-à-vis du callback de créer des fonctions spécifique à la crypto.


Tu créer une fonction avec un argument de la crypto voulue, et cette fonction te retournera tes valeurs liée à celle-ci.

Cette pub permet au site de vivre ...