Grab object id and insert into session storage Angular

Question

I have a controller that populates a second drop-down box depending on the selection of the first, this works well although WebStorm sees it as a syntax error. I know want to post the ID of the format fname to my session storage to use else where, however I have tried the code bellow and I see Value as

[object Object]

if I use

sessionStorage.setItem('format', $scope.formats);

and

undefined

if I use

sessionStorage.setItem('format', $scope.formats.id);

I have also tried

sessionStorage.setItem('format', $scope.formats.formatType.id);

I get nothing not even a empty value

how do I correctly add the ID to my format value in my session storage ?

Full code

FirstModule.controller('dropDown', function ($scope) {

$scope.productsandformats = [
    {
        "name": "staff",
        "format": [
            {"Fname": "bill", "id": "1"},
            {"Fname": "bob", "id": "2"},
            {"Fname": "tom", "id": "3"}
        ]
    },
    {
        "name": "managers",
        "format": [
            {"Fname": "dick", "id": "4"},
            {"Fname": "jhon", "id": "5"}
        ]
    },

    {
        "name": "directors",
        "format": [
            {"Fname": "willy", "id": "6"}
        ]
    },


    {
        "name": "temp",
        "format": [
            {"Fname": "jeff", "id": "18"},
            {"Fname": "billy", "id": "19"}
        ]
    }];

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

    sessionStorage.setItem('format', $scope.formats.id);

}

});

To further more explain how I get the ID, The code bellow enables the user to select A fname from the name type for example if select staff you get bill, bob and tom then after you select one it,ll print out the selected name and fname including the fname id, the fname id is what i need to send to the session storage

HTML

<div class="radio col-sm-6" style="margin-top: 0 !important;">
    <label>
        <input type="radio" ng-model="formData.type" value="Create" >
        <span class="glyphicon glyphicon-unchecked">
        </span>
        Need to make a poster?
    </label>
</div>

<div class="radio col-sm-6">
    <label>
        <input type="radio" ng-model="formData.type" value="Preview">
        <span class="glyphicon glyphicon-eye-open">
        </span>
        Already have a poster?
    </label>
</div>

Answer 1

You cannot store an object , you can only store a string .

To store an object you need to "stringify" it.

var jsonItem = JSON.stringify($scope.formats);
sessionStorage.setItem('format', jsonItem);

Then to retrieve it you need to parse it

var item = sessionStorage.getItem('format');
item = JSON.parse(item)

From MDN Storage/setItem

storage.setItem(keyName, keyValue);

keyName A DOMString containing the name of the key you want to create/update.

keyValue A DOMString containing the value you want to give the key you are creating/updating.

About finding the ID

When you do

$scope.formats = $scope.productsandformats.find(ps => ps.name == 
 $scope.formData.ProductType.name)

You get an object with this structure

{
    "name": "staff",
    "format": [
        {"Fname": "bill", "id": "1"},
        {"Fname": "bob", "id": "2"},
        {"Fname": "tom", "id": "3"}
    ]
},

So i guess the id is contained inside item.format[0].id for the first item and so on for the subsequent items.

format is an array so you wont be able to directly access id if you don't first select which element of the array you want (eg. format[0] ).

Answer 2

So I used the answer above but to achieve the id I had to use this

 $scope.myFunc = function() {
        var jsonItem = JSON.parse($scope.formData.formatType.id);
        sessionStorage.setItem('format', jsonItem);
    }

@Bolza answer was good but I needed more so kept digging and experimenting