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:

https://i.sstatic.net/j8lgF.png

The UI display shows undefined (undefined).

https://i.sstatic.net/BwlF8.png

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

Transferring a variable from an Angular 2 constructor into the template via the then statement

I'm struggling with implementing a secure login system. My goal is to first check the device's native storage for an item named 'user', then verify if the user exists in our database, and finally retrieve the unique id associated with t ...

javascriptangulartypescriptionic2

What is the best way to enforce input requirements in Typescript?

I am currently facing an issue with two required inputs that need to be filled in order to enable the "Add" button functionality. I have considered using *ngIf to control the visibility of the button based on input values, but it seems to not be working. ...

angulartypescript

What might be the reason for jQuery not functioning in Internet Explorer 11?

Working on developing a slideout menu for my website using jQuery. It functions perfectly in Chrome, but encountering issues in Internet Explorer (IE11). Extensive search hasn't provided a solution yet. Seeking assistance and any help would be highly ...

javascriptjqueryhtmlcssplugins

Unable to successfully upload a .docx file within OnlyOffice utilizing JavaScript

Our application has successfully integrated the OnlyOffice editor. I am currently facing an issue while trying to upload a .docx file from my PC to the OnlyOffice server for later editing. Despite sending a POST request to the server using formdata, the fu ...

javascriptangularfile-uploadonlyoffice

Techniques for ensuring input validity using JavaScript

One of my form inputs is required: <input type="text" id="input-id" required> After the user submits it, I send the value using ajax and then clear it with $("#input-id").val(""). However, after this action, the input appears invalid. I want to ...

javascripthtmlcssfrontendrequired

The Angular app.component.html is failing to display the newly added component

Having some trouble rendering my new component in the browser. I've set up a fresh project using the Angular CLI and created a component named list-employees. Upon running ng serve -o, the project compiles without errors, but the browser displays a b ...

javascriptangularangular-cli

Utilizing AJAX to fetch and retrieve a JSON array

Check out the javascript code below: var formSerializedData = $('form#registration-form').serialize(); $.post( '<?php echo $this->url('/register', 'do_register')?>', function(response) { alert(response); } ...

javascriptphpajaxjsonconcrete5

Avoid Sequelize automatically appending 'Id' to column names caused by association configurations

When using Sequelize to query data, I've noticed that 'Id' is automatically added to the end of my column name. How can I prevent this from happening? Below is an example of the entity data Model for Sequelize that I have created: function ...

javascriptmysqlnode.jssequelize.js

Challenges encountered while implementing Cognito API with Angular's HttpClient and HttpHeaders

Recently, I've been facing a dilemma between HttpClient and Axios. When I implement the following code: const requestBody = { grant_type: 'refresh_token', client_id: environment.APP_COGNITO_CLIENT_ID, refresh_token: thi ...

angularamazon-web-servicesamazon-cognito

Can Vue instances support private computed properties?

Vue is a versatile tool that I utilize for both service classes and components. When it comes to reactive computeds, they prove to be incredibly beneficial. However, I often find myself wanting a clear way to differentiate between public interface compute ...

typescriptvue.js

Instructions on how to reset or restore to the initial spawn point

I am currently attempting to simulate a spawn process using the mock-spawn module. However, I am encountering issues with restoring the mock after running subsequent tests. I attempted to use mySpawn.resotre(), but it appears that this function does not e ...

node.jsunit-testingtypescriptmocha.jssinon

Do developers typically define all flux action types within a constants object as a common programming practice?

This question arises from an informative article on flux. The common approach involves defining all action types within a constants object and consistently referencing this object throughout the application. Why is it considered a common practice? What ...

javascriptreactjsfluxreactjs-flux

Organize the dataset into groups based on every possible key

Hi there, I'm facing a challenge while developing an application using NestJS/Prisma. The task at hand is to extract unique results from a table in order to display them in a filter on the front-end. Let me give you an overview of my table structure ...

javascriptnestjsprisma

Encountering the "encoding" Module Error when Implementing Nextjs-13 with Supabase

I encountered an issue while trying to utilize Supabase for handling data insertion/retrieval from my form. Upon compilation, I received an error stating that the encoding module was not found. Despite attempting cache cleaning and re-installation of npm m ...

typescriptnpmnext.jssupabase

Retrieving values from a jQuery object array using keys rather than array indices

I am facing a challenge where I need to extract values from an object returned through $.post, but the order of the arrays can vary. Therefore, I must retrieve them based on their keys which are nested inside the array. An example is provided below. { Id: ...

javascriptjqueryjson.post

Creating a form in NextJS to securely transfer user input data to MongoDB

Being new to JavaScript, I have a basic understanding and some lack of experience, but I am eager to learn more. Recently, I embarked on a project using NextJS, an efficient framework that integrates with ReactJS. My current challenge lies in creating a si ...

javascriptreactjsmongodbformsnext.js

Strategies for capturing and incorporating Meteor.Error notifications from Meteor.Methods into a client-side database?

I am currently working on creating an error notification panel in Meteor. I have set up a client-side MongoDB, but I am encountering an issue with pushing Meteor.Error messages into that client-side database using the throwError function. Currently, the er ...

javascriptnode.jsmongodbmeteormeteorite

"Alert box displaying error message is not appearing on the screen

In order to display an error message using a tooltip, I have hidden the tooltip by setting the style of a span with an id of demo to display:none. Then I use JavaScript's getElementById method to retrieve the value of the input field with an id of use ...

javascripthtmlcsstooltip

guide to setting up router access using token

I've received a token from the backend axios.post(process.env.VUE_APP_LOGIN, payload) .then(response => { const {access_token, token_type, user} = response.data; this.token = access_token this.$store.commit(&a ...

javascriptvue.jsaxiosvuetify.js

Is it possible to combine Webpack 5 Module Federation micro frontends with Nx monorepos?

Exploring the concepts of micro frontend and monorepo architecture in the context of an Angular 12 project. Recently, Webpack 5 has been deemed production-ready, introducing Module Federation as its solution for micro frontends. With Module Federation, the ...

angularwebpackarchitecturemonorepowebpack-module-federation