How can I retrieve List<T> from a Razor Page using TypeScript?

Within my ViewModel, I have an Items collection:

public class ItemViewModel{
   public List<Item> Items {get;set;}
}

In the Index.cshtml file:

@if(Model.Items != null){
     <li><a id="item-id-link" href="#" data-items="@Model.Items"> ...
}

I am attempting to retrieve data using TypeScript:

function getData(context: Jquery){
....
     context.find("item-id-link").click(e => {
          const items = #(e.target).data('data-items');
     });
}

However, when accessing the items, I get a list of item datatype instead of actual items:

"System.Collections.Generic.List`1[ItemViewModel]"

I have tried using a for of loop to inspect each element in the list:

for (let item of items) {
     console.log(item);
}

Unfortunately, this returns each word of

"System.Collections.Generic.List'1[ItemViewModel]"

Adding .ToList() in the Razor Page did not resolve the issue.

Any suggestions on how to handle this situation?

Answer №1

To access the @Model.Items collection, you should update it like this:

@if(Model.Items != null){
  <li><a id="item-id-link" href="#" data-items="@string.Join(", ", Model.Items.Select(c=>c.Id))"> ...  
   // assuming that the Item class has an Id property
}

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

Issue with unapplied nullable type during export操作

I'm struggling to understand why my nullable type isn't being applied properly Here's an illustration interface Book { name: string; author: string; reference: string; category: string; } async function handleFetch<T>(endpoin ...

Transforming an array of flat data into a hierarchical tree structure

I'm facing a challenge with my script. I have an Array of FlatObj and some rules, and I need to create a converter function that transforms them into TreeObj. The Rules are: If an object has a higher depth, it should be a child of an object with a l ...

Using *ngFor to iterate through a nested collection in an Angular 2 application

I'm currently working on a challenge involving drilling down to iterate over an array within another collection of arrays within an Angular 2 application. To start off, I have set up my component to subscribe to an observable in the ngOnInit lifecycle ...

Access to the server has been restricted due to CORS policy blocking: No 'Access-Control-Allow-Origin'

I’m currently encountering an issue with displaying API content in Angular and I’m at a loss on how to troubleshoot it and move forward. At this moment, my main objective is to simply view the URL data on my interface. Does anyone have any insights or ...

Reusing Angular routes across different modules for backbutton functionality

Insights on my Application (Angular 12): Comprises of 3 Modules, each containing an overview page with a list and specific detail pages Each route is assigned an area tag to identify the user's navigation within the module Goal for Angular´s RouteR ...

The ValidationSchema Type in ObjectSchema Seems to Be Failing

yup 0.30.0 @types/yup 0.29.14 Struggling to create a reusable type definition for a Yup validationSchema with ObjectSchema resulting in an error. Attempting to follow an example from the Yup documentation provided at: https://github.com/jquense/yup#ensur ...

Build a unique array of identifiers extracted from an object

I am seeking advice on how to extract an array of IDs values by iterating through an object in React JS. const initialState = useMemo(()=> { return dataTable.filter(result => favorites.some(favorite => result.id === favorite.id)) },[ ...

Angular2 Cascading Animations

I have been working on implementing cascaded animations for a list of elements. Although I successfully applied the state triggers, following the guidelines in the documentation, I am encountering an issue where all element states are being applied simult ...

Navigating with Angular 2: Redirecting Azure AD login URI

I am currently exploring Azure AD integration for logging into an Angular 2 application. The Github link provided below demonstrates a simple method to log in without the use of any authentication libraries. Sign in via Microsoft Graph using Typescript an ...

Updated the application to Angular 6 but encountered errors when attempting to run npm run build --prod. However, running the command npm run build --env=prod was executed without any issues

Running the command npm run build -- --prod results in the following error messages: 'PropertyName1' is private and can only be accessed within the 'AppComponent' class 'PropertyName2' does not exist in type 'AppCompo ...

Create Functions to Encapsulate Type Guards

Is it possible to contain a type guard within a function as shown below? function assertArray(value: any): void { if (!Array.isArray(value)) { throw "Not an array" } } // This doesn't work function example1(value: string | []) { a ...

Using the spread operator in Typescript with an object that contains methods

Within my Angular project, I am faced with an object that includes a type and status field where the status can change depending on the type. While some might argue that this is not the best design practice, it is how things are currently structured in my ...

Exploring Angular: The Dynamic Declaration of object.property in ngModel

<input [(ngModel)]="Emp."+"dt.Rows[0]["columnname"]"> This scenario results in an undefined value In my current project, I am leveraging the power of a MVC CustomHtmlHelper to generate textboxes dynamically based on database schema. The textbox ...

Passing data through Angular2 router: a comprehensive guide

I am currently developing a web application with the latest version of Angular (Angular v2.0.0). In my app, I have a sub-navigation and I want to pass data to a sub-page that loads its own component through the router-outlet. According to Angular 2 docume ...

Encountered an issue during the transition from Angular 7 to Angular 9

After following the advice in the second response of this discussion, I successfully upgraded to Angular 9. However, I am now encountering an issue in the browser console when running my project. Package.json "dependencies": { "@angular-devkit/build- ...

The Conundrum of Angular 5 Circular Dependencies

I've been working on a project that involves circular dependencies between its models. After reading through this StackOverflow post and its suggested solutions, I realized that my scenario might not fit into the category of mixed concerns often assoc ...

Retrieve the HTML data from a form created with Angular

Here is an example of an Angular form: <div #myForm [formGroup]="myForm"> <select formControlName="productName" class="form-control"> <option value="">Select</option&g ...

Unable to display animation without first launching it on Rive web

I attempted to incorporate a Rive animation into my Angular web application <canvas riv="checkmark_icon" width="500" height="500"> <riv-animation name="idle" [play]="animate" (load)=&qu ...

Next.js Enhanced with Google Analytics

I've been experimenting with integrating Google Analytics into Next.js, following a tutorial on YouTube - https://www.youtube.com/watch?v=lMSBNBDjaH8 Following the instructions in the video, I added these two scripts in _document.js: <script async ...

Guide to Integrating BLK Theme into an Angular CLI Project

I've recently set up an Angular project using CLI and I am interested in integrating the BLK theme by Creative Tim into this project. However, the only available option from Creative Tim is to download a pre-existing project and build upon that framew ...