AnsweredAssumed Answered

Question about displaying fetched data using Ember.js

Question asked by ayako_suzukiesrij-esridist Employee on Aug 3, 2018

I am trying to customize sdg-dash in Esri GitHub.

The app allows users to select area and show details information around the area.

Details information about selected area is driven by sdg-dashboard-api.

The API returnes how to layout the infomation for the area in the app.

So the selected area id should match to the id which the API has.

 

The select element in the app is hardcorded.

In fact, the API has geographies.json which contains area id, but it seems that the app does not use.

So I want to use this data and create select element when it loads.

The app is built with Ember.js, but I am new to Ember.js, so I have no idea how I can figure it out.

 

What I do so far:

  • Add loadGeographies function to app\service.js. It requests to the API and retrieve area id data.
loadGeographies() {
  return ajax({
    url: ENV.sdgDashboardsApi + 'geographies',
    dataType: 'json'
  });
},

 

  • Add init function to app\components\country-select-box\component.js. This is a component for select element.
    init is a part of component lifecycle and it is hooked when the component is initialized.
countries_display: null,
cities_display: null,

init() {
  this._super(...arguments);

  let svc = this.get('session');
  svc.loadGeographies()
    .then((response) => {
      let countries_res = [];
      let cities_res = [];
      response.data.forEach((item) => {
        if (item.geo_group === 'countries') {
          countries_res.push(item);
        } else if (item.geo_group === 'cities') {
          cities_res.push(item);
        }
      });
      if (countries_res.length > 0) {
        this.set('countries_display', countries_res);
      }
      if (cities_res.length > 0) {
        this.set('cities_display', cities_res);
      }
    })
    .catch((error) => {
      console.log(error);
    });
},

 

  • Change elements in app\components\country-select-box\template.hbs. This is a template for the component for select element.
    It will reference countries_display/cities_display objects created in compontn.js and loop area data then show countries and cities in options.
{{#if countries_display}}
  <optgroup label="Countries" value="countries">
    {{#each countries_display as |countries|}}
      <option data-tokens="{{countries.id}},{{countries.display}}" value="{{countries.id}}"> {{countries.display}} </option>
    {{/each}}
  </optgroup>
{{/if}}
{{#if cities_display}}
  <optgroup label="Cities" value="cities">
    {{#each cities_display as |cities|}}
      <option data-tokens="{{cities.display}}" value="{{cities.id}}"> {{cities.display}} </option>
    {{/each}}
  </optgroup>
{{/if}}

 

When I run the app. The select box is empty.

 

I comfirmed that the data was fetched and put into countries_display/cities_display.

I am thinking this is because template is rendered before data is fetched, but I have no idea how I can trigger event before renderer. Or it could no be a cause.

 

It would be really great if anyone has any idea to show options in select box.

Outcomes