Блог

Главная - Вопросы по программированию - табулятор: загрузка данных Google Sheets через Ajax

табулятор: загрузка данных Google Sheets через Ajax

#ajax #google-sheets #tabulator

#ajax #google-sheets #табулятор

Вопрос:

Я пытаюсь уже несколько дней и не могу понять, как загрузить документ Google Sheets в Tabulator.

Что я сделал:

  • Получение данных в формате JSON из документа Google Sheets
  • Добавлена библиотека табуляторов на этой странице
  • Но все еще получаю эти ошибки:
    • Ошибка загрузки Ajax — Ошибка подключения: 0
    • Ошибка загрузки Ajax: ответ {тип: «непрозрачный», URL: «», перенаправлено: false, статус: 0, ok: false, …}
  • И как я могу получить поля ‘entry’> ‘gsx $ naam’ — ‘Joan van den Akker — KAV Holland’ в столбец (ключ ‘gsx $ naam’ имеет объект ‘{«$ t»: «Joan van den Akker — KAV Holland»}’ в качестве значения, но мне нужно только имя …)

Мой код табулятора:

     var table = new Tabulator("#baanrecords", {
        ajaxConfig:{
            mode: 'no-cors',
            method:'GET',
            credentials: 'same-origin',
            headers: {
                'Content-type': 'application/json; charset=UTF-8',
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            },
        },
        ajaxURL: 'https://spreadsheets.google.com/feeds/list/1Ze31_SUFd0ZyqeG1mt1qrEU61onnYhmI9mR1BC1pM7Y/od6/public/values?alt=json',
        height:'400px',
        layout:'fitColumns',
        autoColumns:true,
        placeholder:'De records worden geladen, een moment...',
        index: 'onderdeelnaam',
        columns:[
            {title:"Onderdeel", field:"gsx$onderdeelnaam", sorter:"string", width:200},
            {title:"Prestatie", field:"gsx$prestatie", sorter:"number", formatter:"progress"},
            {title:"Eenheid", field:"gsx$prestatieeenheid", sorter:"string"},
            {title:"Naam", field:"gsx$naam", sorter:"string", align:"left", width:100},
            {title:"Categorie", field:"gsx$categorie", sorter:"string", sortable:true},
            {title:"Datum", field:"gsx$datum", sorter:"date", align:"left"},
            {title:"Plaats", field:"gsx$plaats", align:"right", sorter:"string"},
        ],
        ajaxResponse:function(url, params, response){
            //url - the URL of the request
            //params - the parameters passed with the request
            //response - the JSON object returned in the body of the response.
    
            return response.entry; //return the tableData property of a response json object
        },
    });
    table.setData("https://spreadsheets.google.com/feeds/list/1Ze31_SUFd0ZyqeG1mt1qrEU61onnYhmI9mR1BC1pM7Y/od6/public/values?alt=json");

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

Комментарии:

1. Я тоже получаю эти же ошибки. Вы нашли решение? Я не видел, чтобы приведенный ниже ответ был принят, поэтому не уверен, использовали ли вы это, и это сработало?

Ответ №1:

     bldgChange: function () {
      console.log(this.selected)
      this.tabulator.parameter = this.selected
      fetch('<API-URL>?Building='   this.selected)
        .then(response => response.json())
        .then(json => this.tabulator.setData(json.recordset))
    },

Я отказался от ajaxURL, поскольку у слишком многих людей возникали проблемы с ним и не было реальных решений. Это метод, который я создал для того, что мне было нужно. Возможно, вы сможете модифицировать его в соответствии с вашими потребностями.