What is the process for including a new item in a JavaScript dictionary?

Question

What is the process for including a new item in a JavaScript dictionary?

I'm currently learning JavaScript and I've encountered a challenge. I have a dictionary that I'd like to update whenever a button is clicked and the user enters some data in a prompt. However, for some reason, I am unable to successfully 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>")
}

Appreciate any help on this. Thank you.

javascript arrays json dictionary

Answer 1

Answer №1

This is not an answer, as you have already correctly solved it yourself, but I want to showcase the use of SO snippets. To focus on the topic of "adding something to a dictionary," here is a demonstration of the initial 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); // display current status of the "views" dictionary
})

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

Answer 2

This is not an answer, as you have already correctly solved it yourself, but I want to showcase the use of SO snippets. To focus on the topic of "adding something to a dictionary," here is a demonstration of the initial 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); // display current status of the "views" dictionary
})

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

Answer 3

Answer №2

"use strict";

const data = {Entry1:"Initial data"};

const button = document.getElementById("myButton")
button.addEventListener("click",function(){
    let itemName = prompt("Enter the name of the new item:")
    data[itemName] = itemName + " 77"
    updateList("dataList");
})

const updateList = (listContainerID) => {

 const list = document.getElementById(listContainerID)
 if(!list){
  return;
 }
 
 let listHTML = '';
 
 Object.keys(data).forEach( key => {
      listHTML += `<li>${key}: ${data[key]}</li>`;
 });
 
 list.innerHTML = listHTML;

}

updateList("dataList");

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

<hr>

<ul id="dataList"></ul>

Ensure to refresh the list every time a new item is added. To achieve this, encapsulate the "list updating logic" within a function that can be invoked whenever an item is added (and once during initialization).

In this demonstration, due to limitations concerning localStorage, I opted for simply utilizing a variable for storage. However, the same functionality would apply seamlessly with localStorage.

Answer 4

"use strict";

const data = {Entry1:"Initial data"};

const button = document.getElementById("myButton")
button.addEventListener("click",function(){
    let itemName = prompt("Enter the name of the new item:")
    data[itemName] = itemName + " 77"
    updateList("dataList");
})

const updateList = (listContainerID) => {

 const list = document.getElementById(listContainerID)
 if(!list){
  return;
 }
 
 let listHTML = '';
 
 Object.keys(data).forEach( key => {
      listHTML += `<li>${key}: ${data[key]}</li>`;
 });
 
 list.innerHTML = listHTML;

}

updateList("dataList");

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

<hr>

<ul id="dataList"></ul>

Ensure to refresh the list every time a new item is added. To achieve this, encapsulate the "list updating logic" within a function that can be invoked whenever an item is added (and once during initialization).

In this demonstration, due to limitations concerning localStorage, I opted for simply utilizing a variable for storage. However, the same functionality would apply seamlessly with localStorage.

What is the process for including a new item in a JavaScript dictionary?

Answer №1

Answer №2

Similar questions

Duplicate user scrolling input within a specified div container

Monitor changes in the select tag to display the updated value and output

Challenges in creating an alternative path in ExpressJS

Using VueJS to apply filters to an object causes a decrease in my application's performance

Interfacing Electron Frontend with Python Backend through seamless communication

Unable to access MongoDB documents using NodeJS/Express

What is the best way to utilize $(target) within a directive?

Utilizing strings as data in Google charts with jQuery

The function will provide the value prior to the execution of the Jquery image loading

Struggling with the alignment of pictures inside a container

Encountering an error when attempting to parse a JSON Object in Java from an AJAX call

In WildFly, there is a clash of jackson-jaxrs providers when deploying an EAR file

Unusual issue in IE causing rendering problems in reporting services

Sending parameters to a personalized Angular directive

When using v-select to search for items, the selected items mysteriously vanish from

Functionality of setExtremes ceases to function post initial loading

Using AJAX to retrieve a specific JSON object from an array of JSON data

NodeJS: Extract images based on specified coordinates

The Issue of Double-Clicking on Table Cells in Internet Explorer 8

Unable to create account using PHP