Search code examples
javascriptfetchvaadinvaadin-gridlit-element

How did I populate vaadin-grid with fetch?

I am using lit-element and vaadin-grid to make a table. it is very similar to this example. https://stackblitz.com/edit/grid-renderers?file=grid-demo.js

However, it keeps telling me I have a syntax error enter image description here

I can not figure out why. I can see the request coming through and sending a result back.

Here is some code from my element. 

  static get properties() {
    return {
        rolls: {
            type: Array
          }
    };
}



 firstUpdated() {
        fetch('http://localhost:2241/api/micrographics/claims/01P78168', {
           mode: 'no-cors'          
          }).then(r=>console.log(r)).then(r => r.json())
          .then(data => {
            this.rolls = data.result;
          });

    }  


render() {
        return html`


      <p>Search Edit Table</p>


      <vaadin-grid multiSort id="valo-grid" .items="${this.rolls}" >

        <vaadin-grid-sort-column resizable width="2em" path="ID" header="ID">
        </vaadin-grid-sort-column >

        <vaadin-grid-sort-column resizable width="2em" path="Roll" header="Roll No">
        </vaadin-grid-sort-column >

        <vaadin-grid-sort-column resizable width="3em" path="Frame" header="Frame No">
        </vaadin-grid-sort-column >

        <vaadin-grid-sort-column resizable .renderer="${this.editTextRender}" 
         path="PolicyOcc_No" header="Policy/OccNo" width="11em">
        </vaadin-grid-sort-column >

        <vaadin-grid-sort-column resizable .renderer="${this.editDateRender}"
        path="ScanDate" header="Scan Date" width="10em" >
        </vaadin-grid-sort-column >

        <vaadin-grid-sort-column resizable width="2em" path="CompanyBranch" header="Company">
        </vaadin-grid-sort-column >

        <vaadin-grid-sort-column resizable .renderer="${this.editDateRender}"
         path="PurgeDate" header="Purge Date" width="10em">
        </vaadin-grid-sort-column >

        <vaadin-grid-column width="6em" .renderer="${this._boundEditButtonRender}"></vaadin-grid-column>
      </vaadin-grid>

        `;

    }

Here is a sample of my response 

{"ResultList":[{"Id":"883","PolicyOcc_No":"01P168","CompanyBranch":"0","PurgeDate":"11/31/2019","ScanDate":"","Roll":"1057","Frame":"8","PolicyNo":" ","FileName":"cl.csv"},{"Id":"667","PolicyOcc_No":"01P78168/06","CompanyBranch":"01","PurgeDate":"12/31/2006","ScanDate":"05/19/2006","Roll":"452","Frame":"5","PolicyNo":"01P168","FileName":"cl.csv"}]}

If I take out mode: 'no-cors' then I get these errors. enter image description here

Solution

  • The documentation for `no-cors states that

    In addition, JavaScript may not access any properties of the resulting Response.

    which is what an opaque result means. So when the error message says to use no-cors if an opaque result fits your needs, it actually does not fit your needs, as it's not readable.

    Perhaps this answer is of help.