Access to Ember component data from within component template

Question

I'm trying to figure out Ember.js so that I'm not manually manipulating the DOM, and using handlebars instead.

I'm trying to get access to the component's data within the component's template so that I can iterate over the data and build a table. If this isn' the Ember way, please let me know. I don't have the data set in a model, store, or in the route. Everything is done in the component "issue-data".

Here is the component and its template:

 import Ember from 'ember'; export default Ember.Component.extend({ runAll: null, csvData: null, initTable: function() { function buildTable() { var csvFile; Ember.$.ajax({ url: 'open_issues_data/open_issues_data.csv', dataType: 'text', async: false, success: function(response) { csvFile = response; }, error: function(err) { console.log(err); } }); Papa.parse(csvFile, { complete: function(results) { csvFile = results.data; this.csvData = csvFile; } }); /* Uncomment when ready to implement filter options = { valueNames: ["issue_number", "customer_id", "date_reported", "location"] }; var myList = new List("table-div", options); */ } buildTable(); }.on('didInsertElement'), didInsertElement() { this.runAll = Ember.run.later(this, function() { this.initTable(); this.runAll = Ember.run.later(this, this.runAll, 60000); }, 60000); }, didDestroyElement() { Ember.run.cancel(this.runAll); } }); 

 <div id="table-div"> <input class="search" placeholder="Filter by your input"> <button class="sort" data-sort="issue_number">Sort by Issue #</button> <table id='data-table' class='table table-striped table-bordered'> <tbody id='table-body' class="list"> {{#each row in issue-data.csvData}} <tr> {{#each column in row}} <td>{{column}}</td> {{/each}} </tr> {{/each}} </tbody> </table> </div> {{yield}} 

Here is the template for the route:

 <h2>Open Issues Data</h2> {{issue-data}} {{outlet}} 

Answer 1

Figured it out when digging through the docs: https://guides.emberjs.com/v2.7.0/models/

There is a better way, but Ember's own doc says you can assign a key to the data with this.set(); In order to get the right "this", I kept the scope by using a new variable:

 var _component = this; var csvFile; Ember.$.ajax({ url: 'open_issues_data/open_issues_data.csv', dataType: 'text', async: false, success: function(response) { csvFile = response; }, error: function(err) { console.log(err); } }); Papa.parse(csvFile, { complete: function(results) { csvFile = results.data; this.csvData = csvFile; _component.set('issues', this.csvData); } }); 

 <div id="table-div"> <input class="search" placeholder="Filter by your input"> <button class="sort" data-sort="issue_number">Sort by Issue #</button> <table id='data-table' class='table table-striped table-bordered'> <tbody id='table-body' class="list"> {{#each issues as |issue|}} <tr> {{#each issue as |column|}} <td>{{column}}</td> {{/each}} </tr> {{/each}} </tbody> </table> </div> {{yield}}