Catching and Altering API values in React Function

Question

Currently I figured out how to call the YGOPRO API in a React function and paste the data inside a stateless component. But now I've come at an impasse when trying to figure out how to use some of the API data to run some float numbers through a process of generating new values to post instead.

Here's the full scenario. I originally made this exact thing in a basic HTML layout because that's what the official YGO forbidden/limited webpage used and what I edited to make a joke video about the f/l list months ago. it still works fairly well and the API displays just fine, but its the matter of using this forloop and math junction code to work in a React environment This is the getJSON part of the code from the initial HTML project:

  $.getJSON(
    endpoint + "?startprice=" + startprice + "&endprice=" + endprice,
    function (json) {
      $.each(json.data, function (ix, obj) {
        let cards = [];
        let name = obj.name;
        let type = obj.type;
        let card_sets = obj.card_sets;
        let price_array = [];
        if (card_sets === undefined) {
          return true;
        }
        for (let i = 0; i < card_sets.length; i++) {
          let set_price = parseFloat(card_sets[i].set_price);
          if (set_price === 0 || set_price === null || set_price === "0.00") {
            continue;
          } else {
            price_array.push(set_price);
          }
        }
        let min_price = Math.min(...price_array);
        let max_price = Math.max(...price_array);
        const formatter = new Intl.NumberFormat("en-US", {
          style: "currency",
          currency: "USD",
          minimumFractionDigits: 2,
        });
        let min_price_usd = formatter.format(min_price);
        let max_price_usd = formatter.format(max_price);
        console.log(name);
        console.log(min_price);

What this originally did was simply read each monster entry in the API call within the price values described and grabbed each price value from each set listed within each entry while returning true to any part of the entry that didn't have a valid price value. it would then put all the valid money values in a temp array for that monster entry, use the Math function to get both a minimum and maximum price value from that API and then format them to appear as USD before placing them in the front-end of their respective monster entry.

This is the section of the React function that calls and collects the data for the API, including some throwaway lines that I left in after trying to figure all this out:

export default function TestView() {
  // for the Banned cards, or all cards more than $5. The limited section for cards more than $1 will come later
  // const name = "Dark Magician";
  const startprice = 5.0;
  const endprice = 99999.99;
  const [data, setData] = useState([]);

  // how to apply api names to these values?
  let name = data.name;
  let type = data.type;

  console.log(name);

  let price_array = [];

  useEffect(() => {
    getCardDataByPrice(startprice, endprice)
      .then(({ data }) => {
        setData(data.data);
      })
      .catch((error) => console.error(`Error: ${error}`));
  }, []);

  function getCardDataByPrice(startprice, endprice) {
    const ygoproURL = "https://db.ygoprodeck.com/api/v7/cardinfo.php";
    let ygoproEndpoint = `${ygoproURL}?startprice=${startprice}&endprice=${endprice}`;

    if (startprice) {
      ygoproEndpoint += `&startprice=${startprice}`;
    }

    if (endprice) {
      ygoproEndpoint += `&endprice=${endprice}`;
    }

    return axios.get(ygoproEndpoint);
  }

  // most of the code used to convert money values of each api entry
  // This is where the function that grabs the API values for card set prices was to be gathered and calculated like in the original HTML.

  let min_price = Math.min(...price_array);
  let max_price = Math.max(...price_array);

  const formatter = new Intl.NumberFormat("en-US", {
    style: "currency",
    currency: "USD",
    minimumFractionDigits: 2,
  });

  let min_price_usd = formatter.format(min_price);
  let max_price_usd = formatter.format(max_price);

  console.log(name);
  console.log(min_price);

  return (...

...etc.

What I am trying to figure out is how I could grab that API data for each monster entry and start grabbing the cash value from each set like how I used to do it here. I'm assuming its within the function that would call the Endpoint in the first place, but I'm not sure.

tl;dr: trying to port API call code from an HTML site into React is being hampered by not knowing where I can grab and alter the data to stick it to the front-end.

You can find the original HTML source code here to help you understand what I'm trying to do. https://github.com/patrickfinnigan/yugioh_banlist_manipulation

And you can also find how I'm trying to do the same thing in React, in case you'd need to see more of the overall code. https://github.com/patrickfinnigan/custom_yugioh_banlists_react (The Relative path would be 'ygo_banlists\src\views\TestView.js')

Catching and Altering API values in React Function

0 Answers