获取对象 ID 并插入会话存储 Angular答案

【问题标题】：Grab object id and insert into session storage Angular获取对象 ID 并插入会话存储 Angular
【发布时间】：2017-12-11 20:34:39
【问题描述】：

我有一个控制器，它根据第一个下拉框的选择填充第二个下拉框，尽管 WebStorm 将其视为语法错误，但效果很好。我知道想将格式 fname 的 ID 发布到我的会话存储中以在其他地方使用，但是我尝试了下面的代码，我看到 Value as

[对象对象]

如果我使用

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，例如，如果选择员工你得到 bill、bob 和 tom，那么在你选择一个之后，将打印出选定的名称和 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>

【问题讨论】：

标签： javascript angularjs session-cookies

【解决方案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。

【讨论】：

好的，很高兴虽然字符串 atm 不仅仅是 ID，但当我修复这个错误接受时，+1 为您提供明星信息
这是最好的答案，我只需要找到一种方法来获取id
我扩展了答案来解决id的问题
刚刚看到，谢谢伙计。距离周末还有几个小时。我一破解它就会接受答案。我会用 html 方面更新我的问题
啊，刚刚阅读了您关于无法访问数组中 id 的更新，好的，谢谢您的帮助。

【解决方案2】：

所以我使用了上面的答案，但为了获得我必须使用这个的 id

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

@Bolza 的回答很好，但我需要更多，所以继续挖掘和试验

【讨论】：