can not retrieve property of object from an objectID passed by html form

Question

I am using the mean stack (mongo/mongoose, ember, angular, node).

The database includes 2 schemas

var ChildSchema = new Schema({
    childName: {
        type: String,
        required: true,
        trim: true
    }
});
  
  
var ParentSchema = new Schema({
    parentName: {
        type: String,
        required: true,
        trim: true
    },
    child: {
        type: Schema.ObjectId,
        ref: 'Child'
    }
});

mongoose.model('Parent', ParentSchema);
mongoose.model('Child', ChildSchema);

There is an html form that allows the user to create a new Parent, the form has a select box that is populated with the children stored in the database and retrieved by findChildren() function.

The HTML is here:

<section data-ng-controller="ParentController" data-ng-init="findChildren()" >
    <form name="parentForm" class="form-horizontal col-md-6" role="form" data-ng-submit="create(parentForm.$valid)" novalidate>
        <div class="form-group" ng-class="{ 'has-error' : submitted && parentForm.config.$invalid }">
            <label for="child" class="col-md-2 control-label">child</label>
            <div class="col-md-9">
                <select ng-model="parent.child" ng-options="child as child.childName for child in childs"></select>
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-3 col-md-9">
                <button mean-token="'create-submit'" type="submit" class="btn btn-info">Submit</button>
           </div>
         </div>
    </form>
</section>

The html form shows the children's names as selectable items in the list and when the user presses the submit button, the controller in the node application receives the correct parent object ID. here is the controller code

create: function(req, res) {
        var parent = new Parent(req.body);
        
        parent.save(function(err) {
            if (err) {
                return res.status(500).json({
                    error: 'Cannot save the parent'
                });
            }

            res.json(parent);
        });
    }

the issue is that I am not able to display the childName when trying to show the list of parents in a table. Here is the HTML. All of the parents other information is shown

<section data-ng-controller="DevicesController" data-ng-init="findParents()">
    <table border="1" class="mytable">
        <tr>
            <td>oject</td>
            <td>Parent Name</td>
            <td>Child</td>
        </tr>
    
        <tr ng-repeat="parent in parents">
            <td>{{parent}}</td>
            <td>{{parent.parentName}}</td>
            <td>{{parent.child.childName}}</td>
        </tr>
    </table>
</section>

The expectation is that the parent.child.childName will display the childName of the referenced object. it returns a null. if i display 'parent.child', it will display the objectID

For example:

I have a child called ChildA.

When I view the html form to create a parent, i will enter ParentA for the name and select ChildA from the list.

When I press submit, the new Parent object will be created.

When i view the parent list, the table that is shown should show a row with ParentA and ChildA.

Right now it shows ParentA and a blank

Answer 1

parent.child would return the objectid which is correct, you need to use populate if you want to get the details of your reference.

I don't see the relavent code for findParents, you would basically do something like below:

    child.findOne({"_id": req.params.id}).populate('parent').exec(function (err, child) {
                if (err) {
                    res.status(403).json({
                        "status": "403",
                        "data": "Forbidden"
                    });
                } else {
                    res.status(200).json({
                        "status": "200",
                        "message": "Success",
                        "data" : child
                    });
                }
   });