Adding dynamic properties to an object on the fly

When working in Javascript, I defined an object as follows:

this.view.objectExample.accessibilityConfig= {
    'propertyA': 1,
    'PropertyB': 2,
    'PropertyC': 3
};

I attempted to add a new property during runtime but encountered an error saying "Cannot set properties of undefined".

An example of the code used is:

this.view.objectExample.accessibilityConfig.propertyD['flag'] = true;

What is the correct way to define a new property like this?

I also attempted it in this way:

this.view.objectExample.accessibilityConfig.propertyD.flag = true;

Answer №1

Since the original object does not contain propertyD, the result of accessibilityConfig.propertyD is undefined.

It is possible to add properties to an object dynamically, but the object must already exist. This rule applies to every level within an object's hierarchy. Therefore, before performing the following action:

this.view.objectExample.accessibilityConfig.propertyD.flag = true;

You need to first execute this step:

this.view.objectExample.accessibilityConfig.propertyD = {};

Alternatively, you can accomplish both actions simultaneously with the following code:

this.view.objectExample.accessibilityConfig.propertyD = { flag: true };

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

Creating HTML content from an array in JavaScript

Check out this original Fiddle: https://jsfiddle.net/404h0u20/ I'm attempting to utilize JavaScript to organize the HTML in accordance with the DRY principle. See it here: https://jsfiddle.net/404h0u20/2/ The code snippet in question looks like th ...

How can I import XML files containing image links for embedding in a 2D JavaScript Array?

For a few months now, I have been dedicating my free time to working on a personal project - an open-source version of SimTower with updated graphics that I have created myself. In the initial stages, I developed a webpage that displayed a collection of i ...

Tips for breaking apart elements of a JavaScript array when a specific delimiter is present in an object property

I am facing a challenge with an array of objects where some properties contain commas. My goal is to split these properties into new objects and recursively copy the rest of the properties into new array elements. For example, consider this original array ...

Updating the date with setState in Material UI components

I have a question about integrating the material ui datepicker into my project. I want the current date in the state to update whenever the user switches from one date to another. You can find the materialUi datepicker I am using at this link. I tried im ...

Is there a way to ensure that an AJAX request to a PHP file is synchronized with submitting form data to that same file?

My issue is that update.php is only able to retrieve the posted form data (post_edit). The variables sent earlier through AJAX are not being passed through. Notice: Undefined index: id_to_edit in ...\update.php on line 5 Notice: Undefined index: col ...

Invoke a function within the redux reducer

The code within my reducer is structured as follows: import {ADD_FILTER, REMOVE_FILTER} from "../../../../actions/types"; const removeFilter = (state, name) => { return state.filter(f => f.name !== name); }; export default function addRemoveFi ...

Tips for resolving the React Hook Type Error issue

Error Image const isLoggedIn = true; const handleChangeEvent = () => {}; const [displayPassword, setDisplayPassword] = useState(false); const handleTogglePassword = () => setDisplayPassword((prevDisplayPassword) => !prevDi ...

Tips for showing outcome in the main window after form submission in a showModelDialog box through ajax

I find myself in a challenging situation where the parent window triggers a showModalDialog box to submit a form. Upon submission, the form is sent to a struts2 action which performs some tasks and then redirects back to the parent page, causing a full ref ...

Issue with AJAX call not functioning properly within PHP document

I've encountered an issue with a form that triggers an ajax call upon clicking the submit button. The ajax function is located within a PHP file as I need to populate some variables with data from the database. However, the before / success callbacks ...

Unable to transmit data to CodeIgniter controller through ajax communication

I'm struggling with sending a value from an input element to a Codeigniter controller using ajax. The problem arises because I am using a WYSIWYG editor (summernote), which only allows me to receive the input inside a <script>. However, when I ...

Guide on utilizing tslint in conjunction with npx

I currently have tslint and typescript set up locally on my project. In order to run tslint against the files, I am using the following command: npx tslint -c tsconfig.json 'src/**/*.ts?(x)' However, when I run this command, it seems to have no ...

Steps for embedding JavaScript code within HTML tags using a JavaScript file

Working on a React web app, I am solely using js and css files without any html. In one of my js files, there is a mix of html and js code like this: class Teams extends Component { state = { teams: [] } componentDidMount() { ...

The function req.checkBody does not exist

Currently, I am following the guidance of the Mozilla Express tutorial (https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/forms). However, as I reached the section involving express-validator, I encountered a persistent error messag ...

In the n-th click event, the key press button is fired n times

I am working on developing a game that includes a start button. Once this button is clicked, the game will begin and involves various keyboard key press events. The issue arises when the start button is clicked multiple times causing the game to run repeat ...

A method for retrieving the variables from the initial API function for use in a subsequent API function

$.getJSON(url, function (data) { $.getJSON(url_wind, function (data2) { //perform actions with 'data' and 'data2' }); }); While attempting to use the data from the initial getJSON() call in the second getJSON() call ...

Deserialization of objects in Json.NET may result in a null value being returned

I am trying to deserialize a JSON string and display specific data as a string: public class Test { public int id { get; set; } public string name { get; set; } public long revisionDate { get; set; } } private void btnRetrieve_Click(object se ...

AngularJs - A directive for handling asynchronous operations with deferred or batched processing

I've exhausted my efforts searching through Google and books for a solution, so unfortunately I don't have any code to provide at the moment. My objective is the following: 1 - Develop a directive that accepts 2 parameters in this format <r ...

Obtain the `react-router` Redirect from a collaborative component library

I'm currently working on a component library in (React) that I plan to share. One of the components I want to include is the PrivateRoute. However, I face an error when trying to import this component from the module library into another application: ...

Creating an array of objects in Javascript by setting two different values as a range

Given an array of objects structured as follows: [{value: "a", start: 1950, end: 1954, description: "aaa"}, {value: "b", start: 1953, end: 1956, description: "bbb"}, {value: "c", start: 1960, end: 1962, des ...

Trouble arises with the date-picker component in Angular

There's a specific concept known as "campaign duration" where you can select a date between the first and last day of the month. If you choose a date outside this range, such as a date from the following month, the Backend API will respond with an "In ...