Associate the name of the input field with an array where the values of the input field serve as

Question

Associate the name of the input field with an array where the values of the input field serve as

My input fields are as follows:

<input name='223' type='number' class='form-control score' value='70'>
<input name='224' type='number' class='form-control score' value='65'>
<input name='225' type='number' class='form-control score' value='87'>

I am looking to manipulate the 'name' attribute to serve as indices for each 'value' using JavaScript for ajax posting. Essentially, I aim to retrieve values as a single array and map the names as the array indexes.

For example:
array (
[223] => 70
[224] => 65
[225] => 87
)

javascript arrays ajax

Answer 1

Answer №1

One effective method is to utilize the reduce function to gather input values and names into an object, with the input name as the key and the input value as the value.

const result = [...document.querySelectorAll('input[type="number"]')].reduce((acc, i) => ({...acc, [i.name]: i.value}), {})

console.log(result)

<input name='223' type='number' class='form-control score' value='70'>
<input name='224' type='number' class='form-control score' value='65'>
<input name='225' type='number' class='form-control score' value='87'>

It's not recommended to assign keys in an array using random numbers as it deviates from the intended sequential nature of arrays starting from 0.

let array = [];

// Assigning a random index as a key for an array can lead to unexpected behavior.
// This action creates gaps in the array and is inefficient.
array["222"] = 222;

console.log(array)

This improper use of Arrays can result in memory leaks.

Answer 2

One effective method is to utilize the reduce function to gather input values and names into an object, with the input name as the key and the input value as the value.

const result = [...document.querySelectorAll('input[type="number"]')].reduce((acc, i) => ({...acc, [i.name]: i.value}), {})

console.log(result)

<input name='223' type='number' class='form-control score' value='70'>
<input name='224' type='number' class='form-control score' value='65'>
<input name='225' type='number' class='form-control score' value='87'>

It's not recommended to assign keys in an array using random numbers as it deviates from the intended sequential nature of arrays starting from 0.

let array = [];

// Assigning a random index as a key for an array can lead to unexpected behavior.
// This action creates gaps in the array and is inefficient.
array["222"] = 222;

console.log(array)

This improper use of Arrays can result in memory leaks.

Answer 3

Answer №2

If you're looking to create an array of objects containing key-value pairs that correspond to the name and score attributes of each element, one approach is to utilize the array.map() method.

const inputs = Array.from(document.querySelectorAll(".score"))
const indexes = inputs.map(item => ({[item.name]: item.value}))
console.log(indexes)

<input name='223' type='number' class='form-control score' value='70'>
<input name='224' type='number' class='form-control score' value='65'>
<input name='225' type='number' class='form-control score' value='87'>

Answer 4

If you're looking to create an array of objects containing key-value pairs that correspond to the name and score attributes of each element, one approach is to utilize the array.map() method.

const inputs = Array.from(document.querySelectorAll(".score"))
const indexes = inputs.map(item => ({[item.name]: item.value}))
console.log(indexes)

<input name='223' type='number' class='form-control score' value='70'>
<input name='224' type='number' class='form-control score' value='65'>
<input name='225' type='number' class='form-control score' value='87'>

Answer 5

Answer №3

To achieve this, you have the option of using either an array or an object

If you opt for an array, be aware that it will result in multiple empty values as the name in your HTML begins with 223

var result = []
document.querySelectorAll('.score').forEach(item=>{
result[item.name] = item.value
})
console.log(result[223]) // 70
console.log(result[224]) // 65
// The resulting array will look like [,,,,,,,,,,,70,65,87]

The same outcome can be achieved using an object

var result1 = {}
document.querySelectorAll('.score').forEach(item=>{
result1[item.name] = item.value
})
console.log(result1[223]) // 70
console.log(result1[224]) // 65
// The resulting object (result1) will appear as {'223':70,'224':65,'225':87}

Answer 6

To achieve this, you have the option of using either an array or an object

If you opt for an array, be aware that it will result in multiple empty values as the name in your HTML begins with 223

var result = []
document.querySelectorAll('.score').forEach(item=>{
result[item.name] = item.value
})
console.log(result[223]) // 70
console.log(result[224]) // 65
// The resulting array will look like [,,,,,,,,,,,70,65,87]

The same outcome can be achieved using an object

var result1 = {}
document.querySelectorAll('.score').forEach(item=>{
result1[item.name] = item.value
})
console.log(result1[223]) // 70
console.log(result1[224]) // 65
// The resulting object (result1) will appear as {'223':70,'224':65,'225':87}

