Verify that each interface in an array includes all of its respective fields - Angular 8

I've recently created a collection of typed interfaces, each with optional fields. I'm wondering if there is an efficient method to verify that all interfaces in the array have their fields filled.
Here's the interface I'm working with:

export interface BibliographicCitation {
  authors?: HTMLCollectionOf<Element>;
  title: string;
  date?: Element;
}

This is how I populate the array:

UPDATE

citations.forEach(citation => {
    if (citation.getElementsByTagName('author').length === 0 &&
        citation.getElementsByTagName('title').length === 0 &&
        citation.getElementsByTagName('date').length === 0) {

        const interfacedCitation: BibliographicCitation = {
           title: citation.textContent.replace(/\s+/g, ' '),
        };

        if (!bibliographicCitations.includes(interfacedCitation)) { 
            bibliographicCitations.push(interfacedCitation); 
        }
    } 
    else {
        const interfacedCitation: BibliographicCitation = {
           authors: citation.getElementsByTagName('author'),
           title: String(citation.getElementsByTagName('title')[0]).replace(/\s+/g, ' '),
           date: citation.getElementsByTagName('date')[0],
        };

        if (!bibliographicCitations.includes(interfacedCitation)) { 
           bibliographicCitations.push(interfacedCitation); 
        }
    }
});

My question now is, how can I confirm that all entered interfaces have their fields filled?

Answer №1

Consider using a variable called isAllProperties and perform the following checks:

let isAllProperties = false;
if (citation.getElementsByTagName('author').length === 0 &&
    citation.getElementsByTagName('title').length === 0 &&
    citation.getElementsByTagName('date').length === 0) {
    // ...
    isAllProperties = true;
} else {

}

if (isAllProperties ) {
    // ...
}

UPDATE:

let isAllProperties = [];
citations.forEach(citation => {
if (citation.getElementsByTagName('author').length === 0 &&
    citation.getElementsByTagName('title').length === 0 &&
    citation.getElementsByTagName('date').length === 0) {

    const interfacedCitation: BibliographicCitation = {
       title: citation.textContent.replace(/\s+/g, ' '),
    };

    if (!bibliographicCitations.includes(interfacedCitation)) { 
        bibliographicCitations.push(interfacedCitation); 
    }
    isAllProperties.push({isAll: true, interfacedCitation});
} 
else {
    const interfacedCitation: BibliographicCitation = {
       authors: citation.getElementsByTagName('author'),
       title: String(citation.getElementsByTagName('title')[0]).replace(/\s+/g, ' '),
       date: citation.getElementsByTagName('date')[0],
    };

    if (!bibliographicCitations.includes(interfacedCitation)) { 
       bibliographicCitations.push(interfacedCitation); 
    }

    isAllProperties.push({isAll: false, interfacedCitation});
}

});

Answer №2

Check out this solution for assistance:

let findAuthor = citation.getElementsByTagName('author');
let findTitle = citation.getElementsByTagName('author');
let findDate = citation.getElementsByTagName('author');
let conditionTitle:any;
const interfacedReference: BibliographicCitation = {
 authors: this.findAuthor ,
 title: this.conditionTitle ,
 date: this.findDate[0]
};
if (this.findAuthor && this.findTitle && this.findDate) {
this.conditionTitle = citation.textContent.replace(/\s+/g, ' ')
    if (!bibliographicReferences.includes(interfacedReference)) { 
     bibliographicReferences.push(interfacedReference); 
    }
} else {
    this.conditionTitle = this.findTitle;
    if (!bibliographicReferences.includes(interfacedReference)) { 
     bibliographicReferences.push(interfacedReference); 
    }
}

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

NodeJS and TypeScript are throwing an error with code TS2339, stating that the property 'timeOrigin' is not found on the type 'Performance'

