What is the best way to extract accurate information from an observable?

I'm having trouble retrieving the correct data from an observable in my project. Here is the code for my API call:

    getLastxScans(amount: number): Observable<Scan[]> {
    return this.http.get<Scan[]>(`${this.ROOT_URL}/Scan/amount/${amount}`);
  }

When I subscribe to the above call, it returns:

{scans: Array(30)}

However, when I try to store this data in a Scan[] array, it doesn't work as expected. Do I need to access the nested data inside the object? If so, how can I achieve this? Here are the two ways I have tried:

    this.deviceService.getLastxScans(this.scanAmount)
      .subscribe(scans => this.scans = scans);

And also tried:

this.deviceService.getLastxScans(this.scanAmount)
    .subscribe(res => this.scans = res.scans);

Answer №1

When accessing the array as the value of the scans key in the response, you can utilize the following:

this.deviceService.getLastxScans(this.scanAmount)
    .subscribe(res => this.scans = res.scans);

An alternative approach suggested in the comments is:

getLastxScans(amount: number): Observable<Scan[]> {
   return this.http.get<Scan[]>(`${this.ROOT_URL}/Scan/amount/${amount}`)
              .pipe(
                 map((res:any) => res.scans)
              );
}

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

When utilizing TS Union Types from an Array, the resulting type will consistently be a

After reading this response, I decided to create some union types from a string[] in order to return a list of valid type values. However, instead of that, the type ends up accepting any string value. const arrayDays = Array.from(Array(32).keys(), (num) =& ...

I'm curious, which ref tag should I utilize for draft.js?

I'm currently working on a form using Draft.js with Next.js and TS, but I've encountered some errors in my code. Here is what I have so far: import {Editor, EditorState} from 'draft-js'; const [editorState, setEditorState] = useState( ...

Receiving the [object HTMLInputElement] on the screen rather than a numerical value

I have an input box where a user can enter a number. When they click a button, I want that number to be displayed on the page. However, instead of seeing the number, I am getting the output as [object HTMLInputElement]. Below is my TypeScript code: let qu ...

Flex: 1 does not completely fill the Angular layout div in vertical dimensions

I am currently developing a sidebar using Angular and Flex. The app-sidebar is nested within the Angular component layout shown below: <div fxlayout="row" fxFill> <app-sidebar fxLayout="column" fxFlex="10%"></app-sidebar> <div ...

Drizzle ORM retrieve unique string that is not a database column

I'm working with a SQL query that looks like this: SELECT * FROM ( SELECT 'car' AS type, model FROM car UNION SELECT 'truck' AS type, model FROM trucks ) vehicles; In Drizzle, I'm trying to replicate the 'car ...

What is preventing MenuItemLink from being displayed in the menu?

I have created a unique page for users to purchase subscriptions, but I am having trouble accessing that page because the button is not appearing in the menu. I followed the steps outlined in the official guide, but only the dashboard and resources buttons ...

What is the procedure for accessing a namespace when declaring it globally?

Website Project Background Currently, I am working on a simple website where users can update their pictures. To achieve this functionality, I am utilizing the Multer library along with Express in Typescript. Encountered Issue I am facing a challenge re ...

The Uncaught SyntaxError issue arises when configuring webpack and Karma together

I am setting up webpack + karma + angular 2 and encountering a Uncaught SyntaxError : Unexpected token import. I am puzzled by the cause of this error. When I execute $karma start, it throws this error. Please assist me. Error START: webpack: bundle is ...

Observable emitting value after execution of method

Why does the getModel() method always return an array with empty name arrays even when the languages Observable returns a value? export interface Category extends BaseModel { code: string; name: LocalizedValue[]; description: Local ...

Oops! The mighty gulp-clean frowns upon attempts to eradicate files outside its domain

Whenever I execute the command: gulp clean I encounter an error even though I tried using: gulp clean --force but it didn't work. Could someone please clarify what might be causing this issue or what mistake I am making? Your help would be greatly ...

Guide on including a in-browser utility module from single-spa into a TypeScript parcel project

There are 3 TypeScript projects listed below: root-config a parcel project named my-app an in-browser utility module called api All of these projects were created using the create-single-spa command. In the file api/src/lomse-api.ts, I am exporting the ...

The CSS overflow scroller trims the excess background color

Attempting to build a website, I encountered an issue with displaying a scroll bar. Despite using the CSS property overflow: auto, I faced another problem. Let me illustrate the issue through a simple example. I have an outer div with the style overflow: ...

Component with a dynamic CSS file implementation

I am looking to empower users of my app with the option to select a theme. To achieve this, I have created multiple SCSS stylesheets that offer variations in design elements. However, I am faced with the challenge of loading the appropriate stylesheet base ...

Tips for improving the performance of your Ionic 2 app

Recently, I've been working on enhancing the performance of my Ionic 2 App, particularly focusing on optimizing page loading speed. After closely analyzing the timeline of page transitions using Chrome Dev Tools, it became evident that the bottleneck ...

Can you explain the distinction between "parser" and "parserOptions.parser" in an ESLint configuration?

For a considerable amount of time, I have been using the TypeScript and Vue presets provided below. While it has been functional, I realize that I do not fully comprehend each option and therefore seek to gain a better understanding. Firstly, what sets apa ...

NGRX: Issue with http retry interceptor preventing failure action from triggering

Incorporating NGRX into my project, I am looking to implement simple GET requests to an API that are retried up to five times. The reason behind this is occasional throttling from Azure Cosmos-DB (free-tier). To achieve this, I have set up an http-interce ...

Troubleshooting a GET Request Hanging Issue with Next.js 13 Route Handler

I'm currently encountering an issue with the new routing feature in my Next.js 13 project. I have a route handler set up in app/api/ingresos/route.ts with the code snippet below: import { NextResponse } from 'next/server'; import PocketBase ...

On which platform is the getFeatureInfo request constructed using Cesium?

Currently, I am working with Cesium and Angular. I am trying to locate where the request URL is generated for GetFeatureInfo in Cesium, but unfortunately I am unable to find it. My goal is to display feature information when clicking on the map. However, ...

What purpose does a cast serve when used on a return type that is defined generically?

Consider this straightforward property access function export function accessProperty<T, K extends keyof T, P extends T[K]>(name: K, v: T): P { return v[name] as P } What is the significance of the cast as P in this context? I experimented with ...

"What sets apart the usage of `import * as Button` from `import {Button}`

As a newcomer to Typescript, I am facing an issue while trying to import a react-bootstrap Button. In scenario 1: import {Button} from 'react-bootstrap/lib/Button' In scenario 2: import * as Button from 'react-bootstrap/lib/Button' B ...