I am currently developing a modal window to add data to a JSON file and then display that data in the DOM. The issue I'm facing is that while the data gets saved to the file successfully, it doesn't reflect immediately on the DOM. The technology stack used includes iron-ajax for handling asynchronous requests.
<div>
<iron-ajax
auto
url="areas.json"
handle-as="json"
last-response="{{response}}"
on-response="responseHandler"
></iron-ajax>
<div class="modal"></div>
<div class="layout vertical">
<div class="layout horizontal">
<template class="" id="esquema" is="dom-repeat" items="{{response}}" as="item">
<div class$="iron-flex {{item.type}}">{{item.name}}</div>
</template>
</div>
</div>
</div>
The snippet provided above shows how the data is fetched from the JSON file and rendered on the DOM. However, a specific function call is required to update the dom upon adding new data using the modal:
addData: function(){
var selectedItem = this.options[this.selectedIndex];
nuevo.push({"name": this.$.numberArea.value,
"level": "1",
"type": selectedItem.area});
this.$.numberArea.value = null;
this.$.areaSelect.selected = null;
},
In order to refresh the 'id="esquema"', I attempted calling this.$.esquema.render() within the function, but unfortunately, it didn't work as expected. Your guidance or suggestions on resolving this issue would be highly appreciated.
Thank you in advance for your support!