Tips for efficiently finding and comparing text within the results generated by a for loop in Angular/Javascript

In my XML data, I have extracted all the tag names using a for loop and some other logic. Now, I am looking to find the word 'author' from the output values that are displayed in the console during the loop. If any of the output values match 'author', then I need to execute a specific condition. Here is the code snippet:

app.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'project';

  ngOnInit(): void {
    let xmldata = "<bookstore><book>" +
      "<title>Everyday Italian</title>" +
      "<author>Giada De Laurentiis</author>" +
      "<year>2005</year>" +
      "</book></bookstore>";
    var node = (new DOMParser()).parseFromString(xmldata, "text/xml").documentElement;
    var nodes = node.querySelectorAll("*");
    // console.log(nodes[4].tagName)
    for (var i = 0; i < nodes.length; i++) {
      var text = null;
      if (nodes[i].childNodes.length == 1 && nodes[i].childNodes[0].nodeType == 3) //if nodeType == text node
        text = nodes[i].textContent; //get text of the node
      //  console.log("TageName : ", nodes[i].tagName, ", Text : ", text);
      console.log(nodes[i].tagName)
    }
  }
}
   

Answer №1

We can convert the data output into an array, use the filter function to remove all authors, and then utilize map to extract only the inner texts.

Complete code snippet:

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <a target="_blank" href="https://angular.dev/overview">
      Learn more about Angular
    </a>
  `,
})
export class App {
  title = 'project';

  ngOnInit(): void {
    let xmldata =
      '<bookstore><book>' +
      '<title>Everyday Italian</title>' +
      '<author>Giada De Laurentiis</author>' +
      '<year>2005</year>' +
      '</book><book>' +
      '<title>Everyday Italian</title>' +
      '<author>Giada De Laurentiis1</author>' +
      '<year>2005</year>' +
      '</book><book>' +
      '<title>Everyday Italian</title>' +
      '<author>Giada De Laurentiis2</author>' +
      '<year>2005</year>' +
      '</book></bookstore>';
    var node = new DOMParser().parseFromString(
      xmldata,
      'text/xml'
    ).documentElement;
    var nodes = node.querySelectorAll('*');
    // converting nodes to an array, filtering out authors, and using map
    //to extract the necessary property for the output array!
    const requiredData = Array.prototype.slice
      .call(nodes, 0)
      .filter((x: any) => x.nodeName === 'author')
      .map((x: any) => x.textContent);
    console.log(requiredData);
  }
}

bootstrapApplication(App);

Check out the Stackblitz Demo

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 pre-loader is hidden behind the block content and navigation bar

I've encountered an issue with my preloader where it's loading in front of the <body> element but not in front of the site's <navbar> or the {% block content %}. The CSS snippet to increase the z-index of the preloader is as foll ...

The placement of the Vuetify tooltip is incorrectly aligned when located in the footer section

Having trouble fixing the issue with the Vuetify tooltip. After scrolling on the page, the tooltip moves up despite using fixed="true". Here is the code snippet causing the problem: <v-footer app inset fixed> <v-row align="center ...

An unusual outcome occurred while attempting to duplicate the text

After copying the letter A, I noticed that an empty string is being logged to the console instead of the expected A. However, when I paste, the console does successfully log the letter A. document.addEventListener('copy', handler); document ...

Traversing a deeply nested array of objects, comparing it with a separate array of objects

I am currently learning Javascript and facing a challenge involving looping through nested arrays of objects and filtering another array based on specific properties. Let's take a look at the structure of both arrays: const displayArr = { section ...

Circular graphs displaying percentages at their center, illustrating the distribution of checked checkboxes across various categories

Looking for a JavaScript script that displays results in the form of circles with percentage values at their centers, based on the number of checkboxes checked in different categories. The circle radius should be determined by the percentage values - for e ...

Ways to execute the pdf.js node demonstrations?

I've been attempting to run the pdf.js node examples, specifically getinfo.js. Unfortunately, I encountered an issue that resulted in the following error: C:\Repositories\pdf.js>node getinfo.js node:internal/modules/cjs/loader:1080 thro ...

JSON does not send information to the specified web address

Attempting to send some data to the following URL: " $(function() { var frm = $(document.myform); var data = "?lm_po_id=154668&authentication=ThisisAuth&description=ThisIsDesc";//JSON.stringify(frm.serializeArray()); ...

The jQuery slider's next button is not functioning as intended

jQuery('#slider-container').bjqs({ 'animation' : 'slide', 'width' : 1060, 'height' : 500, 'showControls' : false, 'centerMarkers' : false, animationDuration: 500, rotationS ...

Guide to importing a scss file into a scss class

Is there a way to apply a different theme by adding the "dark-theme" class to the body? I've attempted the following implementation: @import '../../../../node_modules/angular-grids/styles/material.scss'; .app-dark { @import '../../. ...

Steps for adding multiple images to a page in a React application:1. Create a

Having trouble displaying images on a React page. I have a directory with 30 images that I want to display on the page (.jsx file). Instead of exporting each image individually, is there a faster way to accomplish this task? Any ideas or suggestions would ...

Attempting to generate a dynamic animation of a bouncing sphere confined within a boundary using components, but encountering

I'm new to JavaScript and currently working on a project involving a bouncing ball inside a canvas. I was able to achieve this before, but now I'm attempting to recreate it using objects. However, despite not encountering any errors, the animatio ...

Running Controllers from Other Controllers in AngularJS: A Guide

Switching from a jquery mindset to Angular can be challenging for beginners. After reading various tutorials and guides, I am attempting to enhance my skills by developing a customizable dashboard application. Here is the HTML I have so far: <div ...

Utilizing Mongoose to fetch data from Atlas MongoDB for integration into an Angular application

I recently made some updates to my signup page by adding a new input field for the user's name and adjusting the schema settings accordingly. How can I now retrieve this name to use in both my post-list component and post-create component? Here is an ...

The function's overloading is not compatible with its implementation

Currently, I am puzzled by the lack of functionality in some code that I am reviewing. The structure resembles this: function getValidity(x: "v1"): boolean; function getValidity(x: "v2"): { a: number; b: number }; function getValidity(x: any) { if (x == ...

Unlocking the Power of Localization: An Easy Guide to Accessing JavaScript Values

After utilizing the localization helper created by Matt Hawley, I found it to be incredibly effective. However, I am encountering an issue when attempting to retrieve the values in javascript/jQuery. For example, I am unable to fetch the resource text usi ...

The Bootstrap modal causes the scrollbar to vanish upon closure

Despite trying numerous solutions and hacks on this issue from StackOverflow, none of them seem to work for me. Currently, I am utilizing a modal for the login process in Meteor (e.g. using Facebook login service) which triggers a callback upon successful ...

In AngularJS, variables can undergo automatic value changes without any external connections

Within my AngularJS controllers, I have initialized two variables: _this.currentData=new Array(); _this.masterCurrentData=new Array(); Later on, I created a temporary array of objects called tmpDataSort and populated it separately using loops. var tmpDa ...

Begin the NextJS project by redirecting the user to the Auth0 page without delay

I am new to coding and currently working on a project using Typescript/NextJS with Auth0 integration. The current setup navigates users to a page with a login button that redirects them to the Auth0 authentication page. However, this extra step is unneces ...

AngularJS ng-map defines the view position using rectangular coordinates

Is there a way to set the position of ng-map view using the ng-map directive not as the center value of [40.74, -74.18], but instead as a rectangle defined by the corner values of the map view (north, south, east, west)? Currently, I have this code: < ...

What is the best way to organize code into separate files while utilizing a module that needs to be included in every file?

In this particular scenario, I am utilizing a headless browser with Puppeteer Chrome and MongoDB. Take a look at the following code snippet: var browser = await puppeteer.launch() var page = await browser.newPage() var db = await MongoClient.connect(" ...