What is the best way to add a new value to an object without replacing the existing one in the key-value pair?

Question

What is the best way to add a new value to an object without replacing the existing one in the key-value pair?

Currently, I am in the process of developing an application that will save and display a user's name and score. The main challenge I am facing is figuring out how to update the existing data with new information without losing the previous entries. Below is a snippet of the relevant code:

// persistence
savedPlayerData = JSON.parse(localStorage.getItem("playerData") || "[]");

function storePlayerData() {
  localStorage.setItem("playerData", JSON.stringify(playerData));
}

// player name and score object
const playerData = {playerName: "", score: ""}

// function for updating the playerData object...
// ...once the save button is clicked in another part of my script
function setPlayerNameAndScore() {
  username = playerName.value
  playerNameLabel.classList.add("hide");
  playerName.classList.add("hide");
  saveScoreButton.classList.add("hide");

  playerData["playerName"] = username;
  playerData["score"] = finalScore

  storePlayerData();
}

Currently, each time a user chooses to save their name and score, the storePlayerData() function simply overwrites any previously saved data. Ideally, I would like to have a structure where multiple player names and scores can be stored and associated correctly. This way, I can later showcase them on a high scoreboard.

How can I modify my local storage data to resemble this format?

const playerData = {playerName: "player1", "player2", score: "90", "100"}

. Any advice or guidance on achieving this functionality would be greatly appreciated!

javascript local-storage

Answer 1

Answer №1

I personally believe restructuring the playerData would be beneficial. My suggestion is to format it like this: {player_1: 90, player_2: 80}.

This way, each player has a key-value pair where the key represents the player and the value represents their score.

You can stringify this data and store it in local storage easily. When adding a new player, you can simply do:

playerData['player_3'] = 50, resulting in playerData becoming:

{player_1: 90, player_2: 80, player_3: 50}

.

This approach solves the issue of adding players without overwriting existing ones.

Your previous structure may have been designed for sorting purposes. However, you can still create a leaderboard by following these steps:

// Convert the data to a list.
leaderbord = []
for (playerScore in playerData) {
    leaderbord.push([playerScore, playerData[playerScore])

// Sort the list based on the second element of each element.
for (playerScore in playerData) {
    leaderbord.push([playerScore, playerData[playerScore]])
    leaderbord.sort((a,b) => b[1]-1[1])
}

Answer 2

I personally believe restructuring the playerData would be beneficial. My suggestion is to format it like this: {player_1: 90, player_2: 80}.

This way, each player has a key-value pair where the key represents the player and the value represents their score.

You can stringify this data and store it in local storage easily. When adding a new player, you can simply do:

playerData['player_3'] = 50, resulting in playerData becoming:

{player_1: 90, player_2: 80, player_3: 50}

.

This approach solves the issue of adding players without overwriting existing ones.

Your previous structure may have been designed for sorting purposes. However, you can still create a leaderboard by following these steps:

// Convert the data to a list.
leaderbord = []
for (playerScore in playerData) {
    leaderbord.push([playerScore, playerData[playerScore])

// Sort the list based on the second element of each element.
for (playerScore in playerData) {
    leaderbord.push([playerScore, playerData[playerScore]])
    leaderbord.sort((a,b) => b[1]-1[1])
}

Answer 3

Answer №2

One approach is to use the username as a unique identifier and assign the score as its corresponding value

const userScores = {};
let username1 = 'fernando';
userScores[username1] = 45;
let username2 = 'luis';
userScores[username2] = 5;

Answer 4

One approach is to use the username as a unique identifier and assign the score as its corresponding value

const userScores = {};
let username1 = 'fernando';
userScores[username1] = 45;
let username2 = 'luis';
userScores[username2] = 5;

What is the best way to add a new value to an object without replacing the existing one in the key-value pair?

Answer №1

Answer №2

Similar questions

Queries surrounding the use of useState in React.js function components

Using jQuery to locate the closest class and display a div

Encountering a challenge in React where state cannot be modified while developing a Like Button

Transforming a JSON file that has been previously converted to an Observable into a TypeScript map within an Angular application

Validating forms using Jquery before submitting data through Ajax across multiple forms

How to resolve a Cross-Origin Resource Sharing (CORS) error when trying to access a local JSON file

Tips for positioning text on the left and right sides of a div in HTML styling

Searching for a way to display just a portion of a rendered HTML page using JavaScript

Each slider only displays a single database entry

Building an Empty AngularJS Response with the Combination of Spring Boot and MongoDB

Achieve the effect of making the Bootstrap JS Collapse text bold after it has been

Reduce the size of the profile picture in the Facebook like box

Learn how to extract an ID created with AngularJS using JavaScript

Nuxt middleware failing to verify user's logged-in status

Instead of modifying the selected class, jQuery generates inline styles

What is the best way to bring a list from one .js file into my main.js file?

Having difficulty accessing the API response accurately

What is the best way to restrict the maximum number of items stored in local storage?

What is the best way to extract the ID from a dynamic "ul" tag?

Avoid the problem of animations triggering twice when clicking