Preserve JSON information following a Typescript get request

Currently, I am attempting to establish a connection with a remote server's REST API in order to retrieve some valuable data. This information will then be utilized in an Angular2 LineChart.

I have successfully obtained the JSON file and converted it into a custom Interface.

The interface was created using Json2ts.com

https://i.sstatic.net/a0YHW.png

Here are my Constructor and LineChart Variables which need to be filled with the JSON Data. In the constructor, I convert the JSON result into my Interface Type: RootObject. When I print the JSON value in the console, it is valid.

https://i.sstatic.net/mvFq6.png

However, I am unable to assign a value from the data gathered from the JSON File, resulting in an error message stating 'Cannot read property 'linechart' of undefined.'

https://i.sstatic.net/70wKr.png

The issue lies in my inability to set a class data variable from the constructor or directly input the data into the chart. Is there a method to resolve this?

Any assistance provided would be greatly appreciated.

javascriptjsonhttptypescriptget

Answer №1

experience the power of async coding 

let self = this;

this.http.get('url').map((res:any)=>{ 
let data = .....
self.data = data })
return self.data;

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

Changes made to the Redux store are not being reflected throughout the application

I have a React application that uses React and react-redux. I have successfully set up my own API. The issue I am facing is with storing the user object in the store after logging in. Although I can retrieve the user object after login, I encounter difficu ...

javascriptreactjsreact-redux

Retrieve information from JSON but unable to locate the key

var data = [{ "error": false, "date": "09-02-2016", "day": "5", "checkin": "20:29:11", "checkout": null, "break_timein": null, "break_timeout": null, "checkin_remarks": "test", "checkout_remarks": null, "break_time_remarks": null }]; console.log(data[0].c ...

javascriptjqueryjson

React - The select component has received an invalid value of `undefined` that is out of range

I am working on a material-UI dialogue form that sends data to my API. One of the fields in the backend database is binary and only accepts two possible options. How can I handle this in the dialogue code provided below? Below is the error message: Mate ...

javascriptreactjsmaterial-ui

Amcharts does not display the percentage value

I've been working on creating a bar graph using amcharts and I'm trying to show the percentage on top of each bar. Here is the code snippet I have so far: $.ajax({ url: "https://daturl", contentType: "application/json; charset=utf-8", ...

javascriptajaxamcharts

The position of the scroll bar remains consistent as you navigate between different websites

Is it possible for me to click on a link within my HTML website and have the other website load with me in the exact same position? For example, if I'm halfway down a webpage and click a link, can I be taken to that same point on the new page? If so, ...

javascriptjqueryhtmlcss

Overlap one element entirely with another

Currently, I am working on a way for an element called overlayElement to completely cover another element known as originalElement. The overlayElement is an iFrame, but that detail may not be significant in this scenario. My goal is to ensure that the over ...

javascripthtmlcss

The error message "TypeError: e.preventDefault is not a function" indicates that

I'm fairly new to JavaScript and jQuery, and I've incorporated two jQuery plugins into my code - jQuery form validator and jQuery form ajaxSubmit. Initially, everything was working fine with normal AJAX submission until I needed to post a file, w ...

javascriptjqueryajax

What distinctions can be observed between interacting with the Jira Rest API manually compared to through programming?

Just starting out with Jira Rest APIs...I'm looking to log in to my Local Jira server using a VBA program. While I can successfully access the REST API manually and receive the JSON response I need, I keep encountering an error whenever I try to do it ...

jsonvbaexceljira-rest-api

Display/Conceal content with JQuery on a PHP webpage

I am having trouble with the following code. My intention is to show/hide the content between the #info id when clicking buttons, but nothing seems to be happening. Could you help me identify the issue? echo '<script> $( "#show' . $r ...

javascriptphpjqueryhtml

Tips on maintaining the position of images in Fabric.js

Currently, I am working on image processing using fabric js. Dealing with large images requires me to save copies of canvases after processing to enable faster display next time using jQuery's id.show feature. However, my goal is to render images in t ...

javascriptjqueryhtmlcanvasfabricjs

Utilizing a tuple for indexing in Typescript

Imagine you have a tuple containing keys like ["a", "b", "c"] and a nested object with these keys as properties {a: {b: {c: number}}}. How can you recursively access the members of the tuple as indices in typescript? An example implementation without prop ...

typescriptrecursiontuplespluckindex-signature

Facing CORS issue when trying to use the app on a device without network activity, although it works fine on

Currently, I am in the process of developing an Ionic app. Interestingly, the app runs smoothly in the browser; however, when it comes to running it on the device, the HTTP requests fail to load. Upon inspecting the app using Safari remote debugging, no er ...

javascriptangularjsajaxcordovaionic-framework

Three.js: Mesh disappears when enclosed within another mesh

I've been struggling for hours to understand why the text inside the cube is not visible, and I can't seem to figure out what's causing the issue. There are two meshes, one nested inside the other, but it appears invisible. If I comment ou ...

javascriptthree.js3dtextures

Redirect to login not working in Angular auth guard

Seeking assistance with troubleshooting an issue within my app. I am attempting to implement a feature where, if the user is not logged in and tries to access any URL of the app, they should be redirected to the login page. I have set up an auth guard, bu ...

javascriptangulartypescriptauthenticationangular-material

What is preventing me from assigning a value of false to my JavaScript variable?

I'm encountering an issue where the articleExists variable is not being set to true on line 6, even though I have used console logs to double check that the if statement containing it is functioning properly. app.post("/articles", function(req, res) ...

javascriptvariablesboolean

Creating a customized JSON object with Laravel framework

Hey Team, I'm facing an issue with structuring my JSON output correctly. What I have in mind is the desired output below: { comments: { data: { created_at: "date", other: "etc", from: { username: ...

phparraysjsonlaravellaravel-4

What is the reason behind VueJs not having built-in support for multiple select options?

Recently delving into the world of vue, I encountered a challenge while working on an update form. When trying to pre-select multiple options using the selected attribute, I noticed that only the last option was being selected. Upon further investigation, ...

javascriptvue.jsvue-componentvue-multiselect

How can I update the source of an HTML video element seamlessly without causing any glitches?

I'm attempting to create a video call interface that plays videos generated based on user responses. I want the ability to seamlessly switch between the currently displayed video and the next generated video without the HTML collapsing and rebuilding ...

javascripthtmljquerycssvideo

Transforming Symfony2 entities into JSON arrays using FOSRESTBundle for serialization

I am currently facing an issue with serializing an array of entity Game into JSON format. Initially, I encountered a circular reference exception which I was able to resolve (although my solution may be the root cause of the problem). At the moment, when ...

jsonrestsymfonyserializationmime-types

How can you transform the outcome of a TYPO3 repository search into a JSON format?

Is it possible to convert the outcome of a "findAll()" function on a Repository into a JSON object, make changes to specific properties in JavaScript, and then send it back to the Action, converting it again for use by the Action to persist it in the datab ...

javascriptjsontypo3