Как вывести только значение конкретной ячейки таблицы на Tilda

При работе с Tilda и Zero Block разработчики часто сталкиваются с задачей: нужно отобразить не всю таблицу из JSON, а только одно значение из определённой ячейки. В этой инструкции мы разберём, как модифицировать код, чтобы вывести конкретную ячейку, и избежать лишних данных на странице.

Проблема: отображается вся таблица, а нужна одна ячейка

Исходный код обычно содержит полный JSON с массивом данных, который рендерится в HTML-таблицу. Если вы размещаете такой код в Zero Block на Tilda, то видите всю таблицу целиком. Чтобы вывести только значение из конкретной ячейки, необходимо изменить логику обработки данных: вместо цикла по всем строкам и столбцам - обратиться к элементу по индексу.

Решение: доступ к ячейке через индексы массива

Предположим, у вас есть JSON вида:

{
  "rows": [
    ["Имя", "Возраст", "Город"],
    ["Анна", "28", "Москва"],
    ["Иван", "35", "СПб"]
  ]
}

Чтобы вывести, например, возраст Анны (строка 1, столбец 1), нужно обратиться к data.rows[1][1]. В коде это будет выглядеть так:

const data = JSON.parse(jsonString);
document.getElementById('output').innerText = data.rows[1][1]; // выведет "28"

Пошаговая настройка в Zero Block

• Шаг 1. Вставьте ваш JSON-код в блок Tilda через Zero Block.
• Шаг 2. Замените весь код рендеринга таблицы на одну строку обращения к ячейке.
• Шаг 3. Укажите правильные индексы строки и столбца (начиная с 0).
• Шаг 4. Выведите результат в нужный HTML-элемент (например, <div id="output"></div>).

Пример готового кода для Tilda

<div id="cell-value"></div>
<script>
  var jsonData = {
    "rows": [
      ["Товар", "Цена", "Количество"],
      ["Ноутбук", "75000", "10"],
      ["Мышь", "1500", "50"]
    ]
  };
  // Выводим цену ноутбука: строка 1, столбец 1
  var value = jsonData.rows[1][1];
  document.getElementById('cell-value').innerText = value;
</script>

Этот код выведет на странице только число 75000 - цену ноутбука, без отображения всей таблицы.

Работа с динамическими данными на Tilda

Если ваш JSON загружается с сервера или формируется динамически, используйте fetch или XMLHttpRequest. После получения данных обратитесь к нужной ячейке по индексу. Важно: убедитесь, что индексы соответствуют структуре вашего JSON, иначе получите ошибку undefined.

Также можно использовать метод flat(), если данные одномерные, или find() для поиска по условию. Например, чтобы найти цену товара по названию:

var product = jsonData.rows.find(row => row[0] === 'Мышь');
var price = product ? product[1] : 'Не найдено';

Этот подход удобен, когда индексы строк заранее неизвестны.