Lazy loading huge json data in polymer
I have a JSON file that contains a large amount of data that is causing an HTML page to stop responding when retrying.
I am using Polymer and iterating over JSON data inside a template.
Is there a way that I can iterate using lazy loading so that I don't have to load all the data at the same time?
Below is my HTML file for the element.
<polymer-element name="flash-card">
<template id="k">
<style>
flip-card {
width: 200px;
height: 200px;
}
</style>
<core-ajax id='ajaxCard'
url='../api/gre_questions.json'
on-core-response="{{onResponse}}"
handleAs='json'></core-ajax>
<div horizontal layout wrap style="width: 100%">
<template repeat="{{words in json}}">
<flip-card axis="y" class="flip-card">
<front style="background:#232343">
<div style="overflow:hidden">{{words.word}}</div>
</front>
<back>
<div style="overflow:hidden">
{{words.meaning}}
</div>
</back>
</flip-card>
</template>
</div>
</template>
<script>
Polymer("flash-card",{
json: null,
ready: function () {
this.$.ajaxCard.go();
},
onResponse: function (e, detail, sender) {
this.json = detail.response;
}
});
</script>
</polymer-element>
+3
source to share
1 answer
<core-ajax id='ajaxCard' url='../api/gre_questions.json' on-core-response="{{onResponse}}" handleAs='json' ></core-ajax>
<core-list data="{{json}}" style="width:100%; height: 100%">
<template>
<div >
<button></button>
<core-collapse>
<div class="collapse-content">
{{model.word}} : {{model.meaning}}
</div>
</core-collapse>
</div>
</template>
</core-list>
+2
source to share