如何使用 JavaScript 有选择地将用户输入存储在哈希图中

Question

我有一个将 JSON 文件作为参数的算法，如下所示：

{"quiz": {                
  "algorithm_id_1": "4",
  "algorithm_id_2": "2",
  "algorithm_id_3": "3", 
   // ...

algorithm_id 是输入字段的 id，后面的数字是用户为该输入字段选择的值（大部分是滑块）。

我的问题如下：

• 如果输入与另一个输入具有相同的 id，如何防止重叠？ （例如 "algorithm_id_1": "2", "3" 而不是 "algorithm_id_1": "2", ... "algorithm_id_1: "3"？

我目前正在获取每个输入字段的 id 及其对应的值，但每个响应都被存储为自己的对象。

const allInputs = $(":input");

// retrieve
for (var i = 0; i < allInputs.length; i++) {
  allInputs[i].value = localStorage.getItem(i);
}

// populate
jQuery(":input").change(function() {
  for (var i = 0; i < allInputs.length; i++) {
    localStorage.setItem(i, allInputs[i].value);

    // console.log($(":input").get(i).id);
    var map = {};
    var vals = allInputs[i].value;
    var keys = allInputs.get(i).id;
    map[keys] = vals;
    console.log(keys)
  }
});

上下文：我确信有更简单的方法可以做到这一点，但我仅限于我们当前的堆栈（Node.js 和 EJS），并且对我们正在使用的内容没有太多发言权。此功能的目的是收集用户的响应，然后将它们输入到推荐算法中。任何和所有的帮助将不胜感激。

Answer 1

你可以改变你的数据结构，使键数组的值像这样：

{
 quiz: {
   algorithm_id_1: [2,3],
   algorithm_id_1: [1,6],
   ...
 }
}

为此，您需要修改更新数据结构的方式。

基本上，您需要检查对象是否已经有一个名为“algorithm_id_1”的键，如果没有，则添加它并将其值设置为具有用户输入值的数组。如果已经存在，则将新输入的值推送到现有数组中。

在您的示例中，每次发生更改时都会重新创建地图，这并不理想，但我不会在这里解决。

jQuery(":input").change(function() {
  for (var i = 0; i < allInputs.length; i++) {
    // localStorage.setItem(i, allInputs[i].value);

    // this is the part your question seems to be concerned with
    var map = {};
    var key = allInputs.get(i).id
    var val = allInputs[i].value;

    // if the key already exists in the map
    if(map[key]){
        map[key].push(val)
    } else { // otherwise add it and set its value to an array of 1 entry
        map[key] = [val]
    }

    // this should now be an object of key values where the values are arrays
    console.log(keys)
  }
});

我实际上无法使用您的 jquery 代码测试该示例，但我相信它应该可以工作。