What is preventing me from accessing the variable?

Question

What is preventing me from accessing the variable?

Having some trouble using a variable from JSON in another function. Can someone lend a hand?

async function fetchData() {
  let response = await fetch('https://run.mocky.io/v3/b9f7261a-3444-4bb7-9706-84b1b521107d');
  let data = await response.json();
}

fetchData();

data.forEach((item) => {
  item.forEach((nestedItem) => {
    placeCharacter(nestedItem.x, nestedItem.y, "O", myGrid);
    placeRandomCharacter("O", enemyGrid, enemyGridSize);
    drawBreak();
  });

javascript json

Answer 1

Answer №1

Due to the scoping of shipsJSON within the githubUsers function, one solution could be to use await on the returned data in another async function and then iterate through it.

async function githubUsers() {
  let response = await fetch('https://run.mocky.io/v3/b9f7261a-3444-4bb7-9706-84b1b521107d');
  return response.json();
}

async function main() {
  const shipsJSON = await githubUsers();
  // write the remaining code here
}

main();

Another approach is possible since fetch returns a promise:

function githubUsers() {
  return fetch('https://run.mocky.io/v3/b9f7261a-3444-4bb7-9706-84b1b521107d');
}

async function main() {
  const response = await githubUsers();
  const shipsJSON = await response.json();
  // write the remaining code here
}

main();

Answer 2

Due to the scoping of shipsJSON within the githubUsers function, one solution could be to use await on the returned data in another async function and then iterate through it.

async function githubUsers() {
  let response = await fetch('https://run.mocky.io/v3/b9f7261a-3444-4bb7-9706-84b1b521107d');
  return response.json();
}

async function main() {
  const shipsJSON = await githubUsers();
  // write the remaining code here
}

main();

Another approach is possible since fetch returns a promise:

function githubUsers() {
  return fetch('https://run.mocky.io/v3/b9f7261a-3444-4bb7-9706-84b1b521107d');
}

async function main() {
  const response = await githubUsers();
  const shipsJSON = await response.json();
  // write the remaining code here
}

main();

Answer 3

Answer №2

When using async function, the githubUsers call may not complete before your foreach loop. Additionally, the shipsJSON variable is declared within the scope of githubUsers, making it unavailable outside of it. To access it in the outer scope, you should use return. Here's how you can do it:

async function githubUsers() {
  let response = await fetch('https://run.mocky.io/v3/b9f7261a-3444-4bb7-9706-84b1b521107d')
  return response.json()
}

async function fetchAndLoop() {
    const json = await githubUsers()

    json.forEach((item) => {
      item.forEach((nestedItem) => {
        placeCharacter(nestedItem.x, nestedItem.y, "O", myGrid)
        // placeCharacter(nestedItem.x, nestedItem.y, 'O', myGrid);
        placeRandomCharacter('O', enemyGrid, enemyGridSize);
        drawBreak();

      });
}

fetchAndLoop();

Answer 4

When using async function, the githubUsers call may not complete before your foreach loop. Additionally, the shipsJSON variable is declared within the scope of githubUsers, making it unavailable outside of it. To access it in the outer scope, you should use return. Here's how you can do it:

async function githubUsers() {
  let response = await fetch('https://run.mocky.io/v3/b9f7261a-3444-4bb7-9706-84b1b521107d')
  return response.json()
}

async function fetchAndLoop() {
    const json = await githubUsers()

    json.forEach((item) => {
      item.forEach((nestedItem) => {
        placeCharacter(nestedItem.x, nestedItem.y, "O", myGrid)
        // placeCharacter(nestedItem.x, nestedItem.y, 'O', myGrid);
        placeRandomCharacter('O', enemyGrid, enemyGridSize);
        drawBreak();

      });
}

fetchAndLoop();

What is preventing me from accessing the variable?

Answer №1

Answer №2

Similar questions

Extracting various data points from a JSON document

Creating a cascading layout with React Material-UI GridList

Is there a way to determine if a file is an audio or video file using Vue.js by examining its URL?

Separate the keys and values of a JSON file into individual rows within a pandas dataframe

Struggling to display my array data retrieved from the database on my Angular 5 page

A configuration for ".node" files is missing: specifically, the loader for node_modules/fsevents/fsevents.node in a project using Vite

Most effective method to retrieve yesterday's data

Utilizing API data to set the state in a React component

Why isn't the function in my React child component passing its parameters to the parent component's function as expected?

Using PHP in combination with Ajax for automatically performing an action when there is an update

Add a message displaying the error in the input field using jQuery Validation

How do I submit my form data as a JSON object using AngularJS?

What are some ways to enhance the speed of my canvas animations?

Attempting to modify the background hue of a grid component when a click event is triggered

Tips for utilizing jquery.load for fetching a section of an html document or an entire html file

What is the best way to incorporate the final paragraph into the foundational code?

Enhance JSON nesting with knockoutJS

Unraveling the Json Object with php and angularJs

Mocking objects in unit test cases to simulate real-life scenarios and test the

Losing scope of "this" when accessing an Angular2 app through the window