Choosing specific information in Typescript response

I am encountering an issue with my HTML where it displays undefined(undefined). I have checked the data in the debugger and I suspect that there may be an error in how I am using the select data. Here is a snippet of the code:

<div *ngIf="publishItemsWarningMessage" class="text-danger">
    {{publishItemsWarningMessage}}
    <ul>
        <li *ngFor="let detail of publishItemsWarningMessageDetails">
            {{detail}}
        </li>
    </ul>
</div>

Here is the TypeScript code snippet:

if (response.UnpublishedRelatedTemplates.length > 0) {
    this.publishItemsWarningMessageDetails = Enumerable
        .From(response.UnpublishedRelatedTemplates)
        .Select(UnpublishedRelatedTemplates => response.UnpublishedRelatedTemplates.RelatedTemplateId + " (" + response.UnpublishedRelatedTemplates.TemplateId + ")")
        .ToArray();
}

Upon debugging, I can see the issue visually as shown below:

The UI display shows undefined (undefined).

javascriptangularasp.net-mvctypescript

Answer №1

Revise your Typescript code as shown below. Replace 

response.UnpublishedRelatedTemplates
with UnpublishedRelatedTemplates inside .Select(...)

if (response.UnpublishedRelatedTemplates.length > 0) {
    this.publishItemsWarningMessageDetails = Enumerable
        .From(response.UnpublishedRelatedTemplates)
        .Select(UnpublishedRelatedTemplates => UnpublishedRelatedTemplates.RelatedTemplateId + " (" + UnpublishedRelatedTemplates.TemplateId + ")")
        .ToArray();
}

Elaboration The reason you are encountering undefined is because within the Select function, you are utilizing 

response.UnpublishedRelatedTemplates.RelatedTemplateId
while 
response.UnpublishedRelatedTemplates
is actually an array, therefore it does not possess a property called RelatedTemplateId. Instead, you can access the value using the index [index] method such as 
response.UnpublishedRelatedTemplates[index].RelatedTemplateId
.

Since you are already iterating through the array, the variable UnpublishedRelatedTemplates will represent the values of 

response.UnpublishedRelatedTemplates[index]
. Hence, you can directly substitute it.

Test it out here

let response = {
  UnpublishedRelatedTemplates: [{
    RelatedTemplateId: 'TMRelated2',
    TemplateId: 'TMRelated1'
  }, {
    RelatedTemplateId: 'TMDummy2',
    TemplateId: 'TMDummy1'
  }]
};

