javascript - 根据先前生成的父对象生成子元素

Question

所以，JavaScript 新手。目前，我有两个不同的对象类，如下所示“ parent ”和“ child ”。这些父对象通过函数 BuildObjects 打印到页面上。这很好用。但是，我还希望根据每个对象的类别将子对象打印到父对象中。

示例代码:

Parents=[];
Children=[];
Parent=function(name,desc)
{
    this.name=name;
    this.desc=desc;
    Parents[this.name]=this;
}

new Parent('Example 1','Example desc 1');
new Parent('Example 2','Example desc 2');
new Parent('Example 3','Example desc 3');

Child=function(name,desc,parentname)
{
    this.name=name;
    this.desc=desc;
    this.parentname=parentname;
    Children[this.name]=this;
}

new Child('Example 1 Child 1','Example desc 1','Example 1');
new Child('Example 1 Child 2','Example desc 2','Example 1');
new Child('Example 1 Child 1','Example desc 3','Example 2');
new Child('Example 2 Child 2','Example desc 4','Example 2');

function BuildObjects() {
    var out = '';
    for (var i in Parents) {
        out += '<p id="' + Parents[i].category + '">' + Parents[i].name + '</p><p>' + Parents[i].desc + '</p><p>';
    }
    document.getElementById("textcontainer").innerHTML = out;
}

我该如何去做呢？实现这一点最容易扩展的方法是什么？我想过在父对象中创建一个子对象，但我不太确定如何去做，或者是否可能。任何帮助将非常感激!

Answer 1

为了便于访问，您可以维护另一个元对象，该对象将根据其类别对子对象进行分组，然后使用它来打印子对象

Parents = {};
Children = {};
ChildrenCatMap = {};
Parent = function (name, desc, category) {
    this.name = name;
    this.desc = desc;
    this.category = category;
    Parents[this.name] = this;
}

new Parent('Example 1', 'Example desc 1', 'category1');
new Parent('Example 2', 'Example desc 2', 'category2');
new Parent('Example 3', 'Example desc 3', 'category3');

Child = function (name, desc, category) {
    this.name = name;
    this.desc = desc;
    this.category = category;
    Children[this.name] = this;
    if (!ChildrenCatMap[category]) {
        ChildrenCatMap[category] = [];
    }
    ChildrenCatMap[category].push(this);
}

new Child('Example 1', 'Example desc 1', 'category1');
new Child('Example 2', 'Example desc 2', 'category1');
new Child('Example 3', 'Example desc 3', 'category2');
new Child('Example 4', 'Example desc 4', 'category2');

function BuildObjects() {
    var out = '',
        children;
    for (var i in Parents) {
        out += '<p id="' + Parents[i].category + '">' + Parents[i].name + '</p><p>' + Parents[i].desc + '</p>';
        children = ChildrenCatMap[Parents[i].category];
        if (children) {
            out += '<ul>';
            for (var j in children) {
                out += '<li id="' + children[j].category + '">' + children[j].name + '</p><p>' + children[j].desc + '</li>';
            }
            out += '</ul>';
        }
        out += '<p>';
    }
    document.getElementById("textcontainer").innerHTML = out;
}
BuildObjects();

演示:Fiddle