How to get Promise results for use elsewhere in script

Hello all:

I'm very new to JS and looking for your help.

I'm using fetch to get the contents of a JSON file. So far, I can "see" the data with console.log(), but I cannot assign the data to a variable for use later in the script.

Here are the two versions of the code I am working with:

// Async/await
let bar;

async function getSearchIndex() {
  try {
    const response = await fetch("/index.json");
    if (!response.ok) {
      throw new Error(`Response status: ${response.status}`);
    }

    const contentType = response.headers.get("content-type");
    if (!contentType || !contentType.includes("application/json")) {
      throw new TypeError("Oops, we haven't got JSON!");
    }

    const searchIndex = await response.json();
    // console.log(searchIndex);
  } catch (error) {
    console.error(error.message);
  }
}

bar = getSearchIndex();
console.log(bar);



// fetch .then
let foo;

fetch("/index.json")
  .then(response => {
    if (!response.ok) {
      throw new Error(`Response status: ${response.status}`);
    }
    return response.json();
  })
  .then(json => {
    // console.log(json);
    foo = json;
  })
  .catch(error => {
    console.error(error.message);
  })

console.log(foo);

In both examples, I attempt to assign the JSON data to foo and bar, but those return "undefined" or Promise.

How can I get the actual JSON into a variable to use elsewhere in a script?

Thank you!