Retrieve information from the server in an alternative data format

I am looking to store backend data in a variable called scores.

The data from the backend is currently stored as scores1:

(5) [Array(4), Array(4), Array(4), Array(4), Array(4)]
0: (4) ["fake algorithm 1", "fake_scalar_1", "none", 0.679]
1: (4) ["csic's algorithm", "fake_time_series_1", "mean", 0.954]
2: (4) ["csic's algorithm", "step_length_right", "mean", 0.654]
3: (4) ["csic's algorithm", "step_length_left", "mean", 0.351]
4: (4) ["csic's algorithm", "step_time_right", "mean", 0.378]

We want to transfer this data into our scores object.

Components.ts:

experiment1: scores[] = [];
id1: number;
id2: number;
selectedExperiments: number[];
scores1: any;

ngOnInit() {
    this.selectedExperiments = this.experimentService.getTheId();
    console.log(this.selectedExperiments);
    this.id1 = this.selectedExperiments[0];
    this.id2 = this.selectedExperiments[1];
    this.compareService.getScore(this.id1)
    .subscribe(response => {
      this.scores1 = response;
      for(var i = 0; i<(this.scores1.length-1);i++){
          this.experiment1[i].algorithm_name=this.scores1[i][0];
          this.experiment1[i].pi_name=this.scores1[i][1];
          this.experiment1[i].agg_type=this.scores1[i][2];
          this.experiment1[i].score=this.scores1[i][3];
          console.log(this.experiment1[i]);
      }
    }
  );
  this.compareService.getScore(this.id2)
  .subscribe(response => {
    this.scores2 = response;
    console.log(this.scores2)}
  );

}

Using the scores class:

export class scores {
public algorithm_name: string;
public pi_name: string;
public agg_type: string;
public score: number;
}

Currently, I'm facing an issue where it doesn't recognize the algorithm name... The getScore() method from the service is functioning correctly, and using console.log(), I can see the data above.

Answer №1

Before you can access values in 'via', make sure to populate your 'experiment1' first.

Here is a suggestion:

for(var i = 0; i<(this.scores1.length-1);i++){
    const item = new scores();
    item.algorithm_name=this.scores1[i][0];
    item.pi_name=this.scores1[i][1];
    item.agg_type=this.scores1[i][2];
    item.score=this.scores1[i][3];
    this.experiment1.push(item);
}

The code snippet above demonstrates how to create and populate a 'scores' object in a loop before pushing it into the array.

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

What is the method for showcasing a specific value using a filter?

In my app, I have the following data: birthdayGreetings:Array<any> = [ { name: 'John', date: new Date(1994, 3, 19), greeting: 'Happy Birthday, John! Good luck!', displayName: false } ]; I ...

angular 2 checkbox for selecting multiple items at once

Issue I have been searching for solutions to my problem with no luck. I have a table containing multiple rows, each row having a checkbox. I am trying to implement a "select all" and "deselect all" functionality for these checkboxes. Below is an example o ...

Do I really need to create my own angular 2 development setup?

Have you explored the QuickStarter seed and Angular CLI tool available on the official Angular 2 website? These resources can help streamline the process of setting up your development environment. But do you still think it's necessary to build your o ...

Exploring the relationship among Node.js, TypeScript, JavaScript, and Angular

Sorry if this question has been asked before - I haven't come across a satisfactory answer yet. My Inquiry How are Node.js and TypeScript connected? What about TypeScript and Angular? I realize that TypeScript is a language that enhances Javascript& ...

Typescript sometimes struggles to definitively determine whether a property is null or not

interface A { id?: string } interface B { id: string } function test(a: A, b: A) { if (!a.id && !b.id) { return } let c: B = { id: a.id || b.id } } Check out the code on playground An error arises stating that 'objectI ...

Tips for preventing keyboard events from being inherited by all pages in the stack in Ionic framework

In my Ionic 3 app, I have a specific page called Page1 that requires customized keyboard handling. Here is how I implemented it on Page1: @Component({ ... host: { '(document:keydown)': 'handleKeyboardEvents($event)' } }) expo ...

Angular Material: Deleting an item when dropped outside a cdk component

Currently, I am utilizing Angular Material CDK DragAndDrop for specific list functionalities. My goal is to achieve the following: I want to be able to drag an element from List A and drop it into List B. Furthermore, if I drag an element from List B ...

Angular 6 encountering problems with event scheduling feature

I am currently working on creating an event calendar using the angular-calendar library in Angular 6. Everything is functioning properly during development, but I encounter errors and fail the build process when trying to compile the project. "private": t ...

Animated CSS side panel

I'm currently working on creating an animation for a side menu. The animation works perfectly when I open the menu, but the problem arises when I try to animate it back closed. Is there a property that allows the animation to play in reverse when the ...

Unsubscribe from Angular subscription request

When making requests from Angular to the back-end, I find that sending the same request with different parameters each time new values are entered into an input causes the data on the front end to be updated based on the server's response. How can I a ...

Having trouble decoding a cookie received from a React.js front-end on an Express server

When using React js for my front end, I decided to set a cookie using the react-cookie package. After confirming that the request cookie is successfully being set, I moved on to configure the Express server with the cookie parser middleware. app.use(cookie ...

What is the process for saving a file in Node.js?

I am currently using Angular for the frontend and have the following code in my project: Inside app.component.html <input type="file" (onchange)="handlefile($event)"> Located in app.component.ts file: File | null = null handlefi ...

What is the best way to retrieve a value from a JSON file that has multiple nested levels and returns matches from both objects?

My task involves filtering an array of objects that contain nested arrays, and returning a new array based on matches from both levels. The search is triggered by the (input) event, which executes with every key press. Check out the code on StackBlitz: Sta ...

Restricting the number of mat-chips in Angular and preventing the input from being disabled

Here is my recreation of a small portion of my project on StackBlitz. I am encountering 4 issues in this snippet: I aim to restrict the user to only one mat-chip. I attempted using [disabled]="selectedOption >=1", but I do not want to disable ...

What's the best way to implement an NPM package in a Deno application?

I am curious about integrating the NPM package into my Deno application. Can anyone guide me on how to achieve this? ...

What is the best way to implement live reloading for a complete full stack application?

I'm currently working on a basic full stack application that includes an Express server providing an API to interact with a database, as well as an Angular frontend that communicates with the API to showcase data from the database. Everything works sm ...

The transition from Angular 14 to Angular 15 leads to a compatibility issue with constructor parameters in a library

I recently developed a library specifically designed to extract server-side rendered environment variables with ease. This library offers a customizable base class for extension. For brevity, the method getEnvironmentValues() has been excluded: @Directive ...

How different is Angular Version 15 compared to Version 12 with missing files?

Currently, I am watching a tutorial on Angular 12.2.5 and attempting to follow along using the latest version 15.0.4. Unfortunately, I have noticed that I am missing several files and folders that the tutorial instructor has, such as the entire environmen ...

What is the best way to choose multiple elements within an Angular application?

<div class="modalmenu" > <div class="modal_itm" (mouseenter)="sepin(sepinout)" (mouseleave)="sepout(sepinout)"><a href="#in">HOME</a></div> <div class="sep" # ...

Using Typescript allows for the possibility of invoking a function with an incorrect parameter type

In the world of software development, there exists a function with the following signature: const validate = (input?: string) => void Behold, there is a Component with props type: type ValidateButtonProps = { onClick: () => void; } And lo, anothe ...