Populate an array of objects with various key-value pairs

Question

Populate an array of objects with various key-value pairs

In my @change method, I receive the following values:

 changeAttr(id, key, value) {
  const selections = [];
},

id can be any number, key could be: color, size, sex, etc..., and value could be: red, 8, female, etc. Initially, the values might look like this: id = 3, key = "color", value = "red". These values change when the user selects another option, for instance: id = 3, key = "sex", value = "female" or id = 5, key = "size", value = "50" ...etc

The goal is to dynamically populate an array of objects with these values as shown below:

selections = [{
              "3": { 
                  "color": "red",
                  "sex": "male",
                  "size": "40" 
              },
              {
          ...
               }];

If a key already exists for the same id in the array, I want to overwrite its value. If it doesn't exist, I want to add it for that particular id.

I hope this explanation is clear. Thank you for your time!

javascript vue.js

Answer 1

Answer №1

If you want to define properties in JavaScript, you can use array syntax like this:

For example,

let yourObject = {}

To define a property, you can use [] brackets

yourObject["color"] = "red"

Following the same logic, you can do:

yourObject[key] = value

A tip: It is not recommended to use integer strings as indexes because JavaScript reindexes arrays. It is better to construct your object in a structured way:

[
  {
    id: 3,
    color: "red",
    sex: "male",
    size: "40" 
  },
  {
    id: 5,
    color: "black",
    sex: "female",
    size: "36" 
  },
  {
    id: 8,
    color: "black",
    sex: "female",
    size: "36" 
  },
  ...
];

EDIT :

const selections = [];

function changeAttr(id, key, value) {
   
  // Get the index in selection by id
  let index = selections.map(t=>t.id).indexOf(id)
  
  
  if (index !== - 1) { // if the id have been found
  
      selections[index][key] = value // It create the index "key" if not found, and replace the value if found 
  
  } else { // if the id have not been found
    
    let tmp = {
      id: id
    }
    
    tmp[key] = value
    selections.push(tmp)
    
  } 
}

console.log(selections)
changeAttr(6, "color", "red")
console.log(selections)
changeAttr(3, "sex", "female")
console.log(selections)
changeAttr(6, "sex", "male")
console.log(selections)
changeAttr(6, "color", "yellow")
console.log(selections)

You can run snippet to see, I believe this is what you are searching for

Answer 2

If you want to define properties in JavaScript, you can use array syntax like this:

For example,

let yourObject = {}

To define a property, you can use [] brackets

yourObject["color"] = "red"

Following the same logic, you can do:

yourObject[key] = value

A tip: It is not recommended to use integer strings as indexes because JavaScript reindexes arrays. It is better to construct your object in a structured way:

[
  {
    id: 3,
    color: "red",
    sex: "male",
    size: "40" 
  },
  {
    id: 5,
    color: "black",
    sex: "female",
    size: "36" 
  },
  {
    id: 8,
    color: "black",
    sex: "female",
    size: "36" 
  },
  ...
];

EDIT :

const selections = [];

function changeAttr(id, key, value) {
   
  // Get the index in selection by id
  let index = selections.map(t=>t.id).indexOf(id)
  
  
  if (index !== - 1) { // if the id have been found
  
      selections[index][key] = value // It create the index "key" if not found, and replace the value if found 
  
  } else { // if the id have not been found
    
    let tmp = {
      id: id
    }
    
    tmp[key] = value
    selections.push(tmp)
    
  } 
}

console.log(selections)
changeAttr(6, "color", "red")
console.log(selections)
changeAttr(3, "sex", "female")
console.log(selections)
changeAttr(6, "sex", "male")
console.log(selections)
changeAttr(6, "color", "yellow")
console.log(selections)

You can run snippet to see, I believe this is what you are searching for

Answer 3

Answer №2

updatedValue =  { 
  "color": "blue",
  "gender": "male",
  "size": "42" 
 }


choices.forEach((item)=>{
  for(let property in item){
    if(item.hasOwnProterty(property)){
       // update existing value
    }else {
      // set the updatedValue 
    }
  }
})

Answer 4

updatedValue =  { 
  "color": "blue",
  "gender": "male",
  "size": "42" 
 }


choices.forEach((item)=>{
  for(let property in item){
    if(item.hasOwnProterty(property)){
       // update existing value
    }else {
      // set the updatedValue 
    }
  }
})

Populate an array of objects with various key-value pairs

Answer №1

Answer №2

Similar questions

React - z-index issue persists

What does drizzle.config.ts serve?

Can you explain the distinction between employing express.urlencoded() with extended set to true as opposed to setting it to false along with performing manual JSON stringify/parse calls?

Leveraging an HTML interface in conjunction with a node.js application

How can Swipe support help you slide a menu back in?

Locating elements with Selenium Webdriver using xpath

The function 'fileURLToPath' cannot be found in the __vite-browser-external export

Unleashing the power of Sinon: a guide to covertly observing the e

Utilize a vanilla JavaScript object as the primary model in Ember

The toggle function for the classList ('open') is functioning correctly and can be seen in the inspect element tool, however, the website is not displaying the associated style

What is the best way to ensure the network is idle after clicking on an element in puppeteer?

The React class component is throwing an unexpected error with the keyword 'this'

Unable to adjust the padding of a div while the Bootstrap 4 navbar is in a collapsed state on mobile devices

Leverage the power of PHP files within your JavaScript code

I am eager to create a Material-UI textfield using an array

What is the best way to showcase data in a table using React Js?

The package.json file is missing the "exports" main, causing the Error [ERR_PACKAGE_PATH_NOT_EXPORTED] to be displayed

Improving the way text entered in an input box is displayed using HTML table cells

Utilizing Mirth Connect to insert XML data into a MySQL database using JavaScript

Arrow function returns itself, not the function