将 JS obj 值附加到 div 中答案

【问题标题】：Appending JS obj values into a div将 JS obj 值附加到 div 中
【发布时间】：2019-04-29 14:19:08
【问题描述】：

我有一个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 sn-p:

<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>

【问题讨论】：

categories.map((cat) => cat.Courses.results.map(x => x.Title)).flat()

标签： javascript jquery html object key-value

【解决方案1】：

因为_categories 是一个对象数组。数组上没有属性results - 只是array 中的单个对象。使用[0] 之类的索引器选择数组中的第一项，以便您随后可以选择结果属性。

根据您从中检索 _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)

【讨论】：