Using ngIf for various types of keys within a JavaScript array

concerts: [
    {
        key: "field_concerts_time",
        lbl: "Date"
    }, {
        key: ["field_concert_fromtime", "field_concert_totime"],
        lbl: "Time",
        concat: "to"
    }, {
        key: "field_concerts_agereq",
        lbl: "Age Requirements"
    }, {
        key: "field_concerts_dresscode",
        lbl: "Dress Code"
    }, {
        key: "field_concerts_prices",
        lbl: "Prices"
    }

]

descriptions: {

    "field_concerts_time": [

        {
            "value": "2019-09-16T00:00:00",
        }
    ],

    "field_concert_totime": [

        {
            "value": "1:00AM"
        }

    ],

    "field_concert_fromtime": [

        {
            "value": "7:30PM"
        }

    ]
}

I have an array of concerts and an object of descriptions. My goal is to extract the value for each key from the concerts array and use it to display relevant information.

<p *ngFor="let otherdetail of otherdetailsarray">
    <span *ngIf="descriptions[otherdetail.key][0].value !== null"> 
        {{otherdetail.lbl}} :</span>
    <span *ngIf="descriptions[otherdetail.key][0].value !== null && 
        descriptions[otherdetail.key][0].value !== undefined"> 
        {{descriptions[otherdetail.key][0].value }}</span>
</p>

I successfully retrieved the value for the "field_concerts_time" key at the 1st index and displayed it using the mentioned tags. I aim to enhance this code to handle cases like

"key: ["field_concert_fromtime", "field_concert_totime"]"
.

Answer №1

Here is the solution for you. Please verify if you have reached the designated time for the concert. In case you have, handle the key as an array by accessing fields 0 and 1 in addition.

<p *ngFor="let otherdetail of otherdetailsarray">
<span *ngIf="descriptions[otherdetail.key][0].value !== null"> 
  {{otherdetail.lbl}} :</span>

<span *ngIf="otherdetail.lbl !== 'Time' &&
  descriptions[otherdetail.key][0].value !== null && 
  descriptions[otherdetail.key][0].value !== undefined">
  {{descriptions[otherdetail.key][0].value }} 
</span>

<span *ngIf="otherdetail.lbl == 'Time' &&
  descriptions[otherdetail.key[0]][0].value && 
  descriptions[otherdetail.key[1]][0].value"> 
   {{descriptions[otherdetail.key[0]][0].value }} {{otherdetail.concat}}
  {{descriptions[otherdetail.key[1]][0].value }}
  </span>

</p>

This should resolve the issue at hand.

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

The orderBy filter seems to be malfunctioning

I'm utilizing ngx-pipes from this webpage: https://www.npmjs.com/package/ngx-pipes#orderby Specifically, I am using the orderBy pipe. However, when I implement the orderBy pipe in my HTML, the information is not being ordered correctly (from minor t ...

Is it possible that an error is triggered when utilizing canActivate or canChildActivate?

A problem has arisen while using canActivateChild or canActivate in the child route. Despite working fine previously, an error is now being thrown: ERROR in src/app/app-routing.module.ts(8,7): error TS2322: Type '({ path: string; redirectTo: string; ...

Ways to pass data to a different module component by utilizing BehaviourSubject

In multiple projects, I have used a particular approach to pass data from one component to another. However, in my current project, I am facing an issue with passing data from a parent component (in AppModule) to a sidebar component (in CoreModule) upon dr ...

"Optimize Your Data with PrimeNG's Table Filtering Feature

I'm currently working on implementing a filter table using PrimeNG, but I'm facing an issue with the JSON structure I receive, which has multiple nested levels. Here's an example: { "id": "123", "category": "nice", "place": { "ran ...

I am faced with a challenge involving an asynchronous function and the best approach to executing it synchronously

I devised the following plan: // Primary Function to Follow // Capture necessary local data // Transform into required editable format // Iterate through user's local images // Append image names to converted d ...

