*Noob alert* Why is data from my API being shown correctly in the console, but is undefined on the page?

facerank.co/paid

this is the error I'm getting:

results are not in the expected format or are empty.

So basically, I'm making a call to the smartproxy API and it is returning data in this structure:

results[0].content.data.user (and I want to retrieve userData.biography, userData.full_name and userData.category_name respectively.

but the output from the following frontend code is undefined for all the fields I'm attempting to extract:

import { fetchInstagramData } from 'backend/smartproxyAPI.jsw'; // Import the function to fetch Instagram data
import { generatePlan } from 'backend/IGpaid.jsw'; // Import the function to generate the plan

$w.onReady(function () {
    console.log("Page is fully loaded and ready.");

    $w("#usernameButton0").onClick(async () => {
        const username = $w("#usernameInput0").value; // Get the username from the input field
        if (username) {
            console.log("Username entered:", username);
            $w("#loadingAnimation0").show(); // Show the loading animation
            $w("#usernameButton0").hide(); // Hide the button to prevent multiple clicks

            try {
                console.log("Starting the fetch for username:", username);
                // Fetch Instagram data for the given username
                const results = await fetchInstagramData(username);
                console.log("Fetch completed successfully. Results:", results);

                // Display the results and handle the generated plan
                displayResults(results);
                const plan = await generatePlan(results);
                handlePlanGenerated(plan);
            } catch (error) {
                console.error('Error occurred:', error);
                // Show error message and hide the loading animation
                $w("#outputText0").text = "Failed to fetch data. Please try again.";
                $w("#outputText0").show();
                $w("#loadingAnimation0").hide();
            }
        } else {
            console.log("No username entered.");
            // Show message to enter a username and hide the loading animation
            $w("#outputText0").text = "Please enter a username.";
            $w("#outputText0").show();
            $w("#loadingAnimation0").hide();
        }
    });
});

async function displayResults(results) {
    console.log("Initial Results:", results);

    if (!results || !Array.isArray(results) || results.length === 0) {
        console.error("Results are undefined, not an array, or empty:", results);
        $w("#outputText0").text = "Results are not in the expected format or are empty.";
        $w("#outputText0").show();
        return;
    }

    const firstResult = results[0];
    console.log("First result:", firstResult);

    if (!firstResult.content) {
        console.error("Content is undefined or not found:", firstResult);
        $w("#outputText0").text = "Content is undefined or not found.";
        $w("#outputText0").show();
        return;
    }

    const data = firstResult.content.data;
    console.log("Data:", data);

    if (!data || !data.user) {
        console.error("User data is undefined or not found:", data);
        $w("#outputText0").text = "User data is undefined or not found.";
        $w("#outputText0").show();
        return;
    }

    const userData = data.user;
    console.log("Fetched user data:", userData);

    const biography = userData.biography || "Biography not found.";
    const fullName = userData.full_name || "Full name not found."; 
    const businessCategory = userData.category_name || "Business category not found.";

    console.log("Biography:", biography);
    console.log("Full Name:", fullName);
    console.log("Business Category:", businessCategory);

    // Display the biography, full name, and business category
    $w("#outputText0").text = biography;
    $w("#outputText0").show();

    $w("#textOutput1").text = fullName;
    $w("#textOutput1").show();

    $w("#textOutput2").text = businessCategory;
    $w("#textOutput2").show();

    $w("#textOutput3").hide(); // Hide this element as it's not used anymore.
}

async function handlePlanGenerated(generatedPlan) {
    // Display the generated plan and hide the loading animation
    $w("#textOutput4").text = generatedPlan;
    $w("#textOutput4").show();
    $w("#loadingAnimation0").hide();
}

Here is where FetchInstagramData is being imported from too: (smartproxyAPI.jsw/backend)

import { fetch } from 'wix-fetch';
import { getSecret } from 'wix-secrets-backend';

export async function fetchInstagramData(username) {
  console.log("Starting fetchInstagramData function with username:", username);
  
  const token = await getSecret("smartproxyKEY");
  const url = "https://scraper-api.smartproxy.com/v2/scrape";
  const requestBody = {
    "target": "instagram_graphql_profile",
    "username": username,
    "locale": "en-us",
    "geo": "United States"
  };
  const requestOptions = {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      // Use template literals to correctly insert the token into the Authorization header
      "Authorization": `Basic ${token}`
    },
    body: JSON.stringify(requestBody) // Convert the JS object to a JSON string
  };

  console.log("Sending POST request to", url, "with options:", requestOptions);

  try {
    const response = await fetch(url, requestOptions);
    console.log(`Response received. Status: ${response.status}`);

    if (response.ok) {
      const responseBody = await response.json();
      console.log("Response body parsed successfully:", responseBody);
      return responseBody;
    } else {
      // Handle non-2xx responses
      console.error(`Server returned non-success status code: ${response.status}`);
      try {
        const errorBody = await response.json(); // Attempt to parse the error body
        console.error("Error body:", errorBody);
      } catch(parseError) {
        console.error("Failed to parse error body:", parseError);
      }
      return null; // or you might want to throw an error or return the errorBody for further handling
    }
  } catch (error) {
    console.error('Fetch operation failed:', error);
    return null; // or you might want to throw the error for further handling
  }
}

I really hope someone can help with this! thanks.