JavaScript: Struggling with Proper Functioning of Object.assign() Method

I am currently facing an issue with an assignment in my function.

Here is a snippet of the function along with the troubleshooting console.log statements:

function myfunc()
    {

  the_node = some_array; //with data.$color = #111111

    console.log('before: '+the_node.data["$color"]); //returns #111111
    console.log(the_node); //returns #111111 (at data.$color)

    the_node.data["$color"] = "#000000" ; //the assignment

    console.log('after: '+the_node.data["$color"]); //returns #000000
    console.log(the_node); //returns #111111 (should return #000000) (at data.$color)

  }

A puzzling observation is that while the console displays correct values for 'before' and 'after' regarding the variable 'the_node.data.$color', indicating that the assignment has been successful, it does not reflect within the object 'the_node'.

Any insights on why this discrepancy might be occurring?

(below are the details of the contents of the object 'the_node' containing the 'data' object)

$$family: "class"

Config: {$extend: false, overridable: true, type: "multipie", color: "#e6e6e6", alpha: 1, …}

Edge: {$extend: false, overridable: false, type: "none", color: "#ccb", lineWidth: 1, …}

Label: {$extend: false, overridable: true, type: "Native", style: " ", size: 10, …}

Node: {$extend: false, overridable: true, type: "multipie", color: "#e6e6e6", alpha: 1, …}

_angularWidth: 1

_depth: 1

_flag: true

_treeAngularWidth: 3.1666666666666665


angleSpan: {begin: 0, end: 2.7762911822421428}

constructor: function()

data: Object
$alpha: "1"
$color: "#87b13e"
$dim-quotient: 1
$label-size: 15
$span: 2.7762911822421428
class: "trait"
color: "#000000"
trait: "endurance"

Object Prototype

Answer №1

The contents of the_node are a bit unclear judging by the line:

     console.log(the_node); //returns #111111

This doesn't seem accurate especially when compared with the line:

     console.log('before: '+the_node.data["$color"]); //returns #111111

If the above line is correct, then how can the first line be valid?

You may want to try this instead:

    console.dir(the_node);

By doing this, you will get a comprehensive display of all the contents within the_node including its members.

Additionally, type in:

    console.log(typeof the_node);

This will help determine if the_node is indeed an object or not.

Remember: When using $ as a prefix for any variable in jQuery, 'color' becomes an object with various added functionalities. Therefore, assigning to $color directly might not work; consider assigning to something like $color.value or any specific part of the object you intend to assign to.

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

Challenges with Knockout.js Virtual Elements in Different Environments

I am facing a peculiar issue where a virtual knockout template fails to bind correctly when accessed remotely, yet functions perfectly when viewed locally. You can find the problematic page here: Here is the template I am using: <ul> <!-- k ...

Sort out the DIVs containing card elements

Is there a way to filter DIVs containing cards based on their categories? I seem to be encountering an issue where the filtering only works with letters. I suspect the problem lies in the Javascript code, but I can't pinpoint it. Can you help me ident ...

Angular JS is up and running

My journey into the world of Angular JS has just begun. While I can put together an Angular module, I find myself with a myriad of questions regarding the inner workings of Angular. How exactly does $scope function? I know that a root scope is created ...

Using Jquery to match array elements in order to generate a unique calendar display

I'm facing an issue with creating a view that involves three different arrays. The first array consists of resources, the second array contains dates, and the third array contains the data I'm trying to match with both the resource and date. My g ...

Observing a peculiar discrepancy in how various versions of JSON.stringify are implemented

Imagine having a deeply nested JS object like the example below that needs to be JSON-encoded: var foo = { "totA": -1, "totB": -1, "totC": "13,052.00", "totHours": 154, "groups": [ {"id": 1, "name": "Name A", " ...

How can multiple elements be connected to an onclick action?

I'm having trouble figuring out how to use an onClick action with jQuery for all the elements in a list of attached files. Here is a snippet of my HTML file: <p>Attachments</p> <div> <ul id="attach"> <li id="KjG34 ...

JavaScript Nested Array Looping Script

I am currently working on a loop script for my application that checks for the full capacity of a user array and adds a user ID if there is space available. The data in my JSON file is structured around MongoDB and contains 24 entries (hours). Each entry ...

Are arrays being used in function parameters?

Can the following be achieved (or something similar): function a(foo, bar[x]){ //perform operations here } Appreciate it in advance. ...

Failure to post in jQuery and PHP

I'm facing a slightly complex issue involving jQuery and PHP on my index.php file. The page makes a call to a javascript function called getCalls(). function getCalls() { $('#transportDiv').load('getCalls.php'); } The getCall ...

Is it feasible to save BoxGeometries or MeshLambertMaterial in an array using Three.js?

var taCubeGeometryArray = new Array(); var taCubeMaterialArray = new Array(); taCubeGeometryArray.push(new THREE.BoxGeometry( .5, .5, .5)); taCubeMaterialArray.push(new THREE.MeshLambertMaterial({map: THREE.ImageUtils.loadTexture( "image.png" )})); Could ...

Why is JavaScript globally modifying the JSON object?

I have a few functions here that utilize the official jQuery Template plugin to insert some JSON data given by our backend developers into the variables topPages and latestPages. However, when I use the insertOrHideList() function followed by the renderLis ...

Server Error: Experiencing an overload of renders. React has set limits on the number of renders to avoid getting caught in an endless loop

I am currently attempting to develop a basic stopwatch application and encountering the following error message. Despite trying various solutions from similar queries, I have not been able to pinpoint the root cause of this issue or resolve it. Below is t ...

Facebook has broadened the scope of permissions for canvas applications

I am in the process of developing a Facebook canvas application that requires extended permissions for managing images (creating galleries and uploading images) as well as posting to a user's news feed. I am currently facing challenges with obtaining ...

The data type 'HTMLCollection | undefined' is required to have a method called '[Symbol.iterator]()' which will then return an iterator

I'm currently working on creating a custom date-picker using web components by following a tutorial. I've encountered an error while translating the JavaScript logic to Typescript, specifically within the connectedCallback() {...} function. The e ...

The CSS formatting is not being properly applied within the innerHTML

I have a scenario where I am trying to display a Bootstrap card using innerHTML in my TS file, but the styles are not being applied to this content. I suspect that the issue might be because the styles are loaded before the component displays the card, cau ...

Store selected values from an array of checkboxes in a POST request

Currently, I am facing an issue with my list of checkboxes. Whenever the user submits the form and encounters an error, all the checked values are forgotten. Previously, I used a code snippet like the one below to keep the checked boxes remembered: IF che ...

Troubleshooting: Issue with Angular 2 bidirectional data binding on two input fields

Hi there, I am encountering an issue with the following code snippet: <input type="radio" value="{{commencementDate.value}}" id="bankCommencementDateSelect" formControlName="bankCommencementDate"> <input #commencementDate id="bankCommencementDat ...

Interact with multiple databases using the singleton design pattern in a Node.js environment

I need to establish a connection with different databases, specifically MongoDB, based on the configuration set in Redis. This involves reading the Redis database first and then connecting to MongoDB while ensuring that the connection is singleton. Here i ...

Unable to access MongoDB documents using NodeJS/Express

I can't seem to figure out why I am not receiving any results from a GET call I am testing with Postman. Let's take a look at my server.js file: const express = require("express"); const mongoose = require("mongoose"); const ...

A guide to dynamically display input fields according to the selected mat-radio button in Angular Material

I am currently utilizing angular material version 9.2.4 Within my project, I am implementing the angular material mat radio button with an input field. Each payment method will have its own corresponding input field. When the 'Cash' option is se ...