CODEWITHSUNDEEP
javascript
draxx7
draxx7

Reputation: 15

Generating child elements based upon a previously generated parent object

So, new to JavaScript. Currently, I have two separate classes of objects, as represented below by "Parents" and "Children." These parents are printed to the page with the function BuildObjects. This works fine. However, I'd also like to have the Children objects be printed into the Parent object, based upon each object's category.

Example code:

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

How would I go about doing this? What would be the most easily extensible way of implementing this? I've thought of creating a child object within the parent object, but I'm not quite sure how to go about that, or if that's even possible. Any help would be very much appreciated!

Upvotes: 0

Views: 84

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

For ease of access you can maintain another meta object which will group the children based on its category, then use it to print the children

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();

Demo: Fiddle

Upvotes: 1

Related Questions