title: This tag not targeting to Constructor
body: <p>So I'm new to javascript and am having problems targeting the method I would like to target in my constructor</p>
  <pre><code>class Stock_List {
    constructor() {
      // fetching the json file (async)
      fetch('../stocks.json')
        .then(function (resp) {
          return resp.json();
        })
        .then(function (data) {
          let stock_info_arr = data.stock_info;
          for (const stock of stock_info_arr) {
            console.log(stock);
            this.add_stock(stock);
          }
        });
    }
  </code></pre>
  <p>I am having problems where I am trying to call the add_stock function which is in the class as a method but the this key word seems to be targeting the data of what the json is returning.In reality I want the this tag to target the Stock_list object. Does anyone know of a solution where this can be fixed. Thanks!</p>
  <p>this is what the full class looks like</p>
  <pre><code>class Stock_List {
    constructor() {
      // fetching the json file (async)
      fetch('../stocks.json')
        .then(function (resp) {
          return resp.json();
        })
        .then(function (data) {
          let stock_info_arr = data.stock_info;
          for (const stock of stock_info_arr) {
            console.log(stock);
            this.add_stock(stock);
          }
        });
    }
  
    add_stock(jsObject) {
      let big_container = document.querySelector('.background');
      // this statement fixes the background once a stock is added
      big_container.style.position = 'sticky';
      let stock_container = document.createElement('div');
      stock_container.className = 'stock_container';
      stock_container.id = jsObject['stock_ticker'];
      // stock header being built
      stock_container.innerHTML = `
      &lt;div class=&quot;stock_header&quot;&gt;
        &lt;h2 class=&quot;stock_ticker&quot;&gt;${jsObject['stock_ticker']}&lt;/h2&gt;
        &lt;h2 class=&quot;price&quot;&gt;${jsObject['price']}&lt;/h2&gt;
        &lt;h2 class=&quot;percent_change&quot;&gt;${jsObject['percent_change']}&lt;/h2&gt;
        &lt;button&gt;
          &lt;div class=&quot;line&quot;&gt;&lt;/div&gt;
        &lt;/button&gt;
      &lt;/div&gt;`;
      // articles being built
      for (let i = 0; i &lt; jsObject['headers'].length; i++) {
        stock_container.innerHTML += `
        &lt;div class=&quot;articles&quot;&gt;
          &lt;h3&gt;${jsObject['headers'][i]}&lt;/h3&gt;
          &lt;p&gt;
            ${jsObject['articles'][i]}
          &lt;/p&gt;`;
      }
      //closing off the div of the stock container
      stock_container.innerHTML += `
      &lt;/div&gt;`;
  
      big_container.appendChild(stock_container);
    }
  }
  </code></pre>