if (response.UnpublishedRelatedTemplates.length > 0) {
  let publishItemsWarningMessageDetails = Enumerable
    .From(response.UnpublishedRelatedTemplates)
    .Select(UnpublishedRelatedTemplates => UnpublishedRelatedTemplates.RelatedTemplateId + " (" + UnpublishedRelatedTemplates.TemplateId + ")")
    .ToArray();

  console.log(publishItemsWarningMessageDetails);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/linq.js/2.2.0.2/linq.min.js" integrity="sha256-dq1fzSor46Oc+U/DjuE2hKKN0FfvbVx+CW5GBn1mhiQ=" crossorigin="anonymous"></script>

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

Dealing with a large amount of HTML content following an Ajax request: best practices

I'm currently using a method that works fine, but I can't stop thinking about whether there might be a better way to achieve the same result. The task at hand is to display a user profile in a modal box. When a user clicks on a button or link, a ...

javascriptphpjqueryhtmlajax

Show or hide specific elements based on parameters using ng-show in Angular

One challenge I am facing is how to manage a menu with multiple buttons that open submenus without using a massive switch statement in my code. Instead, I want to try something different: In the HTML file, I call the function toggleVis and pass the nam ...

javascriptangularjs

Exploring the movement from one component to another in React Native

When working with React Native, I encountered a challenge in navigating between two views. The issue arises from having the button to navigate on one component while my main component is elsewhere. I am using react-navigation for this purpose. Here's ...

javascriptreactjsreact-nativereact-routerreact-navigation

Discovering the bottom scroll position in an Angular application

I am working on implementing two buttons on an Angular web page that allow the user to quickly scroll to the top and bottom of the page. However, I want to address a scenario where if the user is already at the very top of the page, the "move up" button sh ...

angulartypescript

Step-by-step guide on how to activate a colorbox using a targeted Id or class

Below is the code I'm currently working with: <div class="hidden"> <div id="deletePopContent" class="c-popup"> <h2 class="c-popup-header">Delete Practice Sheet</h2> <div class="c-content"> <h3 ...

javascriptajaxjsonjquerycolorbox

Display identical text using JavaScript filter

My search filter highlight is currently displaying [object Object] instead of <mark>match values</mark> when replacing the values. This is the code I am using: this.countries.response.filter((val) => { const position = val.value.toLowerCa ...

javascripthtmltypescriptstenciljs

The event.pageY position consistently reflects the laptop screen size rather than the exact position where the click occurred

My webpage is scrollable, but the event.pageY position always corresponds to my screen size. Even when scrolling down and clicking near the top of the screen, it registers as 50px. I am currently utilizing event.pageY While this functions correctly on a ...

javascriptjqueryhtmlcss

Show a variety of logos on the website based on the current date

I've been experimenting with displaying a unique logo on my website based on the current date (for example, showing a Christmas-themed logo during December). Here's what I have so far: <img class="logo" id="global_logo" sty ...

javascripthtml

The error message "Property 'value' is not present on type 'EventTarget & HTMLSelectElement'" indicates that the 'value' property is not recognized on the Event

Here is the code snippet that I am working with: interface IHandleSelection { (value: string): any | void; } interface IPipeChangeEventValueToFunction { (handler: IHandleSelection): (event: React.ChangeEvent<HTMLSelectElement>) => void; ...

reactjstypescript

Managing numerous post requests with Angular

Dealing with a large form containing HTML input elements, I have implemented a functionality where a POST request is made to a WebAPI whenever there is a change in the input value. Sometimes, multiple POST requests are triggered within seconds, causing da ...

c#angularasp.net-core-webapi

Utilize DataTables with a custom search form for enhanced data filtering

I rely on DataTables for its advanced functionality in creating tables with paging capabilities. When submitting data through a standard jQuery Ajax request using my own form, the returned data is formatted and then passed to the DataTables function to en ...

javascriptphpjqueryajaxdatatable

Retrieve the data set's value upon clicking the button

In this HTML snippet, I am looping over a data set. Upon clicking the button, I aim to retrieve a specific value, such as the id from the data set for use in my TypeScript file. <div *ngFor="let item of assignmentlist; let i = index"> < ...

angular

In the realm of numeric input in JavaScript (using jQuery), it is interesting to note that the keyCode values for '3' and '#' are identical

I am in need of setting up an <input type="text" /> that will only accept numeric characters, backspace, delete, enter, tabs, and arrows. There are many examples out there, and I started with something similar to this: function isNumericKeyCode (ke ...

javascriptjquerykeypressnumerickeydown

Using jQuery to arrange information from an API into a table

Currently, I am in the process of learning jQuery as it is a new concept for me. I have attempted to make a request to an example API and received an array of objects that need to be listed in a table. However, I am facing difficulty in sorting it within t ...

javascripthtmljqueryjsonajax

The navigation bar in React Router is interfering with the loading of other components

Currently, I am in the process of setting up a simple navigation bar that consists of basic buttons without any complex functionality. However, I have encountered an issue where placing the navbar inside the switch prevents other components from loading ...

javascriptnode.jsreactjsexpressreact-router

Customize the size of data points on your Angular 2 chart with variable

In my Angular 2 application, I am utilizing ng2-charts to create a line chart. The chart functions properly, showing a change in color when hovering over a point with the mouse. However, I want to replicate this behavior manually through code. Upon clicki ...

javascriptangularjsangularchart.jsng2-charts

The alert box for model validation summary errors is deactivated when hidden using .hide() method

In my MVC web application form, there is an optional postcode finder. If there is no match for the entered postcode, I add a custom error message to the .validation-summary-errors section. After the error is fixed, I remove all instances of the postcode cl ...

javascriptjqueryasp.netasp.net-mvc

Can the mDNS string received through webRTC be decoded to retrieve a user's IP address?

After doing some thorough research, I came across this insightful response from a different Stack Overflow question. The problem at hand involves retrieving an mDNS string, which looks like this: abcd1234-1e1e-1e1e-1e1e-abcd1a2bc3de.local I have a genuin ...

javascriptipwebrtc

What causes the error message "No exported member 'ɵɵFactoryDeclaration' in @angular/core/core" to appear during project compilation?

I am facing an issue where the global Angular CLI version is 13.0.1 and the local version in my project is 10.2.3. Despite making changes to some components (without touching package.json), I encountered an error during the build step of my bitbucket pipel ...

node.jsangulartypescriptnpmbitbucket

Ending the Firefox browser using JavaScript

I have been trying to use the basic window close javascript command window.close(); but it seems to only work in IE and not in any other browser. Can anyone provide assistance on how to successfully close a browser tab in Firefox, Opera, or Chrome? Thanks ...

javascriptfirefox