What is the best way to extract values from a custom type in TypeScript?

Currently, I am collaborating on a project using Angular and Django. The data is being sent from Django to Angular using GraphQL. In Angular, I have created a custom type called "TopicType" where I successfully captured the data. However, I encountered an issue with the type as I am sending both the name and score of topics and I need the values to be separated. Below is my type.ts file:

export type TopicType = {
subreddit : string;
score : number;
}
export type Query = {
all_Topics : TopicType[];
}

This is how I retrieve the data in api-service.ts :

public getAllTopic = () =>{
this.apollo.query({
  query: gql`query getTopics{
    allTopics {
      subreddit
      score
    }

  }

  `
}).subscribe(result => {
  this.graphql_topics = result.data as TopicType[];
  console.log(this.graphql_topics)
  return this.graphql_topics;
})
}

As shown in the result here:

Navigator console

I am trying to access each topic and its corresponding score by using this.graphql_topics[0], but it's not yielding the desired outcome.

Answer №1

A property called allTopics stores the array. To access it, use this.graphql_topics.allTopics.

Answer №2

After some searching, I discovered the solution: instead of using this syntax:

this.graphql_topics.allTopics[0].subreddit

and so on..

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

Best practices for accessing session values in Angular 8's Oninit lifecycle hook

When I log in, I store the access token on session storage and try to access it in other components using the oninit() method. However, I keep getting a null value. Upon checking the console, I can see that the token is being stored in the session. Here i ...

Obtaining an array of objects through the reduction of another array

Currently, my goal is to extract an array of objects from another array. Let's say I have an array consisting of strings: const strArr = ["Some", "Thing"]; The task at hand is to create a new Array containing 2 objects for each st ...

The Angular application is currently building successfully, however when launched it displays a blank white screen. Upon checking the network tab

Seeking assistance as I am encountering a blank screen in the browser after debugging my Angular 15 application. The workspace does not exhibit any issues or errors. However, upon exploring the Network tab in DevTools, I observed that config.js, styles.css ...

What is the proper way to link a component so that it refreshes whenever a value is modified?

Currently, I have developed a basic application that is designed to retrieve the current weather information for a specific location. By default, this application sets a particular location but offers buttons in one of its components for users to change th ...

Reduce the value of the variable within a different component within an angular framework

I am working with 2 different components: Left Component Main Component Left Component The left component contains a button that can only be clicked 5 times. Once it has been clicked 5 times, the button becomes disabled. <button class="btn gbtn ...

How to utilize TypeScript fetch in a TypeScript project running on node with Hardhat?

During a test in my hardhat project on VSCode, I encountered the need to retrieve the metadata object of my NFT from a specified URL. Initially, I assumed I would have to import fs to read the URL. However, while typing out the method, I impulsively opted ...

Steps for combining angular2-datatable with angularfire2 observable array:

Hey there! I am currently working on integrating angular2-datatable into my Angular 2 application. However, I have a query which is puzzling me: How can I transfer the array information from an angularfire2 observable to the data-table? Here is a screensho ...

Navigating the memory heap fatal error in Angular: Strategies for resolution

My project is encountering a fatal error upon startup, despite trying numerous solutions. If anyone has insight on how to resolve this issue, I would greatly appreciate it. ng serve ⠴ Generating browser application bundles (phase: building)... <--- La ...

What is the best way to send the index value from a ngFor loop to the component?

I am facing an issue with my code where I have an ngFor loop. Within this loop, there is a div element and I need to pass the index value to the TypeScript file when this div is clicked. As I am new to Angular 2, any guidance on how to achieve this would ...

Dynamic user input using an enumeration

I am looking to develop a flexible input component (in React) that can dynamically generate different types of inputs based on the enum type provided along with relevant inputProps. The idea is to switch between different input components based on the type ...

What is preventing me from assigning to a class variable within a $http success handler?

During the course of my project, I have encountered a perplexing situation that is difficult to comprehend. My intuition tells me that the issue lies in a peculiar nuance of javascript while I am working in TypeScript. Unfortunately, I am unable to prove t ...

The dynamic key for an object is not being inferred by Typescript

In my Redux action, I have a simple setup: export interface UpdateUserSettingsPayloadType { videoInput?: MediaDeviceInfo; audioInput?: MediaDeviceInfo; audioOutput?: MediaDeviceInfo; } export const updateUserSettings = ( payload: UpdateUserSetting ...

Testing an Angular service call

I am currently testing whether a button click will trigger a method call in the service. Here is an excerpt of the component content: ngOnInit() { try { //GET ALL ITEMS this.service.getAll().pipe(untilDestroyed(this)).subscribe((result) =& ...

How to update an Angular 2 component using a shared service

My question is regarding updating components in Angular 4. The layout of my page is as follows: Product Component Product Filter Component Product List Component I am looking to link the Product Filter and Product List components so that when a user c ...

The React TypeScript MUI Autocomplete is giving an error: "Type 'Product[]' cannot be assigned to type 'readonly never[][]"

Having trouble with a ReactJS useEffect hook in an Autocomplete field while using Typescript version 4.9.5. The VS code editor is flagging an error on the line options={products}. Any assistance on resolving this issue would be greatly appreciated. You c ...

A TypeScript function that returns the ReturnType of a specific callback function

Is it possible to define an annotation for a function that accepts a callback, and have the function return type determined by the callback's return type? // Suppose the callback takes a number as argument function processCallback(cb: (arg:number) =&g ...

The TypeScript compiler is searching in an external directory for the node_modules folder

My angular 2 project is located in the directory /c/users/batcave/first_project. In that same directory, I have various files such as index.html, systemjs.config.js etc., and a node_modules folder that only contains @types and typescript. This means my @a ...

Can you explain how TypeScript module resolution handles global values?

After installing @types/jest, I noticed that jest's corresponding typescript definitions were detected automatically. However, when I started implementing integration tests with cypress (which uses mocha), I encountered a problem where mocha type defi ...

Using useEffect with promises causing TypeScript errors

useEffect(login, []) In this case, the login function returns a promise and the useEffect hook is triggered without expecting a return value. However, TypeScript shows errors like: Argument of type '() => Promise<void>' is not assi ...

Is it feasible to make a <mat-form-field> unfocusable?

Within my form field setup, a simple form field is presented: <mat-form-field> <mat-label>A label</mat-label> <input matInput type="text"/> </mat-form-field> By default, clicking on any part of the form field tr ...