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

Leveraging AngularJS $filter in conjunction with ng-disabled

What is the best way to incorporate this into a Vue project?

Guide on setting a property for req.session

Creating a Class in REACT

methods for transferring information from a website to a smartphone using SMS

Tips for testing a mapbox popup using jasmine testing?

unable to display items in the navigation bar according to the requirements

Focus on the original control that triggered a jQuery AJAX POST during a postback event

Is there a way to restrict the number of times I can utilize slideToggle function?

I encountered an issue with my PHP script when trying to interpret a JSON file

Instantly change the default value with Ajax selection

several JSON entities within fromJSON

Displaying mysqli results within a div while incorporating an onclick event for a javascript function that also includes another onclick event for a separate javascript function

Achieving success with the "silent-scroll" technique

Having trouble parsing a JSON object using the fetch method in React while trying to retrieve data from my database

Creating a Custom Select Option Component with Ant Design Library

"Displaying 'Object Object' as a title when hovering over an element

Issue with Node's jsonwebtoken library: jwt.sign() method fails to include payload in generated token

Tips for shifting a stuck div 200px upward once the bottom of the page is reached while scrolling:

Creating a time-limited personal link with Django Rest Framework and React