How did I populate vaadin-grid with fetch?

Question

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

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.

score 0 · Accepted Answer · answered Sep 21 '19 at 08:35

0

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.

answered Sep 21 '19 at 08:35

Erik Lumme

5,202
13
27

It had nothing to do with my JS code. I needed to set my API up for CORS. https://learn.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-2.2 – Ben-Coden Sep 23 '19 at 12:46

How did I populate vaadin-grid with fetch?

1 Answers1