Как добавить элемент в словарь в JS?

Question

Я изучаю JS и застрял в какой-то точке. В основном у меня есть словарь, и я хочу обновлять этот словарь всякий раз, когда нажимается кнопка, и пользователь вводит некоторые данные в командной строке. Как-то не могу обновить словарь.

    "use strict";



let views = {View1:"From localStorage"};

let btn = document.getElementById("myBtn")
btn.addEventListener("click",function(){
    let vname = prompt("What is the name of the new view?")
    views[vname] = vname + " 77"

})





let views_ser = JSON.stringify(views)
localStorage.setItem("views",views_ser);

let views_deser = JSON.parse(localStorage.getItem("views"))

for (let keys in views_deser){

    document.write(keys + "<br>")
    document.write(views_deser[keys]+ "<br>")
}

Спасибо.

Answer 1

"use strict";

const views = {View1:"Original entry"};

const btn = document.getElementById("myBtn")
btn.addEventListener("click",function(){
    let vname = prompt("What is the name of the new view?")
    views[vname] = vname + " 77"
    updateOutput("list");
})

const updateOutput = (outputContainerID) => {

 const output = document.getElementById(outputContainerID)
 if(!output){
  return;
 }
 
 let outputHTML = '';
 
 Object.keys(views).forEach( key => {
      outputHTML += `<li>${key}: ${views[key]}</li>`;
 });
 
 output.innerHTML = outputHTML;

}

updateOutput("list");

<button id="myBtn">Add</button>

<hr>

<ul id="list"></ul>

Вам необходимо обновлять вывод каждый раз, когда вы добавляете элемент. Для этого переместите "выходные данные" в функцию, чтобы вы могли вызывать ее каждый раз, когда добавляется элемент (и один раз в начале тоже).

Например, поскольку localStorage не хорошо работают в песочницах, я изменил его, чтобы просто сохранить ваше хранилище в переменной. Но это будет работать так же с localStorage.

Answer 2

Это не ответ - вы уже сами все поняли! - но кое-что, чтобы проиллюстрировать использование фрагментов SO. Чтобы сконцентрироваться на «добавлении чего-либо в словарь», вот демонстрация первой части вашего кода:

let views = {View1:"From localStorage"};

let btn = document.getElementById("myBtn")
btn.addEventListener("click",function(){
let vname = prompt("What is the name of the new view?")
views[vname] = vname + " 77"
console.log(views); // show current state of "views" dictionary
})

<button id="myBtn">add view</button>