Какими циклами надо пройтись по массиву, чтобы была возможность дописывать недостающие элементы?

Question

[MaxYenot]

Нужно было во фронтенд получить данные гугл таблицы. Это получилось.
Таблица выглядит так:
https://docs.google.com/spreadsheets/d/1371WG6WudE...

Но при запросе json этой таблицы, гугл выдаёт вот такой вот фарш:
https://spreadsheets.google.com/feeds/cells/1371WG...

ОК. Если прицепиться к event-у ответа, который приходит при AJAX запросе и обратиться srcElement.response.feed.entry, то мы получит массив с объектами. И каждый объект соответствует ячейке в таблице.

Вот пример

var request = new XMLHttpRequest();
    request.responseType = "json";
    request.open("GET", "https://spreadsheets.google.com/feeds/cells/1371WG6WudEXfukqMMakOTJSK_P33cOyXOG69LoN8tyg/1/public/full?alt=json");
    request.onload = (req) => {
		console.log(req.srcElement.response.feed.entry)
    }

    request.send();

Теперь самое весёлое. Если ячейка не пустая, то гугл отправляет её в виде объекта.
Но, если ячейка пустая, он тупо с ней ничего не делает!!!

Например, вторая строка в таблице:
id : 1
english: WHAT could possibly explain what's going on?
translation: ПУСТО
video: 01
video_format: .mp4

Но у гугла только 4 объекта для второй строки:

Что мне не удалось сделать...

Мне нужет массив с объектами вроде этого:

var cards = [
{id: "1", english: "Some English sentence, if there is one", translation: "Перевод, если он есть", video: "01", video_format: ".mp4"}
]

Но я не знаю как пройтись по элементам того, что прислал гугл, и если не хватает каких-то ячеек, то убрать в соответствующее поле в объекте просто пустую строку.

До этого я скачивал гугл таблицу в формате .csv. Потом онлайн преобразовывал в .json, загружал .json на хостинг и к нему уже обращался. Не было никаких проблем.
Получилось как-то так:
https://maxyenot90.tmweb.ru/ACCOUNTING/json-test/

Но очень хотелось бы, чтобы править в гугл таблице что-то, и сразу же изменения появлялись на сайте.

Answer 1

[Alams Stoyne]

Например так:

var result = [];
var request = new XMLHttpRequest();
    request.responseType = "json";
    request.open("GET", "https://spreadsheets.google.com/feeds/cells/1371WG6WudEXfukqMMakOTJSK_P33cOyXOG69LoN8tyg/1/public/full?alt=json");
    request.onload = (req) => {
       let gscell =  req.srcElement.response.feed.entry.map( (e) => e.gs$cell);
       let col_row = parseInt(gscell[gscell.length-1].row)+1;
       let i = 1;
       while (i < col_row) {
          let res_row = gscell.filter( e => parseInt(e.row) == i);
          this_row = {};
           this_row.id = ( res_row.filter( e => parseInt(e.col) == 1).length) ?  res_row.filter( e => parseInt(e.col) == 1)[0].inputValue : null;
           this_row.english = ( res_row.filter( e => parseInt(e.col) == 2).length) ? res_row.filter( e => parseInt(e.col) == 2)[0].inputValue : null;
           this_row.translation = ( res_row.filter( e => parseInt(e.col) == 3).length) ? res_row.filter( e => parseInt(e.col) == 3)[0].inputValue : null;
           this_row.video = ( res_row.filter( e => parseInt(e.col) == 4).length) ?  res_row.filter( e => parseInt(e.col) == 4)[0].inputValue : null;
           this_row.video_format = ( res_row.filter( e => parseInt(e.col) == 5).length) ?  res_row.filter( e => parseInt(e.col) == 5)[0].inputValue : null;
           result.push(this_row);
          i++;
       }    
        console.log(result);
    }

request.send();

Comments

[MaxYenot]

Ого! Я бы такое никогда не написал. Спасибо большое!
Осталось только полазить по документации и поискать непонятные конструкции.

Answer 2

[Alexander Ivanov]

Интересно, что неправильно заданный вопрос приводит к таким сложным последствиям.

То, что вы используете, является устаревшим Google Data API. Вам же нужно использовать Google Sheets API.

Код

const getUrl = (id, range, key) =>
  `https://sheets.googleapis.com/v4/spreadsheets/${id}/values/${range}?key=${key}`;
const arrToCollect = (array) =>
  array
    .slice(1)
    .map(
      (_, ri) =>
        array[0].reduce((ah, h, ci) => ((ah[h] = array[ri + 1][ci]), ah), {}),
      []
    );

(async () => {
  const id = '1xTXNtfabGIiFR9PdOQonmnlSPbhGcj_2Geo1v0cq4Gw';
  const range = 'Sheet';
  // Limited to the use of the contributor.pw/* domain
  const key = 'AIzaSyCt4F7Z8cVDqivNcO3slXewThZurJ4gJNY';
  let res = {};
  try {
    res = await fetch(getUrl(id, range, key));
    const data = JSON.parse(await res.text());
    console.log(data.values);
    console.log(arrToCollect(data.values));
  } catch (err) {
    console.error(err);
  }
})();

Комментарии

getUrl - функция для формирования адреса запроса к API.
arrToCollect - функция преобразования двухмерного массива в массив объектов. Я ее просто копирую, поэтому она такая плотная. Подробно https://github.com/contributorpw/google-apps-scrip... К сожалению, из-за блокировки я не могу прислать вам прямую ссылку на сайт. См. (если не лень) https://apps-script-snippets.contributor(dot)pw/snippets/common_js/2darray_to_collection/
В данном примере нужно будет создать проект в Google Cloud Console и сгенерировать API ключ, чтобы ограничить доступ и количество запросов.

Результат



Попробовать вживую https://github.com/contributorpw/contributorpw/tre.... К сожалению, из-за раздутого ЧСВ Швабры, по ссылке нужно будет нажать еще одну ссылку.

Comments

[MaxYenot]

Да уж.. Если предыдущий код был для меня сложен, то этот вообще жесть.

[MaxYenot]

А вы не проводите уроки или консультации по .js и Google сервисам?

[Alexander Ivanov]

MaxYenot, в профиле сайт, на сайте контакты.

[Alexander Ivanov]

MaxYenot, добавил немного пояснений.