Добавление значений JS obj в div

Question

У меня есть объект JavaScript , и я пытаюсь добавить каждый из его названий курсов в модальный клонированный. Нажатие на категорию (т.е. животных) открывает модальное окно, которое показывает описание для животных, а нажатие на другую категорию отображает другое описание. Я хочу, чтобы на Животных нажимали и чтобы в модале отображались курсы «Лошадь», «Бурундук», «Сапсан» и т. Д.

У меня возникают некоторые проблемы, когда я пытаюсь 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 - только отдельные объекты в массиве . Используя такой индексатор, как [0], вы выбираете первый элемент в массиве, чтобы вы могли затем выбрать свойство результатов.

В зависимости от источника данных или 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)