Creating a new object and assigning it to an existing reference variable

As a newcomer to Angular, I am facing an issue related to assigning a JSON response from the server to a newly instantiated object.

Within my code, I have defined a class called MyClass:

export class MyClass {
    Id: number;
}

let obj: MyClass;
myService.fetch().subscribe(a => obj = a);

The problem arises when the server response contains five properties, but my object only has one property "Id". Surprisingly, all five properties are assigned to the object without any warnings or errors.

To troubleshoot, I print both objects to the console using the following code:

myService.fetch().subscribe(a => {
    obj = a;
    console.log(a);
    console.log(obj);
});

Strangely, despite the mismatch in properties, both objects appear identical in the console. This poses the question - shouldn't there be some form of notification indicating that the assignment cannot be completed due to missing properties in the MyClass class?

Answer №1

What specific type does variable a belong to? If it's not properly defined, Typescript may fail to detect any discrepancies.

Is there a system in place to alert me when an assignment is impossible due to missing properties in the class MyClass?

Actually, there are extra properties assigned to variable a. These additional properties do not affect the interaction with obj, so assigning an object with more properties to a type with fewer properties should not cause any issues. After all, Typescript follows duck typing principles (if it possesses an Id, then it qualifies as a MyClass).

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

parsing and building a sophisticated JSON object

i have a complex array structure as shown below, array=[ { 'mm': '1', exp: 'exp1' }, { 'mm': '2', exp: 'exp2' }, { 'mm': [ '1', '3', '7' ], exp: &ap ...

Resolving the issue of data transmission within Yii2's framework: Page-to-page data

I'm currently using Yii2-advanced-app and I have encountered an issue. I want to pass the selected value from a dropdown menu to a PHP code that displays a list with checkboxes on the same page. Here is an image for reference on what I am trying to ac ...

Saving data between refreshes in AngularJS can be achieved by utilizing services or local

In my application, I have a single object stored in $rootScope. I need to find a way to save its state when the user refreshes the app either by pressing F5 or manually. While I've come across examples using $cookies in Angular, they only allow for sa ...

Utilize the v-if directive with nested object properties for dynamic conditional rendering

I need to verify if the item object has a property called 'url' set. If it's not present, I would like to display a placeholder image. Here is an example of what I want to achieve: <img v-if="item.relationships.main ...

Issue with Rails: Content_For not functioning properly when combined with AJAX or when attempting to rehydrate JavaScript files

Currently, I am utilizing ajax to load all my views, and it's functioning perfectly except for one issue. My view pages that are being loaded are not referencing my JavaScript files. Below is an example of my coffee-script: jQuery(function() { Stri ...

Load JavaScripts asynchronously with the function getScripts

Asynchronously loading scripts on my login page: $.when( $.getScript("/Scripts/View/scroll-sneak.js"), $.getScript("/Scripts/kendo/kendo.custom.min.js"), $.Deferred(function (defer ...

The renderToString function in Material UI's sx property doesn't seem to have

Every time I apply sx to a component that is rendered as a string and then displayed using dangerouslySetInnerHtml, the styles within the sx prop do not work. Here is an example showcasing the issue: Codesandbox: https://codesandbox.io/p/sandbox/wonderfu ...

Tips for adjusting the dimensions of my chart using JavaScript or Jquery

Utilizing DevExtreme widgets for the creation of a line chart in jQuery as shown below: var dataSource = [{"Date Range": "August-2018", Benelux: 194, Czech_Slovakia: 128, ...

Creating dynamic child components in Vue.js version 2

I am currently developing a facet search system using VueJS. The concept is fairly straightforward: Within a FilterGroup component lies the overarching filter logic. This component allows for several child components, such as AttributeXYZFilter, to provid ...

Do not execute the script if the window's width is below a certain threshold

I have a unique website layout that adjusts to different screen sizes, and I've incorporated some jQuery functionality. Here is a snippet of the code: <script> $(document).ready(function(){ $("#D1000C36LPB3").click(function(){$("#D ...

What is the correct syntax for implementing scrollTop and transform CSS effects in jQuery?

I find myself in a bit of a quandary, as this question may seem rather simple but it's causing me some confusion. I'm trying to navigate the CSS transform syntax within a jQuery script that calculates window height. Here is the code in question: ...

Alert the parent angular component of any changes in the object

I am working with a large object in my component, where the properties of the object are connected to various components and inputs within the template: constructor() { this.data = { identifier: null, isRequired: true, title: ' ...

Is there a way to retrieve and update the data of all the child elements within a table row dynamically?

I have a table with the following header information. <table id="example" class="display" cellspacing="0" width="100%"> <thead> <tr> <th> Date ...

Navigate to a New Page post Dropdown Selection

Currently working on developing a website using Github Pages where I need users to be directed to a specific page after choosing the final option. I am extracting data from a JSON file. I attempted to include an anchor tag in the JSON but it does not red ...

A guide on leveraging the each() method for looping through a JSON document

I am hoping to display elements sourced from a JSON file. Here is the JSON data "2015": { "img": "<img src = \"../images/images/images_of_members/image1.jpg\">", "img2": "<img src = \"../images/images/images_of_members/image2.jpg& ...

AngularJS - Always keep an eye on a group of items

Looking to create a custom watcher for a collection within my application, I initially believed that Angular would have all the necessary tools at my disposal. I had access to $watch, both shallow and deep, as well as $watchCollection. A $digest cycle was ...

Combining two objects by id and grouping identical key-value pairs together

var routePlan = [ { "id" : 1, "farmerName" : "Farmer1", "farmerId" : 1 }, { "id" : 2, "farmerName" : "Farmer2", "farmerId" : 2 }, { "id" : 1, "farmerName" : "Farm ...

Utilize Lodash to iterate through functions in a loop and retrieve the first matching result

I am looking to iterate through an array of objects and call a method on them. If the result of that method meets certain conditions, I want to immediately return that result. The current implementation is as follows: public getFirstMatch(value: string, a ...

An embedded object is encountering an error due to an undefined value in the field of 'Math'

My approach involves using AJAX to dynamically load a YouTube video when the page is loaded. $(document).ready(function(){ $.ajax({ url : '/myurl', type:"post", data:{"d": $('#d_id').val()}, ...

How do you create an AngularJS directive with HTML content?

I am currently working on a directive that aims to load a webpage, make it accessible in a service, and also have its content available in the scope within the directive's element. Here is a simplified explanation of what I am trying to achieve: < ...