Как я заполнил vaadin-grid функцией fetch?

Я использую lit-element и vaadin-grid для создания таблицы. это очень похоже на этот пример. https://stackblitz.com/edit/grid-renderers?file=grid-demo.js

Однако он продолжает говорить мне, что у меня синтаксическая ошибка введите здесь описание изображения

Я не могу понять, почему. Я вижу, как запрос проходит и отправляет результат обратно.

Вот некоторый код из моего элемента.

  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>

        `;

    }

Вот образец моего ответа

{"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"}]}

Если я уберу mode: 'no-cors', то я получаю эти ошибки. введите здесь описание изображения


person Ben-Coden    schedule 20.09.2019    source источник


Ответы (1)


В документации для `no-cors указано, что

Кроме того, JavaScript не может получить доступ к каким-либо свойствам результирующего ответа.

что означает непрозрачный результат. Поэтому, когда в сообщении об ошибке предлагается использовать no-cors, если непрозрачный результат соответствует вашим потребностям, на самом деле он не соответствует вашим потребностям, поскольку не читается.

Возможно, этот ответ поможет.

person Erik Lumme    schedule 21.09.2019
comment
Это не имело никакого отношения к моему коду JS. Мне нужно было настроить API для CORS. docs.microsoft.com/en-us/ aspnet/ядро/безопасность/ - person Ben-Coden; 23.09.2019