back render

adapters.application.js

import Adapter from 'ember-data/adapters/rest';

export default Adapter.extend({
  namespace: 'v2',
  host: 'https://api.punkapi.com'
});

components.my-component.js

import Ember from 'ember';

export default Ember.Component.extend({
  items: [],
  computedArr: Ember.computed.filterBy('items', 'name'),
  index: Ember.computed('computedArr.[]', function() {
  return this.get('computedArr').map(i => i)
})
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

models.beer.js

import Model from "ember-data/model";
import attr from "ember-data/attr";
import { belongsTo, hasMany } from "ember-data/relationships";

export default Model.extend({
  name: attr('string')
});

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
   return this.store.findAll('beer')
  }
});

serializers.application.js

import DS from 'ember-data';

export default DS.JSONAPISerializer.extend({
  normalizeResponse(store, primaryModelClass, payload, id, requestType) {
    let beers = payload;
    
    payload = {
      meta: {},
      data: beers.map(beer => ({
        id: beer.id, 
        type: 'beer',
        attributes: {
          name: beer.name
        }
      }))
    };
    
    return this._super(store, primaryModelClass, payload, id, requestType);
  },
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{my-component
  items=model
}}
{{outlet}}
<br>
<br>

templates.components.my-component.hbs

{{index}}

{{yield}}

twiddle.json

{
  "version": "0.10.7",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.10.0",
    "ember-data": "2.10.0",
    "ember-template-compiler": "2.10.0",
    "ember-testing": "2.10.0"
  },
  "addons": {}
}