title: Javascript async function console log the returned data
body: <p>How can I console log - or do any thing with the data returned from inside an async function?</p>
  
  <p>example:
  JS FILE:</p>
  
  <pre><code>   async function getData(){
        try {
           $.getJSON('./data.json', (data) =&gt; {
              return data;
           });
        } catch(error) {
           console.log("error" + error);
        } finally {
           console.log('done');
        }
     }
  
     console.log(getData());
  </code></pre>
  
  <p>JSON FILE:</p>
  
  <pre><code>{
     "stuff": {
        "First": {
           "FirstA": {
              "year": [2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017],
              "Categories": ["Suspension", "Electrical", "Performance", "Motor"]
           },
           "FirstB": {
              "year": [2007, 2008, 2009, 2010, 2011, 2012],
              "Categories": ["Suspension", "Electrical", "Performance", "Motor"]
           }
        },
        "Second": {
           "SecondA": {
              "year": [2002, 2003, 2004, 2005, 2006],
              "Categories": ["Suspension", "Electrical", "Performance", "Motor"]
           },
           "SecondB": {
              "year": [2007, 2008, 2009, 2010, 2011, 2012],
              "Categories": ["Suspension", "Electrical", "Performance", "Motor"]
           }
        }
     }
  }
  </code></pre>
  
  <p>How can I return / get access to all the information in the JSON file and work with it. for example I'd like to take the "First" and "Second" and add them to a div. Same with "FirstA" and "FirstB" and "SecondA" and "SecondB"...and so on.</p>
  
  <p>Right now as it stands, I get <strong><em>Promise {: undefined}</em></strong></p>
  
  <p>Any help would be greatly appreciated.</p>
  
  <p>---------UPDATE---------</p>
  
  <p>If I run the console log inside the function I then can see the json data, but I need access to the data outside the function.</p>
  
  <p>Serge</p>