Accessing info in fulfilled promise

[cw66786]

I’m trying to fetch data then set that data to a global variable to use throughout my code. So far I am setting the function to a variable called data but this returns extra info i don’t need. is there a way to simply use
data.blahblah
or
data[blahblah]
to access this or do I need to fetch and set the variable itself differently

let dataIndex = "videogames";

title.innerHTML = DATASETS[dataIndex].TITLE;
description.innerHTML = DATASETS[dataIndex].DESCRIPTION;


const getData =  (async () => {
  
 
  let response = await fetch(DATASETS[dataIndex].FILE_PATH);
   info = await response.json();
     return info;


  
  
})().catch((err)=> console.log(err));


const data = getData;

console.log(data)

full code here:
Tree Map (codepen.io)

[cw66786]

Promise[[Prototype]]: Promisecatch: ƒ catch()constructor: ƒ Promise()finally: ƒ finally()then: ƒ then()Symbol(Symbol.toStringTag): "Promise"[[Prototype]]: Object[[PromiseState]]: "fulfilled"[[PromiseResult]]: Objectchildren: (18) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]name: "Video Game Sales Data Top 100"[[Prototype]]: Objectconstructor: ƒ Object()hasOwnProperty: ƒ hasOwnProperty()isPrototypeOf: ƒ isPrototypeOf()propertyIsEnumerable: ƒ propertyIsEnumerable()toLocaleString: ƒ toLocaleString()toString: ƒ toString()valueOf: ƒ valueOf()__defineGetter__: ƒ __defineGetter__()__defineSetter__: ƒ __defineSetter__()__lookupGetter__: ƒ __lookupGetter__()__lookupSetter__: ƒ __lookupSetter__()__proto__: (...)get __proto__: ƒ __proto__()set __proto__: ƒ __proto__()

this is what data variable is currently getting set to I only wanting to get the object after [[Promiseresult]].

[cw66786]

@camperextraordinaire

const DATASETS = {
  videogames: {
    TITLE: "Video Game Sales",
    DESCRIPTION: "Top 100 Most Sold Video Games Grouped by Platform",
    FILE_PATH:
      "https://cdn.rawgit.com/freeCodeCamp/testable-projects-fcc/a80ce8f9/src/data/tree_map/video-game-sales-data.json"
  }
};

let dataIndex = "videogames";

const main = async () => {
  const getData = async () => {
    try {
      let response = await fetch(DATASETS[dataIndex].FILE_PATH);
      info = await response.json();
      return info;
    } catch (err) {
      console.log(err);
    }
  };
  const data = await getData();
  console.log(data);
//write the rest of my code here?
};
main();

//no way to use variable here?

If I’m understanding you correctly you’re saying write code where i put the comment within the function? I’ve done this on past projects to just get them done so to speak, but it seems weird to me. If I was making something much bigger and complex is this still how it is done or is their alternatives? Sorry for all the questions, I’m just trying to get an idea of what to look for and study for the future. As for this project i’ll probably wrap it in the function and move on with my life lol

[camperextraordinaire]

@camperextraordinaire

//write the rest of my code here?

Yes

@camperextraordinaire

//no way to use variable here?

No, because JavaScript will continue to process any synchronous code. It does not stop just because some asynchronous code is running (i.e. like fetching some data).

You could just wrap everything in your “main program” in an IIFE and have your data set and other functions like getData outside the IIFE.

const DATASETS = {
  videogames: {
    TITLE: "Video Game Sales",
    DESCRIPTION: "Top 100 Most Sold Video Games Grouped by Platform",
    FILE_PATH:
      "https://cdn.rawgit.com/freeCodeCamp/testable-projects-fcc/a80ce8f9/src/data/tree_map/video-game-sales-data.json"
  }
};

const getData = async (dataIndex) => {
  try {
    let response = await fetch(DATASETS[dataIndex].FILE_PATH);
    info = await response.json();
    return info;
  } catch (err) {
    console.log(err);
  }
};

const getTopSellingConsoleGame = (data, whichConsole) => {
  const consoleSales = data.children.filter(({ name }) => name === whichConsole);
  return consoleSales[0].children[0].name;
};

// main program
(async () => {
  let dataIndex = "videogames";
  const data = await getData(dataIndex);
  
  // do more stuff with data here
  const topSellingPS4Game = getTopSellingConsoleGame(data, 'PS4');
  console.log(topSellingPS4Game) // Call of Duty: Black Ops 3
})();

[cw66786]

@camperextraordinaire

Thanks for the help. I appreciate you.