title: Passing API Response Data Between Components in Angular 2 using es5
body: <p>Using es5, how can I go about updating my showWeather component so that when the http response comes back from my getWeather component 'this.showData' shows the data from the Open Weather api response, which I would then like to loop through and show on the page? I'm wondering how I can update 'this.showData' dynamically basically. Any help is appreciated!</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
      &lt;head&gt;
          &lt;title&gt;Angular 2 App&lt;/title&gt;
           &lt;link rel="stylesheet" href="styles.css"&gt;
      &lt;/head&gt;
      &lt;body class="container"&gt;
          &lt;h1&gt;Weather Forecaster using Angular 2&lt;/h1&gt;
          &lt;weather&gt;&lt;/weather&gt;
          &lt;show-weather&gt;&lt;/show-weather&gt;
          &lt;script src="https://code.angularjs.org/2.0.0-alpha.44/angular2.sfx.dev.js"&gt;&lt;/script&gt;
          &lt;script src="app.module.js"&gt;&lt;/script&gt;
          &lt;script src="showWeatherComponent.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>getWeather Component </p>
  
  <pre><code> var getWeather = ng.Component({
      selector: 'weather',
      providers: [ngHttp.HTTP_PROVIDERS],
      templateUrl: "getWeather.html"
  })
  .Class({
      constructor: [ngHttp.Http, function (Http){ //constructor function getting called with object.create()
          this.http = Http;
          this.weatherData = [];
      }],
      onSubmit: function (days, city){
      this.http.get("http://api.openweathermap.org/data/2.5/forecast/daily?q=" + city + "&amp;mode=json&amp;units=metric&amp;cnt=" + days + "&amp;appid=2de143494c0b295cca9337e1e96b00e0&amp;units=imperial")
              .map(function (response){
                  return response.json();
              })
              .subscribe(function(result){
                  this.weatherData = result;
              });
      },
      getFinalData: function (){
          return this.weatherData;
      }
  
  
   document.addEventListener("DOMContentLoaded", function (){
        ng.bootstrap(getWeather);
   });
  </code></pre>
  
  <p>showWeather Component </p>
  
  <pre><code> var showWeather = ng.Component({
      selector: 'show-weather',
      providers: [getWeather, ngHttp.HTTP_PROVIDERS],
      templateUrl: 'showWeather.html'
  })
  .Class({
      constructor: [getWeather, ngHttp.Http, function (getWeather, Http){       
       //how can I update this value when the api response comes back from the getWeather component 
        this.showData = getWeather;
  
      }]
  });
  
  document.addEventListener("DOMContentLoaded", function (){
        ng.bootstrap(showWeather);
  });
  </code></pre>
  
  <p>getWeatherForm:</p>
  
  <pre><code>&lt;!-- Options to find weather --&gt;
  &lt;section class="row"&gt;
      &lt;form (submit)="onSubmit(days.value, city.value)" role="form"&gt;
          &lt;div class="form-group col-md-offset-1 col-md-3"&gt;
             &lt;select class="form-control" #days&gt;
              &lt;option value=""&gt;--Select Number of Days--&lt;/option&gt;
              &lt;option value="3"&gt;3&lt;/option&gt;
              &lt;option value="4"&gt;4&lt;/option&gt;
              &lt;option value="5"&gt;5&lt;/option&gt;
              &lt;option value="6"&gt;6&lt;/option&gt;
              &lt;option value="7"&gt;7&lt;/option&gt;
              &lt;option value="8"&gt;8&lt;/option&gt;
              &lt;option  value="9"&gt;9&lt;/option&gt;
              &lt;option value="10"&gt;10&lt;/option&gt;
              &lt;option value="11"&gt;11&lt;/option&gt;
              &lt;option value="12"&gt;12&lt;/option&gt;
              &lt;option value="13"&gt;13&lt;/option&gt;
              &lt;option value="14"&gt;14&lt;/option&gt;
              &lt;option value="15"&gt;15&lt;/option&gt;
              &lt;option value="16"&gt;16&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group col-md-5"&gt;
        &lt;input type="text" class="form-control" #city placeholder="Enter Your City"&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group col-md-3"&gt;
          &lt;button type="submit" class="btn btn-success btn-block" id="submit"&gt;Get Forecast&lt;/button&gt;
      &lt;/div&gt;
  
     &lt;/form&gt;
   &lt;/section&gt;
  </code></pre>
  
  <p>showWeatherForm</p>
  
  <pre><code>&lt;!--table to show the results from the open weather api --&gt;
  &lt;section class="row table-responsive"&gt;
     &lt;table class="table table-bordered table-hover"&gt;
          &lt;thead&gt;
             &lt;tr&gt;
                &lt;th&gt;Date&lt;/th&gt;
                &lt;th&gt;Morning&lt;/th&gt;
                &lt;th&gt;Mid-Day&lt;/th&gt;
                &lt;th&gt;Evening&lt;/th&gt;
                &lt;th&gt;Expect&lt;/th&gt;
                &lt;th&gt;Description&lt;/th&gt;
                &lt;th&gt;&lt;/th&gt;
            &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt; &lt;!--morning temp--&gt;
              &lt;td&gt;&lt;/td&gt; &lt;!--mid-day temp--&gt;
              &lt;td&gt;&lt;/td&gt; &lt;!--evening temp--&gt;
              &lt;td&gt;&lt;/td&gt; &lt;!--main weather summary for the day--&gt;
              &lt;td&gt;&lt;/td&gt; &lt;!--detailed description--&gt;
              &lt;td&gt;
  
              &lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
       &lt;/table&gt;
      &lt;/section&gt;
  </code></pre>