Top method for retrieving key value pairs from an array using JavaScript

In my current code, I am extracting the value of an input name array key using JavaScript:

var input = document.querySelector('input');
var value = input.name.match(/\[(.*?)\]/)[1];

console.log(value);
<input type="text" name="hello[101][]" />

This method is effective, but I'm interested in exploring alternative approaches to retrieve the input name array key value(s). Is there a way to transform the string hello[101][] into a JavaScript array or object? For example, how can I extract all keys from:

<input type="text" name="hello['one'][101]['test'][]" />
javascriptarrays

Answer №1

Take a look at this evaluation example

var sentence = "hey['two'][202]['trial'][]", 
  elements=eval(sentence.substring(sentence.indexOf("[")).split("][").join(","))
console.log(elements)

Answer №2

To create an array using the split() method with a regular expression, simply pass the regex pattern as an argument. The process remains fairly consistent throughout.

var arrayOfInputValues = input.name.split(/\[(.*?)\]/)

After splitting, the result will be 

["hello", "'one'", "", "101", "", "'test'", "", "", ""]
, requiring removal of empty elements.

arrayOfInputValues.filter(function(x){return x!=''})

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide on creating and dynamically appending an element to the DOM in VueJS triggered by a user clicking a button

I'm having an issue with my vue webapp. I want to make a square shape appear on the screen where a user clicks, but for some reason, my code isn't working as intended. Can someone help me figure out what's wrong? <template> <di ...

javascriptvue.jsrendercreateelement

methods for sorting firestore data in react on client side

Fetching data from firestore and applying filters const [projects, setProjects] = useState([]); const fetchData = (sortBy = "NAME_ASC") => { const unsubscribe = firebase .firestore() .collection("projects") ...

javascriptreactjsfirebasegoogle-cloud-firestore

Display a concealed div when an ng-click event occurs within an ng-repeat loop

$scope.editPostComment = false; Whenever I click on the button, it displays the textarea in all the repeated items instead of just the clicked div! <div class="commentBox" ng-show = "editPostComment"> <textarea name="editor2" ...

javascriptangularjsmodel-view-controller

retrieving information from a data attribute

When setting a data attribute for a user on a link, the code looks like this: <input type="button" class="btn" data-user={"user": "<%= @user.name %>"} value="Start" id="game"> Upon listening for the click event in the JavaScript function, co ...

javascriptjquery

Filtering with AngularJS based on integer comparison will assist in stream

Currently, I have implemented a "price" field on my website using the JQuery-UI slider. This field comprises of two integer values: minPrice and maxPrice. Suppose I possess an array of objects structured in this manner: objarr=[ { 'name'=&ap ...

javascriptjqueryangularjsangularjs-ng-repeat

Is it feasible to utilize math.max with an array of objects?

When it comes to finding the largest number in an array, solutions like this are commonly used: var arr = [1, 2, 3]; var max = Math.max(...arr); But how can we achieve a similar result for an array of objects, each containing a 'number' field? ...

javascriptnode.jstypescript

"Finding specific data on a list with ease - A guide to scrolling using a searchbox

One interesting feature of my project is the search box that allows users to quickly find specific data in a populated div list sourced from the database. When a user types something into the search box, the corresponding data will be scrolled to on the li ...

javascriptjquerycssajaxcodeigniter

Incorporate Scalable Vector Graphics into HTML and manage interactions

There is an SVG file containing various elements such as Circles, Ellipses, Polygons, and polylines, each with its own unique ID. I am looking to add a common JavaScript or jQuery function that can respond to a click event and determine the origin of the c ...

javascriptjqueryhtmlsvg

Displaying a JSON array in C++ using the nlohmann library

I utilized the nlohmann library to create JSON objects with the following code snippet: nlohmann::json dataJson; auto data = dataJson.array(); data[0]["message"] = "String"; data[0]["timestamp"] = 123; The current output is {"message":"String", "timest ...

c++arraysjsonnlohmann-json

Can the tab button be used to move to the next field?

Is it possible to navigate to the next field by pressing the tab button? If so, how can we achieve this? Currently, I am utilizing Bootstrap classes col-md-6. Thank you! <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4. ...

javascripthtmlbootstrap-4

What causes the other array to be affected when one is changed?

Take a look at this snippet of JavaScript code: var x = [1, 2, 3], y = x; y[1] = 3; x; // x === [1, 3, 3] Why does this happen? Why is the value of "x" changing when I update "y[1]"? I tried it in both Firefox and Chrome and got the same result. Th ...

javascriptarrays

"Encountering an unidentified custom element in Vue 2 while exploring Vue libraries

In my Vue project, I have integrated libraries like FusionCharts and VueProgressBar. However, I encountered an error in my console: Unknown custom element: <vue-progress-bar> - did you register the component correctly? For recursive components, make ...

javascriptvue.js

Add to an array the recently created span element which was inputted through text in AngularJS

Having some difficulty controlling an array object with a list of span values using a watcher in Angularjs. The current setup works partially - when I input span elements, an array is automatically created for each span. When I remove a span element, the ...

javascriptjqueryangularjs

Is it possible to implement drag and drop functionality for uploading .ply, .stl, and .obj files in an angular application?

One problem I'm facing is uploading 3D models in angular, specifically files with the extensions .ply, .stl, and .obj. The ng2-upload plugin I'm currently using for drag'n'drop doesn't support these file types. When I upload a file ...

javascriptangulartypescript

Expand the accordion and incorporate both a hyperlink and an anchor tag within the content

My go-to source for codes is usually https://www.w3schools.com. They also provide an accordion feature along with the code; However, I've encountered an issue where when a link is used -> to The accordion doesn't open but remains closed. Does ...

javascriptjqueryhtmlcss

Creating an array of a specific length and populating it with items in AngularJS can be achieved by first initializing an

By following this link, I was able to showcase the number of available slots in my app. However, what I actually need is to add items to these slots when a click event occurs and update the array. So far, I have assigned the function value to an array. ...

arraysangularjsangularjs-ng-repeat

What is the process for saving information to a database with JavaScript?

I am currently utilizing the Google Maps API for address translation, primarily through the use of a geocoder. I am interested in saving these results to a local database for future reference, as there are limitations on the total number and frequency of ...

javascriptdatabase

Guide on integrating AJAX and coding in WordPress using PHP

I created a search box in PHP and it is functioning correctly. However, when I try to integrate it into WordPress, it does not work as expected. It seems like the AJAX functionality is not working properly within WordPress. I would like to add this search ...

javascriptphpjqueryajaxwordpress

Incorporating CSS classes conditionally in an Angular child component using input values

I am currently using a list component: <section class="p-10 flex flex-col gap-10"> <p class="text-xl font-black text-blue-700">Transfer history</p> <div class="flex flex-col gap-10"> @for(item o ...

javascriptangular

Efficient Error Handling in Next.JS with Apollo GraphQL Client

Although the component successfully renders the error state, an uncaught exception is displayed in the console and a dialogue box appears in the browser. How can expected errors be handled to prevent this behavior? import { useMutation, gql } from "@a ...

javascriptreactjsnext.jsapollo-clientreact-apollo