Question:
Dynamically creating keys in javascript associative array
Typically, we initialize an array like this:
var ar = ['Hello', 'World'];
To access its values, we use:
alert(ar[0]); // Hello
However, I am looking to assign custom indexes, for example:
var ar = ['first' => 'Hello', 'second' => 'World'];
and then
alert(ar['first']);
I am having trouble figuring out how to do this assignment. Is there a way to achieve this?
Thank you!
Instead of using an Array, you may consider utilizing the Object structure which allows for named properties.
var obj = {
name: 'John',
age: 30
};
alert(obj['name']);
You can also assign properties with string keys directly to an array like this:
var arr = [];
arr['color'] = 'blue';
alert(arr['color']);
In order to access the values in an object, you must create and use an Object.
let myObj = {'name': 'John', 'age': 25};
console.log(myObj.age);
In the world of JavaScript, objects are essentially like treasure chests filled with various properties.
Here's a simple example:
let myObj = {};
myObj["fruit"] = "apple";
myObj["color"] = "red";
alert(myObj.fruit); //apple
alert(myObj["color"]); //red
JavaScript gives you the freedom to get creative with how you construct these objects.
In JavaScript, instead of associative arrays, we use object literals:
var obj = {foo:'bar'};
obj.something = 'else';
//or:
obj['foo'] = 'BAR';
If you try to create named indexes on an array in JS (even though the Array object traces back to the Object prototype), you'll lose access to important Array features like methods such as sort, or the essential length property.
Here is an example of how to use a JavaScript object in your code:
var obj = new Object(); // you can also just use {}
obj['red'] = 'apple';
obj['yellow'] = 'banana';
obj['green'] = 'kiwi';
// Display the keys and values stored
for (var key in obj) {
// Use hasOwnProperty to filter out inherited properties from Object.prototype
if (obj.hasOwnProperty(key)) {
alert('Key: ' + key + ', Value: ' + obj[key]);
}
}
Here is a simple example of how you can create and access objects in JavaScript:
var obj = {
'name' :'John',
'age' : 25
};
In JavaScript, objects can be initialized using key-value pairs enclosed in curly braces. This blurs the distinction between associative arrays and objects.
You can then retrieve values from this object using either bracket notation:
obj['name']
Or dot notation:
obj.name
Furthermore, keys do not necessarily need to be surrounded by quotes when initializing an object:
var obj = {
name: 'John',
age: 25
};
There's a form where fields are dynamically added on a click event. I want a validation error to appear when the field value is less than 9 digits after changing or blurring it. The issue is that since the fields are created dynamically with the same ...
I am encountering an error that reads: error TS2322: Type 'Observable<void | AuthError>' is not assignable to type 'Observable<Action>'. Type 'void | AuthError' is not assignable to type 'Action'. Type &a ...
I have a base64 encoded Data URL of a webp image that looks like this: data:image/webp;base64,R0lGODdhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs= My goal is to push this image to GitHub using their API in the form of a webp image. To clarify, I want to achi ...
As someone who is relatively new to the world of Javascript/jquery and async, I have spent a significant amount of time reading through various forums. Unfortunately, I have yet to come across a solution that addresses my specific issue. The problem at ha ...
In my possession is a .geojson file that I am aiming to decode using a PHP script based on the labeling within each array. There are six specific categories with labels: HIGH MDT ENH SLGT MRGL TSTM The task at hand involves breaking down this file into i ...
I am attempting to utilize a function that I have defined in my .js file within my HTML document. js/newsalerts.js function decodeHTML(html) { //https://stackoverflow.com/a/2989105/4650297 var tempDiv = document.createElement("DIV"); tempDiv. ...
Automating the Window: Issue: Our team recently implemented an authentication process for our staging environment, which requires additional steps during testing. I discovered that 'prompt()' cannot be easily captured by standard web locators. ...
I've been honing my skills with Node.js and express by working on a project involving a JavaScript object that generates a dropdown list. The process has been smooth so far. Recently, I integrated mongoose to create a model and saved it. Now, in my co ...
I have a contenteditable div where I am facing an issue with pasting text. Whenever I try to paste some text into the div, it always gets pasted at the end. I am using ViewChild to access the reference of the contenteditable div and utilizing innerText to ...
Looking forward to any assistance or suggestions... I am utilizing Twitter Bootstrap tabs for organizing information on a form page. Each tab will contain a "contact form" where users can add multiple contacts before submitting the entire form. <div c ...
Below is the HTML code for the list item in question: <li class="disabled-result" data-option-array-index="1" style="">4" (0)</li> Here is my attempt at using JavaScript to hide this list item, but it's not working as expected: var xpat ...
There was a recent Github issue reported on March 28th regarding async arrow functions generating faulty code when targeting ES5, resulting in the error message: TS1057: An async function or method must have a valid awaitable return type You can find t ...
So I've got this script embedded in my HTML code $(document).ready(function() { type :'GET', url :'MapleLeafs2011.json', dataType :'json', success :processTeam, error :function() { alert(&apo ...
Currently, I am dealing with a situation where I have a string that needs to be wrapped using the Yii tag like Yii::t('app' , 'what_string'). The reason for this is because I require it to be translated per string on another page. Howev ...
Imagine this vue.js template code: <div v-if="y===0"> <input ref="textbox">{{textbox}}</input> </div> In the scenario where y is data retrieved asynchronously, Is there a way to direct focus to the 'input' element onc ...
Currently, I am utilizing jQuery and running an HTML file on my local machine without a server. Interestingly, the code works perfectly fine on Firefox but encounters issues on Chrome: $('#result').load('test.html'); It appears that t ...
Recently delving into hooks, I stumbled upon an insightful passage in the official documentation regarding Using Multiple State Variables: It is noteworthy that updating a state variable in hooks replaces it entirely, as opposed to merging it like in th ...
My current project involves fetching latitude and longitude coordinates from a postcode using an API, then utilizing those coordinates to retrieve data on street level crimes near that location on a specific date through the UK police API. However, I have ...
I'm currently developing an Angular project and leveraging an external component library called NGPrime. This library provides me with a variety of pre-built components, including <p-button> (which I am using in place of a standard <button> ...
I am seeking a solution to display the second div (box2) every 3 seconds. Can anyone help me achieve this using jQuery? <div id="box1" style="background-color:#0000FF"> <h3>This is a heading in a div element</h3> <p>This ...