Passing API Response Data Between Components in Angular 2 using es5

Question

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!

index.html

<!DOCTYPE html>
<html>

    <head>
        <title>Angular 2 App</title>
         <link rel="stylesheet" href="styles.css">
    </head>
    <body class="container">
        <h1>Weather Forecaster using Angular 2</h1>
        <weather></weather>
        <show-weather></show-weather>
        <script src="https://code.angularjs.org/2.0.0-alpha.44/angular2.sfx.dev.js"></script>
        <script src="app.module.js"></script>
        <script src="showWeatherComponent.js"></script>
    </body>
</html>

getWeather Component

 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 + "&mode=json&units=metric&cnt=" + days + "&appid=2de143494c0b295cca9337e1e96b00e0&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);
 });

showWeather Component

 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);
});

getWeatherForm:

<!-- Options to find weather -->
<section class="row">
    <form (submit)="onSubmit(days.value, city.value)" role="form">
        <div class="form-group col-md-offset-1 col-md-3">
           <select class="form-control" #days>
            <option value="">--Select Number of Days--</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option  value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>
        </select>
    </div>

    <div class="form-group col-md-5">
      <input type="text" class="form-control" #city placeholder="Enter Your City">
    </div>

    <div class="form-group col-md-3">
        <button type="submit" class="btn btn-success btn-block" id="submit">Get Forecast</button>
    </div>

   </form>
 </section>

showWeatherForm

<!--table to show the results from the open weather api -->
<section class="row table-responsive">
   <table class="table table-bordered table-hover">
        <thead>
           <tr>
              <th>Date</th>
              <th>Morning</th>
              <th>Mid-Day</th>
              <th>Evening</th>
              <th>Expect</th>
              <th>Description</th>
              <th></th>
          </tr>
      </thead>
      <tbody>
        <tr>
            <td></td>
            <td></td> <!--morning temp-->
            <td></td> <!--mid-day temp-->
            <td></td> <!--evening temp-->
            <td></td> <!--main weather summary for the day-->
            <td></td> <!--detailed description-->
            <td>

            </td>
        </tr>
      </tbody>
     </table>
    </section>

It would help to also see your templates. I would probably put the server interaction into a service -- weatherService. I suggest you name your components based on the UI function, rather than the action -- i.e., rename getWeather to weatherForm. The weatherForm would call an API/method on the weatherService to retrieve the data from the server (and store/cache it). Then the showWeather component could subscribe to an event on that service, which is emitted whenever new data arrives from the server -- [see example](http://stackoverflow.com/a/34402436/215945). — Mark Rajcok, Dec 29 '15 at 01:45
Hey Mark, I went ahead and added the two templates for entering search info and displaying the response in a table. I have to add more there once I get the data to the 'showWeatherForm'. I was ideally trying to do the http request in a service but it looks like a service is just a constructor funtion in Angular 2, but then how to I instantiate http like I did in my getWeather Component? Wasn't sure there. And yeah I basically can't figure out how to respond to and event with Angular 2...are you talking like a click event from the weatherForm directive? Thanks! — bschmitty, Dec 29 '15 at 05:15
Inject Http into your service, just like a component, except that you need to use the `@injectable()` decorator (instead of `@Component`): Here's an [example](http://stackoverflow.com/a/34451170/215945) of how to do that injection. — Mark Rajcok, Dec 29 '15 at 05:32
No, sorry, I wasn't talking about click events. Your service should create an EventEmitter, like in the example I provided in the previous comment. When a component calls some method on the service, that method can makes the `http.get()` request. When the request comes back from the service -- i.e., inside `http.get().subscribe(...)` -- call `emit()` on the EventEmitter property. Any components that previously subscribed to the EventEmitter will be notified. — Mark Rajcok, Dec 29 '15 at 05:32
Ok yeah that all makes sense..you're talking Node's EventEmitter via npm install right and then require it? Also, that example link in your comment looks like ES6/typescript..I guess that was what I was wondering..is it not possible to do it in ES5? because I don't have those decorators with ES5. I realize I probably could have done it in half the time if I would have just used typescript..but since I started it in ES5 I was curious how I would use http in a service with ES5. Thanks Mark! — bschmitty, Dec 29 '15 at 06:20
No, not Node's EventEmitter, [Angular's EventEmitter](https://angular.io/docs/ts/latest/api/core/EventEmitter-class.html). It should be possible to write all this in ES5, but I would be of no assistance, as I'm only playing around in Angular 2 with TypeScript. — Mark Rajcok, Dec 29 '15 at 18:25

Passing API Response Data Between Components in Angular 2 using es5

0 Answers0