Incorporate variable key-value pairs into a JavaScript array or object

Question

Incorporate variable key-value pairs into a JavaScript array or object

Is it possible to add a key value pair to an existing JavaScript associative array using a variable as the key? I need this for JSON encoding and prefer a simple solution over using plugins or frameworks.

ary.push({name: val});

In the above code snippet, ary represents a new array, name is the variable containing the key, and val holds the value of the entry.

I am implementing this within a loop using jQuery to iterate through form fields.

javascript json

Answer 1

Answer №1

Using Destructuring in ES6

When working with ES6, one can take advantage of the convenient destructuring assignment feature:

ary.push({[name]: val});

It's worth noting that as this is ES6 syntax, there may be compatibility issues with certain browsers, such as IE and Edge 13. Luckily, Babel can handle transpilation for you.

Supporting Legacy Browsers without ES6

If aiming to support legacy browsers without ES6 support, a different approach is required using square bracket notation:

var obj = {};

obj[name] = val;

ary.push(obj);

For a deeper understanding of the nuances between square bracket and dot notation, check out this informative article.

Answer 2

Using Destructuring in ES6

When working with ES6, one can take advantage of the convenient destructuring assignment feature:

ary.push({[name]: val});

It's worth noting that as this is ES6 syntax, there may be compatibility issues with certain browsers, such as IE and Edge 13. Luckily, Babel can handle transpilation for you.

Supporting Legacy Browsers without ES6

If aiming to support legacy browsers without ES6 support, a different approach is required using square bracket notation:

var obj = {};

obj[name] = val;

ary.push(obj);

For a deeper understanding of the nuances between square bracket and dot notation, check out this informative article.

Answer 3

Answer №2

const arr = [];

function addToArr(key, value) {
   const obj = {};
   obj[key] = value;
   arr.push(obj);
}

addToArr("username", "user123");

After carefully reading your query, all you really need is the following snippet of code

$(your group of input elements).serializeArray();

Good old jQuery at work

Answer 4

const arr = [];

function addToArr(key, value) {
   const obj = {};
   obj[key] = value;
   arr.push(obj);
}

addToArr("username", "user123");

After carefully reading your query, all you really need is the following snippet of code

$(your group of input elements).serializeArray();

Good old jQuery at work

Answer 5

Answer №3

In programming, an "associative array" can be thought of as a fancy object. Rather than using the push method, you simply assign properties directly to the object:

items[key] = value;

Answer 6

In programming, an "associative array" can be thought of as a fancy object. Rather than using the push method, you simply assign properties directly to the object:

items[key] = value;

Answer 7

Answer №4

Below is a helpful code snippet

ary.push( {[name]: val} );

Take a look at the example below

let allData = [{name: "Cat", type: "Animal"}]
let finalData: any = [];
for (let i = 0; i < allData.length; i++)
{
  let obj = allData[i];
  for (let KEY in obj)
  {
    //Adding data to another array as an object
    this.finalData.push({ [KEY] : obj[KEY] });
  }
}

Answer 8

Below is a helpful code snippet

ary.push( {[name]: val} );

Take a look at the example below

let allData = [{name: "Cat", type: "Animal"}]
let finalData: any = [];
for (let i = 0; i < allData.length; i++)
{
  let obj = allData[i];
  for (let KEY in obj)
  {
    //Adding data to another array as an object
    this.finalData.push({ [KEY] : obj[KEY] });
  }
}

Answer 9

Answer №5

let newStyles = [];
for (const s of styles) {
  const tempStyle = {};
  tempStyle[`${style}`] = `../dist/css/custom.${file}.${style}.css`;
  newStyles.push(tempStyle);
}

data : {"blue-yellow":"../dist/css/custom.theme.blue-yellow.css"}

Answer 10

let newStyles = [];
for (const s of styles) {
  const tempStyle = {};
  tempStyle[`${style}`] = `../dist/css/custom.${file}.${style}.css`;
  newStyles.push(tempStyle);
}

data : {"blue-yellow":"../dist/css/custom.theme.blue-yellow.css"}

Incorporate variable key-value pairs into a JavaScript array or object

Answer №1

Using Destructuring in ES6

Supporting Legacy Browsers without ES6

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Error: Attempting to access the value property of a null object within a React Form is not possible

Retrieve the processed data from a file using node.js

Is there a way for me to retrieve SCSS color variables within the javascript of a Vue template?

What steps can I take to stop Google Maps from resetting after a geocode search?

Executing a jQuery AJAX function when the timeout occurs

Utilizing reflection in Unity to dynamically convert a List into JSON format

When HTML/JS code is utilized, the submit button or image should function to open the same page as

Updating nested JSON object with key/value pair in MySQL 5.7

Can the line "as is" be included in HTML code?

Set the Vue 3 Select-Option to automatically select the first option as the default choice

Discovering parent elements far up the DOM hierarchy using jQuery

Parsing improperly formatted JSON from an HTTP GET request can be done using either AngularJS or JQuery

Modify the JSON structure of a deeply nested object

Inability to assign a value to an @input within an Angular project

Issue with Three.js Raycaster failing to intersect with a custom vertex shader

What are some strategies for extracting additional information from a JSON file that spans multiple pages?

Ways to implement standard sorting in react-table

Creating a customized greeting message using discord.js

Is it possible to use header() function in a file that is being accessed through

Listening to multiple events in AngularJS using `$scope.$on`