Tips for determining if a key is present in local storage:

I need to set a key value, but only if it doesn't already exist. In my component1.ts file, I am assigning the key and value in the constructor. However, I want to include a condition that this action should only be taken if the key is not already pre ...

Finding a solution to this issue in Angular will consistently result in a false outcome

Can anyone explain why I keep getting the error message "This condition will always return 'false' since the types 'typeof ChartType' and 'ChartType' have no overlap" whenever I try to compare charTypeEnum with ChartType.text? ...

The type 'FileUpload[][]' cannot be assigned to the type 'AngularFireList<FileUpload[]>'

I'm currently working on an Angular application integrated with Firebase for the purpose of uploading images to the database and retrieving them as well. upload-file.service.ts import {Injectable} from '@angular/core'; import {AngularFireD ...

Exploring the capabilities of SwiftUI to create custom nested array structures using For

Recently, I've encountered a challenge with a nested array of a particular model: let models = [[ButtonModel]] struct ButtonModel: Identifiable { let id = UUID() let value: String let style: ColorStyle init ...

Error: Callstack Overflow encountered in TypeScript application

Here is the code snippet that triggers a Callstack Size Exceeded Error: declare var createjs:any; import {Animation} from '../animation'; import {Events} from 'ionic-angular'; import { Inject } from '@angular/core'; exp ...

Is it possible to encounter an unusual token export while trying to deactivate Vue with veevalidate

Utilizing Nuxt with server side rendering. Incorporating Typescript along with vee-validate version 3.4.9. The following code has been validated successfully extend('positive', value => { return value >= 0; }); Upon adding the default, ...

Tips for properly executing directives in sequential order while using async in Angular 13

I created a standard registration form using Angular and implemented an async directive (UserExistsDirective) to validate if the email is already taken. To manage error messages, I also utilized a second directive (ValidityStyleDirective) which is also use ...

Using AngularFire and Firebase to convert observable arrays

My tech stack includes angular CLI, angularFire, and Firebase. I store my data in a real-time database. I retrieve data from Firebase using an observable: //Service.ts import { Injectable } from '@angular/core'; import { Patient } from &apos ...

Changing the title of your document and app bar in React Router when navigating pages

I'm looking into implementing the react router in a TypeScript project. How can I dynamically update the document title (document.title) and the app bar title (<span className="appbartitle">Home</span>) in a single page application based o ...

Steering clear of the generic Function type in React with TypeScript

Can anyone help me find a guideline that prohibits the use of "Function" as a type? myMethod: Function; I have searched but couldn't locate any information on this. Appreciate any suggestions :) ...

TypeScript has encountered an issue where a specific type A cannot be assigned to another type A, even though

Encountering a Typescript issue where it claims that type A is not compatible with type A, even though they are identical: Check out this playground link for the code snippet in context: declare interface ButtonInteraction { user: any; customId: strin ...

A problem arises when utilizing jQuery's $.isArray functionality

Successfully executing an AJAX post, the function test is utilized to process the passed data. $("#formID").submit(function (event) { $('#postError').html('').hide(); $('#postInfo').html('loading results').s ...

Dynamic array literal in Excel for sumifs formula

=SUM(SUMIFS('Output'!$H$50:$H$69,'Output'!$C$50:$C$69,{"*PLoan","Deficit Loan"},'Output'!$G$50:$G$69,X97:AC97)) I am working with the array formula shown above. The issue arises when using a conditional array literal at X97:A ...

Experiencing an Issue with NGINX Loading Vue 3 Vite SPA as a Blank White Page

I currently have the following NGINX configuration set up: events { worker_connections 1024; } http { server { listen 80; server_name localhost; location / { root C:/test; index index.html; ...

React with Typescript allows us to refine the callback type depending on the presence of an optional boolean prop

In my project, there's a component <Selector /> that can optionally accept a parameter called isMulti: boolean. It also requires another parameter called onSelected, whose signature needs to change depending on the value of isMulti (whether it i ...