FormBuilder accessing second-level attributes (dot notation) - mongodb

Question

I'm using Angular2's FromBuilder to build a query to send to my backend (MongoDB). The problem is, I'm trying to access second-level attributes. For example I have a Song which has a Genres array in it. I want to access genres.hipHop for example but I can't set a form group to genres.hipHop. All I can do is use one word.
Here is an example of a query I want to build
{
"where": {
"and": [
{"genres.house": {"exists": "true"}}
]
},
"order": "created DESC"
};
My FormBilder looks like this:
this.queryForm = this._formBuilder.group({
where: this._formBuilder.group({
and: this._formBuilder.array([
this._formBuilder.group({
genres : this._formBuilder.group({ <-- need it be genres.hipHop
exists: true
})
})
]),
order: 'created DESC',
})
});
Which creates:
{
"where": {
"and": [
{"genres": {"exists": "true"}}
]
},
"order": "created DESC"
};
I can't add the .hipHop after genres.
I tried nesting the genres(hipHop) inside of genres but when I send it to my backend, it doesn't recognize hipHop. This is the query that was built:
{ "where": {
"and": [
{ "genres":
{ "hipHop": { "exists": true } }
}
],
"order": "created DESC" }
}
This was the error I got:
"MongoError: unknown operator: $hipHop\n
Here is an example of a song object:
{
"title": "Sweet Talk feat. Quinn XCII (Evan Gartner Remix)",
"artist": "Academy",
"audio": "https://api.soundcloud.com/tracks/270500010/stream?client_id=90d140308348273b897fab79f44a7c89",
"image": "https://i1.sndcdn.com/artworks-000168676452-qkxqul-t500x500.jpg",
"download": "http://stereoload.com/academy/quinn-xcii-x-academy-sweet-talk-evan-gartner-remix",
"url": "http://soundcloud.com/academy401/sweettalkremix",
"created": "2016-12-13T09:21:28.071Z",
"genres": {
"hipHop": 30,
"house": 30,
"pop": 40
},
"rank": 0
}
Thank you!

Answer 1

I don't think you'll be able to use the dot notation here, as it won't be a valid key.
Looking at this line in the source:
https://github.com/angular/angular/blob/2.4.1/modules/%40angular/forms/src/form_builder.ts#L75
It looks like Angular iterates over the keys to build the controls. As you can't do "x.y" as a key in javascript, this fails.
Example
var x = {y.z = "a"} //--> Uncaught SyntaxError: Unexpected token .
I think you'll have to make another set of keys inside your genre FormGroup -- one of the keys could be hiphop, for instance. Which might be what you're looking to do anyway if there are more genres you want to add :)
EDIT:
Example --
this.queryForm = this._formBuilder.group({
where: this._formBuilder.group({
and: this._formBuilder.array([
this._formBuilder.group({
genres : this._formBuilder.group({
hiphop : this._formBuilder.group({
exists: true
})
})
})
]),
order: 'created DESC',
})
});

Answer 2

Did you tried define object key as a string "genres.hipHop"?
this.queryForm = this._formBuilder.group({
where: this._formBuilder.group({
and: this._formBuilder.array([
this._formBuilder.group({
"genres.hipHop" : this._formBuilder.group({
exists: true
})
})
]),
order: 'created DESC',
})
});