Answer 7

Answer №4

Instead of utilizing an Array, I recommend using an Object since numeric indices in an Array can create a sparse and mostly empty, yet very large, Array.

Here is one possible approach:

// utility functions to streamline coding in larger projects;
// keeping a reference to the document:
const D = document,
  // a shorthand for querySelectorAll() that takes an Element as
  // a search context for the supplied selector,
  // defaulting to document:
  get = (sel, ctx = D) => ctx.querySelector(sel),
  // similar to above but a shorthand for querySelectorAll(),
  // converting the NodeList from querySelectorAll()
  // into an Array for Array methods:
  getAll = (sel, ctx = D) => [...ctx.querySelectorAll(sel)],
  // simple function to select elements matching a selector,
  // then iterate over the array of Element Nodes:
  collate = (sel) => getAll(sel).map(
  // using Arrow function with destructuring assignment to
  // retrieve 'name' and 'value' properties of Element,
  // passing them into the function body:
  ({
    name,
    value
  }) => {
    // creating and returning an Object with name variable
    // as property key and value property of element as value:
    return {
      [name]: value
    }
  }),
  // calling function on all <input> elements (change selector
  // for more specific control):
  nameAndValues = collate('input'),
// this could also be converted into JSON:
  nameAndValuesJSON = JSON.stringify(nameAndValues);
  
  console.log(nameAndValues);
  console.log(nameAndValuesJSON);

<input name='223' type='number' class='form-control score' value='70'>
<input name='224' type='number' class='form-control score' value='65'>
<input name='225' type='number' class='form-control score' value='87'>

JS Fiddle demo.

References:

Answer 8

Instead of utilizing an Array, I recommend using an Object since numeric indices in an Array can create a sparse and mostly empty, yet very large, Array.

Here is one possible approach:

// utility functions to streamline coding in larger projects;
// keeping a reference to the document:
const D = document,
  // a shorthand for querySelectorAll() that takes an Element as
  // a search context for the supplied selector,
  // defaulting to document:
  get = (sel, ctx = D) => ctx.querySelector(sel),
  // similar to above but a shorthand for querySelectorAll(),
  // converting the NodeList from querySelectorAll()
  // into an Array for Array methods:
  getAll = (sel, ctx = D) => [...ctx.querySelectorAll(sel)],
  // simple function to select elements matching a selector,
  // then iterate over the array of Element Nodes:
  collate = (sel) => getAll(sel).map(
  // using Arrow function with destructuring assignment to
  // retrieve 'name' and 'value' properties of Element,
  // passing them into the function body:
  ({
    name,
    value
  }) => {
    // creating and returning an Object with name variable
    // as property key and value property of element as value:
    return {
      [name]: value
    }
  }),
  // calling function on all <input> elements (change selector
  // for more specific control):
  nameAndValues = collate('input'),
// this could also be converted into JSON:
  nameAndValuesJSON = JSON.stringify(nameAndValues);
  
  console.log(nameAndValues);
  console.log(nameAndValuesJSON);

<input name='223' type='number' class='form-control score' value='70'>
<input name='224' type='number' class='form-control score' value='65'>
<input name='225' type='number' class='form-control score' value='87'>

JS Fiddle demo.

References:

Associate the name of the input field with an array where the values of the input field serve as

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

A guide on creating a Javascript leap year algorithm using Test-Driven Development techniques

The product image does not display any other images

What is the best way to distinguish between errors when there are two forms on a single page using Laravel and jQuery?

Ways to iterate through a JSON formatted array variable using JavaScript

Guide to retrieving IDs of images on a canvas during drag and drop functionality

Utilizing a server for seamless communication between a mobile device and a website

The Static Interface Binding in TypeScript

Sliding content with the grace of a visual journey

Tips for transferring large data without a page redirect using jQuery's post method:

Ways to showcase information in a React dropdown menu

Resetting the Countdown Clock: A Transformation Process

Creating a popup using JavaScript in an ASP.NET page can be challenging when it comes to passing values

Guide to generating a multidimensional array from a single array in PHP

Struggling with navigating the pop-up window in Webdriverio?

Selecting images using jQuery

Exploring the world of jQuery waypoints and the art of modifying

Learn how to render list items individually in Vue.js using the 'track-by $index' directive

How can I remove a dynamically added <tr> element using jQuery?

When a JSON stringified string contains a space-separated value, it can cause the data attribute to break

Is there a way to retrieve the positions of every occurrence of a specific substring within a given string?