When I make a fetch request then take out the JSON, instead a promise is saved as a variable with the correct JSON in it

When I make a fetch request then take out the JSON, instead a promise is saved as a variable with the correct JSON in it. I can not figure out how to pull the data from the promise in the variable in order to actually use the data.

When I test the URL using postman or just putting it into my browser gives back JSON so this formatting I believe to be an issue on my codes end.

The function for the call is as follows:

  var responseData = await fetch('https://api.sampleapis.com/wines/reds')
  .then((response) => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    var jsonData = response.json();
    console.log(jsonData);
    return jsonData
  })
}

The logged json in console looks like this:

Promise {<pending>}
[[Prototype]]
: 
Promise
[[PromiseState]]
: 
"fulfilled"
[[PromiseResult]]
: 
Array(718)

The Array(718) contains the desired payload looking like this:

[0 … 99]
[100 … 199]
[200 … 299]
[300 … 399]
[400 … 499]
[500 … 599]
[600 … 699]
[700 … 717]
length
: 
718

The interiors of these 8 arrays looks like this (the JSON is finally present):

[0 … 99]
0: 
{winery: 'Maselva', wine: 'Emporda 2012', rating: {…}, location: 'Spain\n·\nEmpordà', image: 'https://images.vivino.com/thumbs/ApnIiXjcT5Kc33OHgNb9dA_375x500.jpg', …}
1: 
{winery: 'Ernesto Ruffo', wine: 'Amarone della Valpolicella Riserva N.V.', rating: {…}, location: 'Italy\n·\nAmarone della Valpolicella', image: 'https://images.vivino.com/thumbs/nC9V6L2mQQSq0s-wZLcaxw_pb_x300.png', …}
2: 
{winery: 'Cartuxa', wine: 'Pêra-Manca Tinto 1990', rating: {…}, location: 'Portugal\n·\nAlentejo', image: 'https://images.vivino.com/thumbs/L33jsYUuTMWTMy3KoqQyXg_pb_x300.png', …}
3: 
{winery: 'Schrader', wine: 'Cabernet Sauvignon RBS Beckstoffer To Kalon Vineyard 2015', rating: {…}, location: 'United States\n·\nOakville', image: 'https://images.vivino.com/thumbs/GpcSXs2ERS6niDxoAsvESA_pb_x300.png', …}
4: 
{winery: 'Hundred Acre', wine: 'Wraith Cabernet Sauvignon 2013', rating: {…}, location: 'United States\n·\nNapa Valley', image: 'https://images.vivino.com/thumbs/PBhGMcRNQ7aVnVNr7VgnWA_pb_x300.png', …}
5: 
{winery: 'Sine Qua Non', wine: 'Ratsel Syrah N.V.', rating: {…}, location: 'United States\n·\nCalifornia', image: 'https://images.vivino.com/thumbs/ZzMKzqFqRO-6oI3ys3gGgQ_pb_x300.png', …}
6: 
{winery: 'Del Dotto', wine: 'The Beast Cabernet Sauvignon 2012', rating: {…}, location: 'United States\n·\nRutherford', image: 'https://images.vivino.com/thumbs/easjTPIcS-mCQ99XoYOMgQ_pb_x300.png', …}
7: 
{winery: 'Darioush', wine: 'Darius II Cabernet Sauvignon 2016', rating: {…}, location: 'United States\n·\nNapa Valley', image: 'https://images.vivino.com/thumbs/U19RXtSdRMmoAesl2CBygA_pb_x300.png', …}
8: 
{winery: 'Garbole', wine: 'Hurlo 2009', rating: {…}, location: 'Italy\n·\nVeneto', image: 'https://images.vivino.com/thumbs/f_G1SS0eT_C6hZGGwdEZqA_pb_x300.png', …}
9: 
{winery: 'Scarecrow', wine: 'Cabernet Sauvignon 2016', rating: {…}, location: 'United States\n·\nRutherford', image: 'https://images.vivino.com/thumbs/pU7uFKR-TAKAOQaf3Hpn2A_pb_x300.png', …}

The fetch API works with a two-step Promise resolution process. When dealing with JSON data, you need to await twice - once for the initial network response and a second time to parse the JSON payload.

async function basicAPICall() {
  try {
    const response = await fetch('https://api.sampleapis.com/wines/reds');
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    const jsonData = await response.json(); // Add await here
    console.log(jsonData);
    return jsonData;
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

So you need to await the resolution of the promise returned by response.json() within your basicAPICall function.