Как создать HTML-шаблон руля с использованием данных вложенного словаря

Я пытаюсь собрать электронное письмо в формате HTML, содержащее оповещения приложений, на которые подписан пользователь. Есть 2 категории: «Услуги» и «Запросы».

Каждая категория представляет собой словарь с динамическими именами приложений. Каждое имя приложения также будет словарем с динамическими типами предупреждений. Эти типы предупреждений будут представлять собой массив, содержащий сообщение предупреждения и метку времени.

Я безуспешно пытался использовать примеры lookup keyMap, которые нашел в Интернете.

Конечный результат, я надеюсь, будет выглядеть примерно так:

ТАБЛИЦА HTML

У меня есть настройка скрипки с данными: СКРИПКА

JSON

{
  "Requests": {
    "Division Map Layers": {
      "Upvotes": [
        {
          "createdAt": "2023-05-08T22:12:35.500Z",
          "alert_message": "Rudy Sanchez upvoted"
        }
      ],
      "Tagged Users": [
        {
          "createdAt": "2023-05-08T22:12:44.211Z",
          "alert_message": "Rudy Sanchez tagged a user: Shawn Anderson"
        },
        {
          "createdAt": "2023-05-08T22:12:53.947Z",
          "alert_message": "Rudy Sanchez tagged a user: Jesse Brown"
        }
      ],
      "Products": [
        {
          "createdAt": "2023-05-08T22:13:05.908Z",
          "alert_message": "Rudy Sanchez added a product: Product 2"
        }
      ]
    },
    "ShutInTasks Tree": {
      "Tagged Users": [
        {
          "createdAt": "2023-05-08T22:13:25.232Z",
          "alert_message": "Rudy Sanchez tagged a user: Carol Evans-Danver"
        },
        {
          "createdAt": "2023-05-08T22:13:42.864Z",
          "alert_message": "Rudy Sanchez removed a tagged user: Carol Evans-Danver"
        }
      ]
    }
  },
  "Services": {
    "Map Services": {
      "Metadata": [
        {
          "createdAt": "2023-05-08T22:08:23.370Z",
          "alert_message": "Rudy Sanchez updated metadata"
        }
      ],
      "Messages": [
        {
          "createdAt": "2023-05-08T22:12:15.914Z",
          "alert_message": "Rudy Sanchez created a message: Testing first message"
        },
        {
          "createdAt": "2023-05-08T22:14:00.856Z",
          "alert_message": "Rudy Sanchez reacted to Rudy Sanchez's message: Testing first message"
        }
      ]
    },
    "iCompressor": {
      "CoSponsors": [
        {
          "createdAt": "2023-05-08T22:11:41.169Z",
          "alert_message": "Rudy Sanchez cosponsored"
        }
      ],
      "Timeline": [
        {
          "createdAt": "2023-05-08T22:11:51.192Z",
          "alert_message": "Rudy Sanchez created a timeline: Q1-2023"
        },
        {
          "createdAt": "2023-05-08T22:11:59.421Z",
          "alert_message": "Rudy Sanchez created a timeline: Q3-2023"
        }
      ]
    }
  }
}

Я могу изменить структуру данных, если это упростит задачу. У меня есть другая рабочий пример, в которой я пытаюсь что-то другое. Это работает, за исключением того, что я не могу понять, как поместить несколько категорий предупреждений в одно и то же приложение. Я могу показать только одно" "Метаданные", "Сообщения" и т.д...

Другая структура данных

Что такое keyPairs? Пожалуйста, опубликуйте ожидаемый HTML, а не делитесь ссылкой.

— 09.05.2023 04:48

javascript html handlebars.js css-tables

09.05.2023 02:01

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Это, безусловно, можно сделать с имеющейся у вас структурой данных, вам просто нужно использовать переменную данных @key, чтобы получить имена категорий, приложений и типов предупреждений, потому что все они являются объектными ключами в ваших данных. состав. Нет необходимости выполнять какие-либо поиски, потому что на каждом уровне мы используем @key в качестве заголовка, а затем перебираем объект по каждому ключу. Когда мы добираемся до массива предупреждений, мы перебираем его и печатаем значения alert_message и createdAt в ячейки нашей таблицы.

const template = Handlebars.compile(document.getElementById('Template').innerHTML);

