Я могу получить объект, но не его свойства в JS

Question

У меня есть ul, где список заполнен содержимым из массива Category. Мне нужно получить доступ к другому свойству для соответствующего объекта на основе li, по которому щелкнули (хотя, если бы я мог получить его индекс в ul, этого также было бы достаточно, но я не нашел способа сделать это).

Если я запускаю:

var thisCategoryObject = filteredCategories.filter(value => value.name == selectedCategory)[0];
console.log(thisCategoryObject);

Однако при этом возвращается ошибка.

var thisCategoryObject = filteredCategories.filter(value => value.name == selectedCategory)[0];
console.log(thisCategoryObject.sizeType);

Ошибка типа: undefined не является объектом (оценивается как thisCategoryObject.sizeType)

Это, вероятно, глупый вопрос, но кто-нибудь знает, что мне не хватает? Я также не могу получить доступ к другим свойствам этого объекта.

Дополнительный контекст ниже:

class Category {
constructor(name, parent, sizeType) {
    this.name = name;
    this.parent = parent;
    this.sizeType = sizeType;
}
}


var categories = [

// Contains a long list of category objects, some of which are sub-categories of others.
new Category("Electronics", null, null),
..
new Category("Video Gaming Merchandise", "Gaming", null),
..
new Category("Jeans", "Women", "womenTrousers"),
]

// Then the function that renders the appropriate categories, filters the children and displays them once a parent is selected. What I need is to get the .sizeType of the selected category.

var ul = document.getElementById("categories");
var selectedCategory;
var isFashionCategory;
var filteredCategories = [];


function renderCategories(categoryArray){
    for (i in categoryArray) {
        var li = document.createElement("li");

        li.appendChild(document.createTextNode(categoryArray[i].name));

        li.onclick = function () {
            selectedCategory = this.textContent;
            localStorage.setItem('selectedCategory', selectedCategory);

            // This will find the Category object with the name of the selectedCategory in the filteredCategories array
            var thisCategoryObject = filteredCategories.filter(value => value.name == selectedCategory)[0];
            console.log(thisCategoryObject.sizeType);

            this.parentElement.innerHTML = '';
            filteredCategories = categories.filter(value => value.parent == selectedCategory)

            if (filteredCategories.length != 0) {
                renderCategories(filteredCategories);
            } else {
                // window.location.href = '../index.html';
            }
        };

        ul.appendChild(li);
    }        

}


var startCategories = categories.filter(value => value.parent == null)
renderCategories(startCategories);

Answer 1

Согласно вашему коду, filteredCategories всегда [] первая итерация l oop, следовательно, вы получаете это сообщение. Более того, filteredCategories = categories.filter(value => value.parent == selectedCategory) вернет [] несколько раз, когда вы получите то же сообщение в следующей итерации того же l oop

Answer 2

Если выбранное вами значение не соответствует должным образом, оно выдаст ошибку. Когда это соответствует должным образом, это будет работать должным образом. Посмотрите на этот пример:

var category = [{
    name: "Women",
    parent: "Fashion",
    sizeType: "Large"
}]



var thisCategory = category.filter(value => value.name == "Women")[0];
console.log(thisCategory.sizeType); //Large