Question

我有一个JavaScript object，我正在尝试将其每个课程标题附加到已克隆的模式中。单击类别（即动物）会打开一个模式，其中显示了有关动物的描述，而单击其他类别将显示不同的描述。我要的是单击“动物”，然后以“模式”显示“马”，“花栗鼠”，“百富勤猎鹰”等课程。

尝试console.log这些课程时，我遇到了一些问题。

这样做：

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

是否有results出现未定义的原因？我不确定_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的return集合仅包含一项，然后您必须解析或逐步执行以提取数据。

简单示例

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)

将JS obj值附加到div

HTML片段：

1 个答案:

简单示例