const data = {
  "Requests": {
    "Division Map Layers": {
      "Upvotes": [
        {
          "createdAt": "2023-05-08T22:12:35.500Z",
          "alert_message": "Rudy Sanchez upvoted"
        }
      ],
      "Tagged Users": [
        {
          "createdAt": "2023-05-08T22:12:44.211Z",
          "alert_message": "Rudy Sanchez tagged a user: Shawn Anderson"
        },
        {
          "createdAt": "2023-05-08T22:12:53.947Z",
          "alert_message": "Rudy Sanchez tagged a user: Jesse Brown"
        }
      ],
      "Products": [
        {
          "createdAt": "2023-05-08T22:13:05.908Z",
          "alert_message": "Rudy Sanchez added a product: Product 2"
        }
      ]
    },
    "ShutInTasks Tree": {
      "Tagged Users": [
        {
          "createdAt": "2023-05-08T22:13:25.232Z",
          "alert_message": "Rudy Sanchez tagged a user: Carol Evans-Danver"
        },
        {
          "createdAt": "2023-05-08T22:13:42.864Z",
          "alert_message": "Rudy Sanchez removed a tagged user: Carol Evans-Danver"
        }
      ]
    }
  },
  "Services": {
    "Map Services": {
      "Metadata": [
        {
          "createdAt": "2023-05-08T22:08:23.370Z",
          "alert_message": "Rudy Sanchez updated metadata"
        }
      ],
      "Messages": [
        {
          "createdAt": "2023-05-08T22:12:15.914Z",
          "alert_message": "Rudy Sanchez created a message: Testing first message"
        },
        {
          "createdAt": "2023-05-08T22:14:00.856Z",
          "alert_message": "Rudy Sanchez reacted to Rudy Sanchez's message: Testing first message"
        }
      ]
    },
    "iCompressor": {
      "CoSponsors": [
        {
          "createdAt": "2023-05-08T22:11:41.169Z",
          "alert_message": "Rudy Sanchez cosponsored"
        }
      ],
      "Timeline": [
        {
          "createdAt": "2023-05-08T22:11:51.192Z",
          "alert_message": "Rudy Sanchez created a timeline: Q1-2023"
        },
        {
          "createdAt": "2023-05-08T22:11:59.421Z",
          "alert_message": "Rudy Sanchez created a timeline: Q3-2023"
        }
      ]
    }
  }
};

const output = template(data);

document.body.innerHTML = output;

.mega-menu {
  border: 1px solid aquamarine;
  padding: 8px;
  font-family: sans-serif;
}
.main {
  font-size: 24px;
  font-weight: bold;
  color: red;
  margin-bottom: 16px;
}
.app-div {
  margin-left: 20px;
}
.app-name {
  font-size: 18px;
  font-weight: bold;
  color: blue;
  margin-bottom: 8px;
}
.alert-name {
  font-size: 16px;
  font-weight: bold;
  color: green;
  margin-bottom: 4px;
}
table {
  width: 100%;
  margin-bottom: 8px;
}

table,
th,
td {
  border: 1px solid lightgrey;
  border-collapse: collapse;
}

th,
td {
  padding: 2px 4px;
}

th {
  font-size: 12px;
  text-align: left;
  color: grey;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.min.js"></script>
<script id = "Template" type = "text/template">
<div class = "mega-menu">
  {{#each this}}
    <div>
      <div class = "main">{{@key}}</div>
      {{#each this}}
        <div class = "app-div">
          <div class = "app-name">{{@key}}</div>
            {{#each this}}
              <div class = "alert-name">{{@key}}</div>
              <div class = "app-div">
                <table>
                  <thead>
                    <tr>
                      <th style = "width: 600px">Message</th>
                      <th style = "width: 100px">Date</th>
                    </tr>
                  </thead>
                  <tbody>
                    {{#each this}}
                      <tr>
                        <td>{{alert_message}}</td>
                        <td>{{createdAt}}</td>
                      </tr>
                    {{/each}}
                  </tbody>
                </table>
              </div>
            {{/each}}
          </div>
        {{/each}}
      </div>
    {{/each}}
  </div>
</script>

Я создал вилку вашей скрипки для справки.

09.05.2023 11:43