I am trying to get the price of each stock in the stock_data state variable, using the short_name key. Here is my useEffect function which does all the fetching for me. The fetch_BSE_Data is to store in the stock_data. But the API I am using for it doesn't give any price details of the stocks. So, I tried fetching the price using Yahoo's API in the fetch_price_data function:

Fetching in UseEffect

  useEffect(() => {
    const fetch_BSE_Data = async () => {
      console.log("fetching data");
      return await fetch(
        "https://api.bseindia.com/BseIndiaAPI/api/DefaultData/w?Fdate=20220912&Purposecode=P9&TDate=20221216&ddlcategorys=E&ddlindustrys=&scripcode=&segment=0&strSearch=S"
      )
        .then((response) => response.json())
    };

    const fetch_price_data = async () => {

      const data = stock_data.map((stock) => {
        var shortName = stock.short_name;
        if (stock.short_name.includes(" ")) {
          shortName = stock.short_name.replace(" ", "")
        }
        else if (stock.short_name.includes("*")) {
          shortName = stock.short_name.replace("*", "")
        }

        fetch(`https://query1.finance.yahoo.com/v8/finance/chart/${shortName}.BO`)
          .then((response) => response.json())
          .then((response) => {
            if (response.chart.result[0]) {
              console.log("result: ", response.chart.result, "response: ", response.chart.result[0].meta.previousClose)
              return response.chart.result[0].meta.previousClose;
            }
            else {
              console.log("ERROR:", response.chart.error.code);
              return null;
            }
          });
      })
      return data
    }

    const fetchData = async () => {
      const stock_response = await fetch_BSE_Data();
      const price_data = await fetch_price_data();
      console.log("price_data: ", price_data)
      const mappedItems = makeMyNewData(stock_response, price_data);
      setStockData(mappedItems);
      console.log("stock_data after setStockData", stock_data);
    }
    fetchData();
  }, []);

The data in the fetch_price_data comes out as an array of undefined. What am I doing wrong?

CodePudding user response：

You'll want to use Promise.all so you can fetch all of the prices in parallel:

// Since fetch_BSE_Data and fetch_price_data are doing the 
// same thing (fetching data), you can make a generic function 
// for fetching that takes a url as an argument.

const fetchData = async (url) => {
  try {
    const response = await fetch(url)
    if (!response.ok) throw response.statusText
    const data = response.json()
    return data
  } catch(error) {
    console.error(error)
  }
};

const getStockPrices = async () => {
  // Use the generic fetchData to get the list of stocks
  const stocks = await fetchData("https://api.bseindia.com/BseIndiaAPI/api/DefaultData/w?Fdate=20220912&Purposecode=P9&TDate=20221216&ddlcategorys=E&ddlindustrys=&scripcode=&segment=0&strSearch=S");

  // RegEx is a clean way to trim and remove any 
  // special characters or numbers from the shortNames
  const shortNames = stocks.map((stock) => stock.short_name.replace(/[^a-zA-Z]/g, ''));

  // Use the generic fetchData to get the stock
  // details for each of the shortNames and use
  // Promise.all to await the results of all of the data
  const prices = await Promise.all(shortNames.map((stock) => fetchData(`https://query1.finance.yahoo.com/v8/finance/chart/${stock}.BO`)))

  // Do other stuff to data...
}
   
getStockPrices()