Only get first level object

Question

I have my object selected via a selection box printed out on the page as the user selects the option.

However it currently prints the parent object and all other objects nested within the parent object.

A 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 just want to see the Pname so the top level objects eg parent, parent2, parent3 so on not the children objects.

How can I alter this to just show the top level object?

@George answer almost works

difficulty my second drop down should be populated with the child objects of the selected parent and the final string should read as following if select parent from first option then second child from second option.

ProductType: Pname: parent, formatType: Fname: child

**Angular code for both boxes, second populated with 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>

...and this doesn't have anything to do with JSON (or Jason). — JJJ, Jun 02 '17 at 10:43
yes spelling error on my behalf thanks for seeing that, how ever I think voting down on a simple spell error is a bit much — Beep, Jun 02 '17 at 10:44
The downvote is very unlikely to be because you used jason in place of json. — Jamiec, Jun 02 '17 at 10:45
It's not clear what you're asking- what do you expect to see in your `pre`? — Karl Reid, Jun 02 '17 at 10:45
@KarlReid I only want to see my top level json, ill alter the question to explain better — Beep, Jun 02 '17 at 10:47
See https://stackoverflow.com/a/3975890 and https://stackoverflow.com/q/383692 - what you have there is an array of objects. It's not JSON (which would be a string). — JJJ, Jun 02 '17 at 10:48
@JJJ I think most people make that mistake because the properties of the object are inside quotes, which makes it look JSONish. — George, Jun 02 '17 at 10:54
@George true, I was thinking its Json inside JS, but now I understand its just a array of objects — Beep, Jun 02 '17 at 11:05
@Beep You've said you want your object to come out like `{"ProductType":{"Pname":"parent"}}` but is this necessary or can you have it like `{"ProductType":"parent"}`? — George, Jun 02 '17 at 11:06
@George either is fine, i just cant have the child object printing out — Beep, Jun 02 '17 at 11:13

George · Accepted Answer · 2017-06-02T11:53:11.927

2

If you read the documentation on ngOptions you can use select as to specify was object gets set on the ngModel

For the second select I suggest having an ng-change on the first select to store that object in another variable on the scope that you can use for the second select.

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
  $scope.productsandformats = [{
    "Pname": "parent",
    "format": [{
      "Fname": "child",
      "id": "4"
    }, {
      "Fname": "second child",
      "id": "5"
    }]
  }];

  $scope.formats = [];

  $scope.productTypeChange = function() {
    $scope.formats = $scope.productsandformats.find(ps => ps.Pname == $scope.formData.ProductType.Pname);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    <select ng-model="formData.ProductType.Pname" ng-change="productTypeChange()" ng-options="product.Pname as product.Pname for product in productsandformats">
    <option value="">- Please Choose -</option>
  </select>
    <select ng-model="formData.formatType" ng-options="format.Fname for format in formats.format" ng-if="formData.ProductType.Pname">
    <option value="">- Please Choose -</option>
  </select>
    <pre class="col-sm-12 ng-binding">
   {{ formData }}
   </pre>
  </div>

</div>

edited Jun 02 '17 at 11:53

answered Jun 02 '17 at 11:02

George

6,630
2
29
36

Looks good, will need to spend a few minuets altering it for my code as i have two selection boxes the second is populated depending on the firsts selection. +1 for the link and info. – Beep Jun 02 '17 at 11:19
@Beep Alright, I've edited the code to include if you want it to be output as `{"ProductType":"parent"}` – George Jun 02 '17 at 11:33
that was quick. ill try and update my code now, thanks – Beep Jun 02 '17 at 11:36
sorry just seen the working snipet. So the first box is the parent selction, the second should be the child of the parent selection – Beep Jun 02 '17 at 11:39
1

@Beep see my edit. Next time please post your entire problem. – George Jun 02 '17 at 11:47
Looks good @George and apologises for the mishap before, ill get this working with my code and accept your answer. Thanks enjoy your weekend. – Beep Jun 02 '17 at 11:49
1

@Beep it's not problem, you might want to relook at the code I've posted as I noticed the first select box wasn't tracking correctly. Thanks, I shall when I get off of work :) Hope you enjoy yours too. – George Jun 02 '17 at 11:54

score 0 · Answer 2 · answered Jun 02 '17 at 10:55

0

You can access first level object like this

<div ng-repeat='p in formData.productType'>
{{p.pname}}
</div>

answered Jun 02 '17 at 10:55

Gohel Dhaval

820
1
8
12

Only get first level object

2 Answers2