Ember JS and Iterating without effecting the count of the results

Question

I'm using Ember JS and i don't know if my approach to achieve the thing i want is true or maybe there is another way. If there is a better way please tell me.

Now I have a model named "visit" among the data it stores is the "time" of the visit

Now the time is set through a hard-coded service loop in select tag.

I want the user to select the date of the visit "a query is sent to the database with the selected date to get the visits in that date" then I want to compare the time in the results of the query with the array provided in my service and remove the similar one's. Ergo the pre-selected time isn't available.

I tried to loop in the template for the service data then another loop for the "visit" query and added an "if" statement in the class of the time display to add "disabled" if the two values equal each other.

The problem here is that the loop shows me the data twice now or maybe thrice affected by the results found in the query.

I think there is another approach by simply handling the data in the "visit" query to simply remove the matched data from the service and the results, but I'm not sure how to do so.

Here is my template

{{#each formData.time as |time|}}
    {{#each disabledTime as |disabled|}}
        {{#if (eq disabled.value time.value)}}
            <button class="disabled">{{time.time}}</button>
        {{else}}
            <button {{action 'addTime' time}} class="btn-success">{{time.time}}</button>
        {{/if}}
    {{/each}}
{{/each}}

And Here is my controller

formData : Ember.inject.service(),
store : Ember.inject.service(),
disabledTime : Ember.computed("model.issueDate", function(){
    return this.get('store').query('visit', { where : { issueDate : this.get('model.issueDate') } } );
}),

Is there a better way to handle the data in the "disabledTime" so I take the data from the service "formData.time" and remove the similar data then return the data that doesn't match. Because this way it looks simpler and I can make the loop in the template through a "select" tag instead of the buttons.

Answer 1

If your query return an array, and your FormatDate.time too, what about setDiff ?

you would have something like :

formData: Ember.inject.service(),
store: Ember.inject.service(),
disabledTime: Ember.computed("model.issueDate", function(){
    return this.get('store').query('visit', { where : { issueDate : this.get('model.issueDate') } } );
}),
availableTime: Ember.setDiff('formData.times', 'disabledTime')

and use it in your template

<select>
    {{#each availableTimes as |time|}}
        <option value=time.time>{{time.time}}</option>
    {{/each}}
</select>