Transforming Json data into an Object using Angular 6

https://i.stack.imgur.com/JKUpL.png

This is the current format of data I am receiving from the server, but I would like it to be in the form of an Object.

public getOrder(): Observable < ORDERS > {
  return this._http.get < ORDERS > (`${this._apiBase}/charts/list/ORDERS/`);
}

This is how the data is currently being retrieved from the server.

ngOnInit() {
  this._dashService.getOrder().subscribe(order => {
    this.orders = order;
    console.log(this.orders);
  })
}

Answer №1

It is likely that your service is failing to define the Content-Type attribute in the http header as application/json.

If you have control of the service, consider adjusting the response's header property. If making modifications is not an option, attempting to use the JSON.parse() method may be helpful.

Answer №2

Here's the solution you need!

function retrieveOrders(): Observable < ORDERS > {
  return this._http.get(`${this._apiBase}/charts/list/ORDERS/`).map((response) => <ORDERS> response.json())
}

Answer №3

To easily handle your response, you can utilize the json method.

public retrieveOrderData(): Observable < ORDERS > {
  return this._http.get(`${this._apiBase}/charts/list/ORDERS/`)
                   .map((res) => res.results as ORDERS[] || [])
                   .catch((error:any) => Observable.throw(error.json().error));
}

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

Using JavaScript to generate JSON data in a plain text format rather than using HTML

I have a snippet of code that retrieves the user's location every 5 seconds. <div id="geo" onLoad=""></div> <script> function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPo ...

Having Issues with JSFiddle: Difficulty with executing a basic onclick event to display a string

Having trouble with an onclick event: Simply click the button to run a function that displays "Hello World" in a paragraph element with id="demo". <button onclick="myFunction()">Click me</button> <p id="demo"></p> <script> ...

Incorporating useState into React Native navigation screens to dynamically update FlatList items

I'm working on implementing react-navigation to pass and update useState between screens in order to render a flatlist. The issue I am facing is that the flatlist updates correctly when I navigate back to the previous screen and then return to the com ...

Incorporate text/sentences from a file into a collection of strings in C

Being a novice programmer, currently enrolled in university, I have been assigned the task of creating a text-based adventure game in less than 2 months of studying programming. The requirement is that the game's text should be stored in a file. Init ...

Encountering the "Cannot set headers after they are sent to the client" error within an Express.js application

In my recent project, I created a middleware to authenticate users and verify if they are verified or not. Initially, when I access protected routes for the first time, everything works fine and I receive success messages along with verification of the JWT ...

Navbar active class not updating on jQuery page scroll

My one-page website has a fixed navbar that I want to change its active status when scrolling down to specific div positions. Even though I tried using jQuery, the code doesn't seem to work as intended. Here is the snippet: // SMOOTH SCROLLING PAGES ...

Issue with the JSON response in MVC 4

I have been struggling to bind JSON values to specific text boxes. It works with dynamically created textboxes but not with static ones that are already present. I've been stuck on this issue for 2 days and despite searching the internet, I couldn&apo ...

Sending a parameter from a click event to a function

Struggling with a jQuery and AJAX issue all night. I am new to both and trying to implement something similar to this example. I have an edit button with the ID stored in a data-ID attribute. Here's an example of what my button looks like: <butto ...

Ways to retrieve JSON information from various URLs in the R programming language

Having some difficulty downloading multiple data files in r from various urls where only the number changes. I have successfully downloaded code for a single file, but now I need to download a string of numbers (e.g. 29208, 49510, 54604, 62759, 62760, 70 ...

"Crafting a Handlebars template for a dynamic and interactive data

After recently incorporating handlebar.js into my projects, I find it quite intriguing. Everything has been smooth sailing so far, but I've hit a roadblock while attempting to create dynamic data grids using a template. Here is the JSON data I have: ...

Trying to understand the strange behavior of HTML parsing with jQuery in Javascript and Firefox

I have been working on a script to parse an HTML page using jQuery. The script runs smoothly in Chrome, IE, and Safari, but I'm facing some unexpected behavior while testing it in Firefox (version 36.0.1). Here's the code snippet: $.ajax({ u ...

Refresh content on an HTML page using information retrieved from an external PHP post request

So, I have a problem with communication between my two web pages - mobile.html and video.php. The idea is for mobile.html to send an AJAX post request containing a single variable to video.php. Video.php should then read this variable and pass it to a Java ...

The Oracle Database listener is unaware of the service specified in the connect descriptor for node-oracledb

Having recently transitioned from on-premise databases using Oracle 11g to the Cloud where I needed to connect to Oracle 12c, I encountered an issue with my nodejs application. While it worked fine on-premises, in the cloud it threw the following error: e ...

Is there a benefit to using middlewares instead of the standard built-in functions in Express.js?

Express.js offers a wide range of middlewares that replace built-in functions. One example is body-parser, which parses HTTP request bodies, replacing the built-in function express.bodyParser. body-parser replaces the built-in function express.bodyParse ...

Discover the process of selecting an item from a list and viewing it on a separate page with the help of AngularJS and Ionic technology

I am struggling with creating a list of items that, when clicked, should take me to the corresponding post. Despite trying to use ng-click in the header, I suspect there is an issue with the route not functioning properly. As part of my testing process, I ...

Encountering the error message "React child cannot be an object" while trying to map over an imported object referencing components

I have an array in a separate file that I import and iterate over in another component. One of the properties within this array, labeled component, actually refers to a different individual component. I am attempting to render this component, but I keep e ...

Anomalous behavior of buttons in react-redux

Currently, I have a basic counter set up in react-redux as part of my learning process with these frameworks. My goal is to create a pair of number input fields that determine the payload for an increment/decrement action sequence. The intended outcome is ...

Issues with utilizing Fetch API and JSON Data

I'm encountering some difficulties while trying to interact with my json file. I am using the fetch API to retrieve my json file but, unfortunately, when I log the response to the console, I don't see any data returned. Instead, what appears is a ...

Is it possible to target elements within a UMAP iframe using CSS?

I have integrated a uMap map into my website. Here is the code: <iframe id="umapiframe" class="iframe-umap" width="100%" height="300px" frameborder="0" allowfullscreen src="//umap.openstreetmap.fr/f ...

Utilizing NodeJS application to connect to Sharepoint 2019 On-Premises Web Services

Recently, I/T in my organization set up a new Sharepoint 2019 OnPromise with a hybrid configuration that utilizes Azure AD for authentication. As the site collection admin for our Sharepoint website, the URL to access it is Upon accessing this URL, I am ...