如何在 JS 中的字典中添加元素？

Question

I am learning JS and I am stuck at a point. Basically I have a dictionary and I want to update that dictionary whenever a button is clicked and the user enters some data in prompt. Some how I can't update the dictionary.

    "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>")
}

Thanks.

Answer 1

This is not an answer - you already got it right yourself. - but something to illustrate the use of SO snippets: To concentrate on the "adding something to a dictionary" here is a demo of the first part of your code:

 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>

Answer 2

 "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>

You need to update the output every time you add an item. To do this, move the "output stuff" into a function so you can call it every time an item is added (and once at the beginning, too).

For the example, since localStorage does not work well in sandboxes, I changed it to just keep your storage in a variable. But it would work the same way with localStorage .