抓取對象ID並將其插入會話存儲Angular

Question

我有一個控制器，該控制器根據第一個下拉框的填充來填充第二個下拉框，盡管WebStorm將其視為語法錯誤，但此方法運行良好。 我知道想要將fname格式的ID發布到我的會話存儲中以在其他地方使用，但是我嘗試了下面的代碼，我看到Value為

[對象對象]

如果我用

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

和

未定義

如果我用

sessionStorage.setItem（'format'，$ scope.formats.id）;

我也嘗試過

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

我什么也沒有得到，即使是空值

如何正確將ID添加到會話存儲中的格式值中？

完整代碼

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);

}

}）;

為了進一步說明我如何獲取ID，下面的代碼使用戶可以從名稱類型中選擇一個fname，例如，如果選擇職員，您將獲得帳單，鮑勃和湯姆，然后在選擇它之后，將打印出選定的名稱並fname包括fname id，fname id是我需要發送到會話存儲的內容

的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

您不能存儲object ，只能存儲string 。

要存儲一個對象，您需要對其進行“字符串化”。

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

然后要檢索它，您需要解析它

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

從MDN Storage / setItem

storage.setItem(keyName, keyValue);

keyName一個DOMString，其中包含要創建/更新的密鑰的名稱。

keyValue一個DOMString，包含要提供要創建/更新的鍵的值。

關於查找ID

當你做

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

您將獲得具有此結構的對象

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

所以我想id包含在item.format[0].id用於第一個項目，以此類推。

format是一個數組，因此，如果您不先選擇所需的數組元素（例如format[0] ），就無法直接訪問id 。

Answer 2

所以我使用了上面的答案，但是要獲得ID我必須使用它

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

@Bolza的回答很好，但我需要更多，所以請繼續進行挖掘和試驗