Handling large JSON file with iron-ajax, iron-list and loading via iron-scroll-threshold

Question

I'm trying to load a large JSON file into my view which has over 1000 items and I would like the view to import only 20 at a time. Everytime I use iron-list it only renders 3 items until I resize the window and then loads all the items in the json at once.

Any idea how I can render 20 items first and then as I scroll to the bottom, I get more items?

Thanks.

<dom-module id="fetch">
  <template>
    <style>
      :host {
        display: block;
      }
      paper-card{
        margin-bottom: 1em;
        padding: 1em;
      }
    </style>
    <h2>Hello [[prop1]]</h2>
    <content class="horizontal">
      <paper-material>
          <iron-ajax
              auto
              url="/some.json"
              handle-as="json"
              last-response="{{ajaxResponse}}"
              debounce-duration="300"></iron-ajax>

<iron-scroll-threshold on-lower-threshold="loadMoreData" id="threshold">
        <iron-list items="[[ajaxResponse]]" scroll-target="threshold">
          <template>
            <paper-card>
              <div id="card-content">
                <h4>User:{{item.val}}</h4>
                <h4>{{item.val2}}</h4>
              </div>
              <div class="card-action">
                <paper-button>Icon</paper-button>
                <paper-button>Like</paper-button>
                <paper-fab>Open</paper-fab>
              </div>
            </paper-card>
          </template>
        </iron-list>
      </iron-scroll-threshold>
      </paper-material>
    </content>
  </template>

  <script>

    Polymer({
      is: 'fetch',

      properties: {
        prop1: {
          type: String,
          value: 'fetch'
        },
      }
    });
  </script>
</dom-module>

Answer 1

I assume that the container ( <content class="horizintal> ) of your iron-list does not have an explicit size, which can cause issues.

According to the docs

Important: iron-list must either be explicitly sized, or delegate scrolling to an explicitly sized parent. By "explicitly sized", we mean it either has an explicit CSS height property set via a class or inline style, or else is sized by other layout means (eg the flex or fit classes).

alternatively you can fire a resize event when you set the data:

document.querySelector('iron-list').fire('iron-resize');