How to identify an element in a table whatever its place

user_19474725 0
Viewed 77

Here is the new script with the find function which allows me to identify a single element of the array for sure but there is still a small problem. As you can see it's my const crypto which contains the data I want to display on the front end. However when I want to call crypto at the return level the const is not recognized.

Hello again,

I updated the script now it works I can display on the front end the data I want however I have the impression that the request to the api is executed several times when I would like there to be only one request

I put below a screen of the console.log of my script. As you can see the data requested is displayed first as undefined then it is displayed several times, then I put blocked due to the too large number of requests made in little time

enter image description here

Thanks for your help

How do I make my requests :

import { useState, useEffect } from "react";

function App() {

const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null)

useEffect(() => {
fetch("http://localhost:4500/coingeckotest")
.then(response => {
  if (response.ok) {
    return response.json()
  }
  throw response;
})
.then(data => {
  setData(data)
})
.catch(error => {
  console.error("Error fetching data: ", error)
  setError(error)
})
.finally(() => {
  setLoading(false)
})
}, [])

const uniswap = data&&data[0].tickers?.find(donne => 
donne.trade_url === 'https://app.uniswap.org/#/swap? 
inputCurrency=0x2260fac5e5542a773aa44fbcfedf7c193bc2c599&
outputCurrency=ETH')
const uniprice = uniswap?.converted_last?.usd
const sushiswap = data&&data[1].tickers?.find(donne => 
donne.trade_url === 'https://app.sushi.com/swap? 
inputCurrency=0x2260fac5e5542a773aa44fbcfedf7c193bc2c59
9&outputCurrency=ETH')
const sushiprice = sushiswap?.converted_last?.usd
const curvefinance = data&&data[2].tickers?.find(donne => 
donne.base === 'DAI')
const curveprice = curvefinance?.converted_last?.usd
const quickswap = data&&data[3].tickers?.find(donne => 
donne.trade_url === 'https://quickswap.exchange/#/swap? 
inputCurrency=0x0d500b1d8e8ef31e21c99d1db9a6444d3adf127
0&outputCurrency=0xbbba073c31bf03b8acf7c28ef0738decf369
5683')
const quickprice = quickswap?.converted_last?.usd
console.log(uniprice)
console.log(sushiprice)
console.log(curveprice)
console.log(quickprice)
if (loading) return "Loading..."
if(error) return "Error !"

 return (
 <>
 </>
 )
}

export default App;

Thank you in advance for your answers

axios reactjs node.js api javascript
1 Answers

You can use the Array.find method to find out the first entry that matches a particular coin_id. The code for that would be:

const desiredCoinID = "something"; (determined by some user input)
const desiredCoinObject = data.find(coin => coin.coin_id === desiredCoinID);
const priceInUSD = desiredCoinObject?.tickers?.converted_last?.usd;

——-Updated Answer——-

Hi, this is my answer to your updated question. const crypto that you use is available only within the scope of the callback of the useEffect function, which is why you cannot see the results on your screen. There are two ways you can go about it:

First, you can declare crypto as a let outside the useEffect and then update it inside your useEffect. That way your crypto will have global scope. But there is a better way to do this, which is to use the useState hook.

You can declare a crypto, setCrypto using useState and then use the setter to update the value if crypto inside useEffect after the data fetching is over. Let me know if you need help writing code.

user_191083080
Related