Tips for connecting data to an HTML page with Angular 2

My code is throwing an error message while I'm debugging: Error: Uncaught (in promise): TypeError: Unable to get property 'standard' of undefined or null reference Here is the relevant part of my code: student.component.ts:

 this._studentService.get(Global.BASE_USER_ENDPOINT + '/StudentDetailsApi?user_id=' + StudID)
                .do(data => JSON.stringify(data))
                .subscribe(students=> { this.students= students; this.indLoading = false; },
                error => this.msg = <any>error);

And student.component.html:

<span>{{student.standard}}</span>
angulartypescript

Answer №1

Implement a null check before assigning values

  let studentSession = JSON.parse(sessionStorage.getItem('student_session'));
  if(studentSession){
    this.student.rollNumber = studentSession[0].rollNumber;
    this.student.name = studentSession[0].name;
    this.student.standard = studentSession[0].standard;
  }

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

Bringing in the typescript 4 package to use in typescript version 3.8.3

I've been working on a project that is utilizing typescript 3.8.3, and I'm currently attempting to import a newer package (specifically win32-api). I initially didn't anticipate any issues since the package is compiled to JavaScript. At wor ...

node.jstypescript

When running the test, a "is not defined" ReferenceError occurs in the declared namespace (.d.ts) in ts-jest

When running typescript with ts-jest, the application functions properly in the browser but encounters a ReferenceError: R is not defined error during testing. The directory structure: |--app | |--job.ts |--api | |--R.d.ts |--tests | |--job.test.ts ...

typescriptjestjsts-jest

The useState variable remains unchanged even after being updated in useEffect due to the event

Currently, I am facing an issue in updating a stateful variable cameraPosition using TypeScript, React, and Babylon.js. Below is the code snippet: const camera = scene?.cameras[0]; const prevPositionRef = useRef<Nullable<Vector3>>(null); ...

reactjstypescriptbabylonjs

Always directing to the initial page upon refreshing the browser in Angular's secondary route

In my app, there is a default component called StartComponent, accessed through the Angular router's start route. Therefore, in the browser address bar, it appears as myhost/start. Upon navigating to the second route, the app logic takes me to Second ...

angularangular-routingangular-router

Error encountered with object.map() function - what fundamental concept am I missing?

Could someone lend me a fresh set of eyes on this... The React Component is fetching data from MariaDB using a useEffect() hook. The data is retrieved successfully without any errors, and the console.log shows the correct data (refer to the image below). ...

reactjstypescriptpreact

Beware of potential issues with FontAwesomeIcon when incorporating it into a Typescript file

I'm currently working with NextJS and Typescript. I encountered an issue when trying to import FontAwesomeIcon like this <FontAwesomeIcon icon={faCheck as any} /> as it triggered a warning in the console stating "Warning: FontAwesomeIcon: Suppor ...

typescriptnext.jsfont-awesome

Is Highcharts-angular (Highcharts wrapper for Angular) compatible with Angular 4?

I have attempted to install various versions of highcharts-angular, ranging from 2.0.0 to 2.10.0. However, I consistently encounter the same error when running the application. The error message states: Metadata version mismatch for module C:/dev/Angular- ...

javascriptangulartypescripthighchartsangular2-highcharts

Transferring information through parent-child components via onChange

I have a question regarding data binding. In my project, I have a parent component and two child components: Parent: directives: [firstChild,secondChild], template:' <first-child [showList]="showList" (emitShowList)="getShowList($event)"& ...

angulartypescript

Uploading Files with Typescript Promises

Hello everyone, I'm facing an issue where a dialog window is opening before all the files are uploaded to the server. Can anyone please guide me on what might be going wrong in my code? public UploadAll() { this.doAsyncTask().then(() => ...

typescript

Experience the advanced NgPrime p-dropdown template with templating, filtering, and a clear icon that collapses when wrapped within a form element

Check out this link for a demo Whenever I enclose the code below in a </form> element, the drop-down menu collapses. <h5>Advanced with Templating, Filtering and Clear Icon</h5> <p-dropdown [options]="countries" [(ngModel)]=& ...

javascripthtmlangularprimeng-dropdowns

Avoid the need for props when implementing a component with a higher order component

Running into an issue with HOC and typescript. The compiler is asking for a value that is received from the HOC. Here's the component using the HOC: function Coupon(props: WithAlertProps): JSX.Element { return <p>test {props.error}</p> } ...

reactjstypescript

Error: In Typescript, it is not possible to assign the type 'false' to type 'true'

Currently, I am exploring Angular 2 and encountered a situation where I set the variable isLoading to true initially, and then switch it to false after fetching required data. However, upon executing this process, I encountered the following error message: ...

angulartypescript

Issue with React useCallback not being triggered upon a change in its dependencies

useCallback seems to be capturing the wrong value of its dependency each time. const [state, setState] = React.useState(0); const callback = React.useCallback(() => { console.log(state); // always prints 0, why? }, [state]); React.useEffec ...

javascriptreactjstypescriptreact-hooks

Angular 10 does not fulfill promises as expected

In the Angular 10 project I'm working on, I encountered an issue while trying to call an API request asynchronously using promises. The code I wrote didn't seem to execute the API call as expected and kept exiting at the first line without progre ...

javascriptangulartypescriptpromise

React Router Issue: Component Not Rendering When <nav> Element Is Incomplete

I am currently experiencing an issue with rendering a component in my React TypeScript application using React Router. The problem arises when trying to navigate to the AddTask component by clicking on a link within a <nav> element. Strangely, the co ...

reactjstypescriptreact-routerreact-router-dom

Step-by-step guide on utilizing the vendor.ts file available at https://angular.io/docs/ts/latest/guide/webpack.html

As per the guidelines provided at https://angular.io/docs/ts/latest/guide/webpack.html, it is recommended to include vendors like jQuery in the vendor.ts file. // Other vendors for instance jQuery, Lodash or Bootstrap // You can import js, ts, css, sass, ...

angularjsangulartypescript

How can you update ngModel in Angular and mark the form as dirty or invalid programmatically?

My form is connected to a model as shown below In the component file: myTextModel: string; updateMyTextModel(): void { this.myTextModel = "updated model value"; //todo- set form dirty (or invalid or touched) here } Html template: <form #test ...

angulartypescriptangular4-forms

Having difficulty subscribing to multiple observables simultaneously using withLatestFrom

I am facing an issue where I have three observables and need to pass their values to a service as parameters. I attempted to do this using WithLatestFrom(), but it works fine only when all values are observables. this.payment$.pipe( withLatestFrom(this.fir ...

angulartypescriptrxjs

What is the best way to eliminate commas from an array within an Angular project?

I am attempting to retrieve a list of actors from movies; however, in the database I created, each actor's name has a comma at the end of the string. When calling the array, the content shows up with double commas next to each other. I need help figur ...

arraysangulartypescripttext-processing

Identifying Errors in Meteor's Data Publications

I am currently working on a web application using Meteor and AngularJS 2. Take a look at the publication function below: Meteor.publish('abc', function () { // For throwing the meteor error according to the condition if(!this.userId) throw new ...

javascriptangularmeteorangular-meteor