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
};
I am in the process of creating a small Next.js application with the following structure: Authenticate a user via Azure AD using Next-Auth Allow the user to initiate a SQL Database Sync by clicking a button within the app with the access token obtained du ...
Recently delved into the world of Angular and I've hit a roadblock. I'm struggling to grasp how Angular accesses data in the DOM. In all the examples I've come across, data is initialized within a controller: phonecatApp.controller(' ...
I am facing an issue with styling buttons in my UI. These buttons represent different domains and are dynamically generated based on data fetched from the server using the componentDidMount() method. Since I do not know the quantity of buttons at the time ...
Before pointing out any similar questions, please note that the answer from those sources does not apply to my specific code. I am trying to achieve this through a function as outlined here But I am struggling to figure out how to add captions only if th ...
The PHP echo statement below contains the code. The brackets are empty, but I can guarantee that the statement inside, which modifies CSS, works - except for one issue. I want it to only target elements with a class attribute equal to "zoom" or "zoom firs ...
Is there a way to turn off all debugging logs in Tensorflow JS similar to what can be done in Python with setting an environment variable and calling a function? Disable Debugging in Tensorflow (Python) According to the top answer: import os os.environ[ ...
After following the example provided here, I created a custom input component: Input.tsx import React from "react"; export default function Input({label, name, onChange, onBlur, ref}:any) { return ( <> <label htmlF ...
Recently delving into the world of node.js, I encountered a puzzling issue with my EJS template. It seems that my for loop is not executing properly within the EJS template while attempting to create a basic todo app. Below is the structure of the project ...
We currently offer both Java and C++ versions of our distributed messaging system product. I am in the process of developing a framework to conduct system testing across multiple servers. In order to accomplish this, I need a "test coordinator" process th ...
I am attempting to extract content from a Google Blogger Feed that can be found at this link. I am using JavaScript code from here. When inspecting the elements, I encountered a specific red warning message: Uncaught TypeError: Cannot read property ' ...
Currently, I am developing a service that utilizes the SoundCloud Javascript SDK 3.0, and I seem to be encountering issues with the PUT methods. Every call I make results in an HTTP error code of 401 Unauthorized. Below is my JavaScript code, which close ...
I recently received an unusual request for the app I'm developing. The requirement is to trigger a mouse click event 50 pixels to the right of the current cursor position when the user clicks. Is there a way to achieve this? ...
I'm facing an issue with my one page website. Whenever I click on a menu item, it directs me to a specific div tag on the page. However, if I right-click on a menu item and select 'open in new tab', it opens the URL "www.mysite.com/#" instea ...
Define a User Model with isActive as a Boolean property. Upon clicking a button, the user is redirected to a route where their information is retrieved based on the id from the parameters. Once the user is found, the script checks the value of isActive. ...
Encountering a persistent issue with an error that I've been trying to resolve for days without success. The problem arises when attempting to register a user in the project, resulting in error messages being displayed. Here's a snippet of the co ...
Currently, I am working on creating a function similar to NodeJS require. With this function, you can call require("./your-file") and the file ./your-file will be understood as a sibling of the calling module, eliminating the need to specify the full path. ...
I am looking for a way to include additional variables to be utilized by EJS during the rendering of a view for every request, similar to adding them in the render function: res.render('view', {data: {my: 'object'}}); I have implement ...
I am currently utilizing the Datetimepicker developed by XDAN. My goal is to have the current date set as the default when the page loads. To achieve this, I attempted using the new Date() along with the getUTCFullYear functions. However, there's a ...
I came across this code snippet: <script type="text/javascript"> $(document).ready(function() { $("#thang").load("http://www.yahoo.com"); $(".SmoothLink").click( function() { $("#thang").fadeOut(); $("#thang").load( ...
I'm facing a tricky issue with my code that I just can't seem to resolve. Currently, I am using Ajax and setTimeout to retrieve data. The problem arises when the data doesn't refresh automatically (if I manually navigate to the page getdata. ...