I am currently working on a NodeJS/TypeScript application that utilizes Selenium WebDriver. Here is an excerpt from the code: import { WebDriver } from "selenium-webdriver"; export class MyClass { public async getTimeOrigin(driver: WebDriver ...

Passing information from the created hook to the mounted hook in VueJS

How can I transfer data from the created function to the mounted function in VueJS? In my VueJS application, the code in my created function is as follows: created: function(){ $.getJSON({ url: 'static/timeline.json', success:function( ...

What is the best way to place two stacked buttons side by side in an inline format?

I am trying to rearrange the layout of a bootstrap modal that includes two multiple select elements and two buttons. My goal is to have all controls inline, with the buttons stacked on top of each other. Here's an example of what I'm aiming for: ...

Discovering Unconventional Columns Through Sharepoint REST Api Filtration

I am working on recreating SharePoint's front end in my app and want to add columns to my table just like a user would in SP. The challenge I am facing is determining which columns were custom generated by the user rather than standard ones. Although ...

Converting an array into an object in Angular for query parameters

In my Angular 12 application, I have an array of objects that I need to convert into query parameters in order to route to a generated URL. The desired query parameters should look like this: Brand:ABC:Brand:XYZ:Size:13x18:Size:51x49x85 [{ "values&q ...

Issue with Angular 17 button click functionality not functioning as expected

Having trouble with a button that should trigger the function fun(). Here's the code snippet I'm using. In my TS file: fun(): void { this.test = 'You are my hero!'; alert('hello') } Here is the respective HTML: &l ...

Listen for incoming data from the client in the form of an ArrayBuffer

I have been utilizing the ws library within nodejs to develop a small cursor lobby where players can interact. I have managed to utilize the server to send ArrayBuffers with bit streams to the client and successfully decode them. However, I am encountering ...

Creating a seating arrangement for a movie theater screen

Need help creating a seating layout based on user input. When the user enters row number 1 and 12 seats, I want to generate 12 divs in one row. If the user enters row number 2 and 13 seats, then the next row should have 13 divs. import { Seats } from &ap ...

What is the significance of an equals sign being located within the angle brackets of a type parameter?

Within the type definitions for Bluebird promises, there is a catch function that has the following definition: catch<U = R>(onReject: ((error: any) => Resolvable<U>) | undefined | null): Bluebird<U | R>; The symbol "R" is derived fr ...

Comparing Jquery's smoothscroll feature with dynamic height implementation

Recently I launched my own website and incorporated a smoothscroll script. While everything seems to be working smoothly, I encountered an issue when trying to adjust the height of the header upon clicking on a menu item. My dilemma is as follows: It appe ...

Is utilizing v-model to update the Vuex store a recommended practice?

Hello there! As a newcomer to Vue, I find myself facing a dilemma that has been weighing on my mind. I'm confused about whether we should utilize the v-model directive to make changes to the Vuex store. While Vuex guidelines suggest modifying the stor ...

Tips for retrieving the HTML file of a modified canvas in HTML5

I’m currently working on a project to develop a website that allows users to design their own pages by simply dragging and dropping elements onto the canvas. The goal is for users to be able to save their creations as an HTML file. I’m facing challen ...

Can you explain the inner workings of the provided code in a step-by-step manner?

I stumbled upon this code snippet that checks if the number of occurrences of an element in an array is greater than a specified value, and if so, it will remove the number: function deleteNth(arr,x) { var cache = {}; return arr.filter(function(n) { ...

What steps can be taken in Next.js to display a 404 page when data is not retrieved from the Wordpress admin?

I am working with JSON data that looks like this: [ { "taxonomy_slug": "product_cat", "taxonomy_name": "Categories", "frontend_slug": "product-category" }, { ...

Discovering the selected href URL using JQuery or JavaScript

How can I detect the clicked href URL using JQuery when no ID is being used? For example, if I have a list of links where some redirect to new pages and others call javascript functions to expand a div. What approach should be taken in JQuery/Javascript ...

Executing an external JavaScript function from within an internal JavaScript code block

Currently, I am dealing with 2 JavaScript blocks. One is contained within my HTML and handles touch functionality, while the other is an external file serving as a content slider. My goal is to utilize touch events to control the slider - allowing users to ...

Opting for a .catch over a try/catch block

Instead of using a traditional try/catch to manage errors when initiating requests like the example below: let body; try { const response = await sendRequest( "POST", "/api/AccountApi/RefundGetStatus", JSON.stringify(refundPara ...

Angular 2 chart showing horizontal stacking of databars

I am in search of a chart that visually represents different percentages. The purple bar should represent around 40%, the darkest blue approximately 10%, and the green about 8% of the total. After some research, I have come across this as a similar option, ...

What is the best approach for determining the most effective method for invoking a handler function in React?

As a newcomer to React, I am navigating through the various ways to define callback functions. // Approach 1 private handleInputChange = (event) => { this.setState({name: event.target.value}); } // Approach 2 private handleInputChange(event){ t ...

Does anyone have tips on how to upload images to MongoDB using React?

Currently, I am working on a project that requires an image upload feature for users. These images need to be stored in MongoDB so that they can be viewed by the user later on. Can anyone offer assistance with this? I have successfully configured my datab ...