limiting results of foreach (getting only 3 results) using polymer

Question

I'm trying to limit foreach item. here it is my source :

<div class="build-failed">
    <h1 class="jenkins-status"><span data-bind="title"></span> FAILED</h1>
    <ul class="list-nostyle list-failed">
      <li data-foreach-item="failedJobs">
        <div class="label" data-bind="item.label"></div>
        <div class="value" data-bind="item.value"></div>
      </li>
    </ul>
</div>

<div class="build-succeeded">
    <h1 class="jenkins-status">All <span data-bind="title"></span> builds are successful</h1>
    <i class="fa fa-thumbs-o-up"></i>
</div>enter code here

<p class="updated-at" data-bind="updatedAtMessage"></p>

and I want to get only 3 results. I know that I have to add something in "data-foreach-item" but I don't know what is it.

Answer 1

With <iron-list>, your <ul> can be rewritten as

<ul>
    <iron-list items="[[failedJobs]]">
        <template>
            <li>
                <div class="label">[[item.label]]</div>
                <div class="value">[[item.value]]</div>
            </li>
        </template>
    </iron-list>
</ul>

Try and see if the property, maxPhysicalCount, can get you only three results ;)

Answer 2

I thought I would find an applicable filter in the documentation:

http://batmanjs.org/docs/filters.html

But I couldn't find one! first returns only one item and truncate works for strings only, so neither of those would work.

You can create your own filter:

https://www.softcover.io/read/b5c051f3/batmanjs_mvc_cookbook/html#sec-custom_filter

For example, to limit an array to three items:

Batman.Filters.limit = (array, limit) -> array?.slice(0, limit)

Then, use it in your binding:

<li data-foreach-item="failedJobs | limit 3">...</li>

(Hmm, I hope data-foreach works with filters!)

Anyhow, hope it helps :)