Limiting results from a "local" JSON file in Ember. In my 2.5 weeks of fast Ember learning, I found a quick and (probably) dirty way to limit results from this JSON file that I'm working with.

question.hbs

{{!-- component --}}

{{#each questions as |question|}}
    <li class="question">
      <header class="question-header">
        <div class="question-status">
          {{#if question.correct}}
            <span class="icon-correct"></span>
            <span class="visually-hidden">correct</span>
            {{else}}
            <span class="icon-incorrect"></span>
            <span class="visually-hidden">incorrect</span>
          {{/if}}
        </div>
        <h3 class="question-title">Question {{question.id}}</h3>
          <button class="toggle-trigger unstyled">
            <span class="icon-collapse"></span>
            <span class="visually-hidden">collapse/expand</span>
          </button>
      </header>
        <div class="question-content">
          <div class="question-meta">
            <span class="eligible-content">{{question.eligible_content}}</span>
            <span class="dok-level">{{question.dok_level}}</span>
          </div>
          <div class="question-text">
            {{{question.text}}}
          </div>
          <div class="question-asset graph">
            <img src="{{question.asset_path}}" alt="{{question.asset_alt}}" />
          </div>

          <ul class="question-choice-group">
            {{#each question.choices as |qc|}}
              <li class="question-choice">
                {{#if qc.correct}}
                  <span class="icon-correct"></span>
                  <span class="visually-hidden">Correct</span>
                  {{else}}
                  <span class="icon-incorrect"></span>
                  <span class="visually-hidden">Incorrect</span>
                {{/if}}
                <span class="answer-text">{{qc.text}}</span>
              </li>
            {{/each}}
          </ul>
        </div>
    </li>
{{/each}}

results.hbs

{{!-- template --}}

<ol>
  {{toggleable-result-question questions=model}}
</ol>

results.js

// route

import Ember from 'ember';

export default Ember.Route.extend({
  model: function() {
    return $.getJSON('data/questions.json').then(function(data) {
      return data.questions.slice(0,3);
    });
  }
});