I currently have an object selected using a selection box that is displayed on the page when the user makes a choice.
However, at the moment, it prints not only the parent object but also all the nested objects within it.
An example of my array
$scope.productsandformats = [
{
"Pname": "parent",
"format": [
{"Fname": "child", "id": "4"},
{"Fname": "second child", "id": "5"}
]
}
];
My Angular and HTML selection box
<select ng-model="formData.ProductType"
ng-options="product.Pname for product in productsandformats">
<option value="">- Please Choose -</option>
</select>
<pre class="col-sm-12 ng-binding">
{{ formData }}
</pre>
So currently, when I select parent, I get:
{"ProductType":{"Pname":"parent","format":[{"Fname":"child","id":"4"},{"Fname":"second child","id":"5"}]}}
What I expect to see
{"ProductType":{"Pname":"parent"}}
What I need
I only want to display the Pname, such as parent, parent2, parent3, without including the children objects.
How can I modify this to show only the top-level object?
@George's answer almost works
The challenge is that the second dropdown should be populated with the child objects of the selected parent, resulting in the final string reading as follows if 'parent' is selected from the first option and 'second child' from the second option.
ProductType: Pname: parent, formatType: Fname: child
Angular code for both boxes, with the second one populated by children of the selected parent
<select ng-model="formData.ProductType"
ng-options="product.Pname for product in productsandformats">
<option value="">- Please Choose -</option>
</select>
<select ng-model="formData.formatType"
ng-options="format.Fname for format in formData.ProductType.format"
ng-if="formData.ProductType">
<option value="">- Please Choose -</option>
</select>