javascript - 将 JS obj 值附加到 div 中

Question

我有一个JavaScript object我正在尝试将其每个类(class)标题附加到克隆的模式中。单击类别(即动物)会打开一个显示动物描述的模式，单击不同的类别会显示不同的描述。我想要的是点击“动物”，并且类(class)“马”、“花栗鼠”、“游隼”等显示在其模式中。

当我尝试console.log类(class)以便查看它们时，我遇到了一些问题。

这样做:

trainingCrs = _categories[0].Courses.results.map(x => x.Title) // Works but only shows the Course Titles associated with Animals, as expected with the [0]

但是正在做:

allTrain = _categories.Courses.results.map(x => x.Title) // Get an error saying 'results' are undefined

结果显示为未定义是否有原因？我不确定为什么 _categories[0].Courses 有效，但 _categories.Courses 无效。

以下是我将描述和标题附加到我的 div 中的方法:

axios.get([abs-url] + "/getByTitle('Categories')/items?$select=Title,Description,Courses/Title,SortOrder&$expand=Courses&$orderby=Title&$top=1000",
            {
                method: "GET",
                credentials: "include",
                mode: "no-cors",
                headers: {
                    "Accept": "application/json; odata=verbose"
                }
            }),
]).then(axios.spread((cat) => {
        _categories = cat.data.d.results;
    // irrelevant info here
        this.loadCategories();
    })).catch(error => {
        console.log(error);
    });


loadCategories(){
        let categs = _categories,

            trainingCrs = _categories[0].Courses.results.map(x => x.Title)
            // allTrain = _categories.Courses.results.map(x => x.Title)
            console.log(trainingCrs);
            // console.log('allTrain' + allTrain);

        let catBoxElems = "";
            for (var i = 0; i < categs.length; i++) {
                catBoxElems += 
                "<div class='cat-box cat-num-" + i + "'data-target='#modal-id' data-toggle='modal' data-desc='" + categs[i].Description + "'data-crs='" + trainingCrs[i] + "'data-title='" + categs[i].Title + "'>" + catPic + "<br>" + categs[i].Title + "</div>";
            } // trainingCrs[i].Title returns 'undefined', trainingCrs[i] does nnothing

            $(document).find("#modal-id").off("shown.bs.modal").on("shown.bs.modal", function(e) {
                $(document).find(".modal-title").html($(e.relatedTarget).data("title"));
                $(document).find(".category-desc").html($(e.relatedTarget).data("desc"));
                $(document).find(".training-titles-ul").html($(e.relatedTarget).data("crs")); // ------------------- //
            }).on("hidden.bs.modal", function(e) {
                $(document).find(".modal-title").html("");
            });

        let container = document.querySelector("div.top-training");
        container.innerHTML = catBoxElems;
        console.log(container);

        $(".modal-img").append(catPic)
    }

HTML 片段:

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

    <div class="modal-body">
      <div class="category-desc">
        <p></p>
      </div>
      <div class="training-titles">
       <ul class="training-titles-ul"></ul>
      </div>
    </div>

Answer 1

因为_categories是一个对象数组。数组上没有属性 results - 只是 array 中的各个对象。 。使用像 [0] 这样的索引器选择数组中的第一项，以便您可以选择 results 属性。

根据您从中检索 _categories 的数据或 API 的来源，始终获取第一个元素/类别可能是完全可以的。许多 API 的返回集合仅包含一项，然后您必须解析或单步执行以提取数据。

简单示例

class Result {
 constructor(title) {
  this.Title = title
 }
}

class Category {
 constructor(category) {
  this.Category = category
  this.Results = []
 }
}
// create a sample category
const category1 = new Category("Test")

// add a fake result set
category1.Results.push(new Result("Result 1"))

// build an array to hold our sample objects
const _categories = []
_categories.push(category1)

// here is your _categories array 
console.log(_categories)

// notices how Results don't live on the array itself
console.log(_categories.Results)

// but Results do live on the first item in the array
console.log(_categories[0].Results)