将JS obj值附加到div中时出现问题

Question

我有一些使用template.复制的div，每个div包含一个JS对象值，然后单击任何一个div会打开一个模式。我也已将obj值（称为“类别标题”）添加到模式中，但遇到了一个问题：

1. Here's div容器的外观。

2. 如果我单击first container（称为“动物”），它将在控制台中显示为undefined。

3. 如果我单击next container（“颜色”），则会看到动物数据。在控制台中，还会显示“动物”。

基于下面的代码，为什么Animals的第一个对象值没有附加到第一个div上？如果我不得不猜测它与0有关，那么我不知道为什么。

JS代码段：

// irrelevant code
]).then(axios.spread((cat, lib, admn) => {
     _categories = cat.data.d.results;

     this.loadCategories();

loadCategories(){

    let categs = _categories;

    let $host = $("#host");
      for (var i = 0; i < categs.length; i++) {
          let $template = $("#template").clone();
          $template.find(".cat-box > .cat-title").text(categs[i].Title);
          $("#cat-box-id").attr("data-category", categs[i].Title)
          $host.append($template.html());
          console.log(categs[i].Title)
      }

$("#modal-id").on("show.bs.modal", function(evt) {

   $(".modal-title").attr("data-category", categs);
        let test = $(evt.relatedTarget).data("category");

        $(".modal-title").empty();
        $(".modal-title").text(test);

        console.log(test); // ----- clicking on first div shows 'undefined'
})

HTML片段：

<div id="template" style="display:none">
      <div class="cat-box" id="cat-box-id" data-target="#modal-id" data-toggle="modal">
          <h3 class="cat-title"></h3>
      </div>
</div>

<!----- Modal snippet ----->

<div class="modal-title" id="exampleModalLabel"></div>