How to display specific JSON objects that meet particular criteria in HTML cards using Ionic and Angular?

As a beginner in Ionic/Angular, I am attempting to fetch data from a JSON file and display it using cards in the HTML.

The JSON contains numerous objects that are either marked as "deTurno == true" or "deTurno == false".

Here is what I have so far:

public data: any;
public test: any;
public testTwo: any;

constructor(private apiService: ApiService) {
  this.apiService.getFarmacias().subscribe(
      (data) => {
        this.data = data;
        
        for (const item of this.data) {
          if (item.deTurno == true) {
            
             // copy the item inside this.test

          } else {
             
             // copy the item inside this.testTwo

          }

        } 

      }
  );
}

My goal is to extract all items from the JSON that match "deTurno == true", store them in 'test', and then use 'test' to display those items in the HTML like this:

<ion-card *ngFor="let dataItem of test">
    <ion-card-header>
        <ion-card-subtitle>{{dataItem.direccion}}</ion-card-subtitle>
        <ion-card-title>{{dataItem.nombre}} (De turno hoy)</ion-card-title>
        <h5>Localidad: {{dataItem.localidad}}</h5>
        <h4>{{dataItem.telefono1}}</h4>
    </ion-card-header>
</ion-card>

I only want to display items that match "deTurno == true" while doing something with the items that match "deTurno == false". Otherwise, I would be showing every item from 'data'.

Please provide assistance :(

Answer №1

The issue at hand is:

public test: any;

You have not defined the variable 'test', which is why it is showing as undefined when you try to push to it.

public data: any[] = [];
public test: any[] = [];
public testTwo: any[] = [];

constructor(private apiService: ApiService) {
  this.apiService.getFarmacias().subscribe(
      (data) => {
        this.data = data;
        
        for (const item of this.data) {
          if (item.deTurno == true) {
            
             // copy the item inside this.test
             this.test.push(item);

          } else {
             
             // copy the item inside this.testTwo
             this.testTwo.push(item);


          }

        } 

      }
  );
}

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

How can we convert a group of HTML elements sharing a common attribute into an array containing their respective values?

Consider the following HTML structure: <span class="L5" letters="a"></span> <span class="L5" letters="b"></span> <span class="L5" letters="c"></span> <span class="L5" letters="d"></span> <span class="L5" ...

Alter the value of a parameter within a script tag with JavaScript/jQuery

Looking to dynamically change a parameter value using JavaScript or jQuery. Here is an example URL: www.exampleurl.com/somepage?foo=test I have a function that can extract the value after the 'foo' parameter: function getParameterByName(name, ...

Difficulties encountered when trying to interact with buttons using JS and Bootstrap

I'm working with a Bootstrap 5 button in my project and I want to access it using JavaScript to disable it through the attribute. Here is the code I've been testing: Script in Header: ` <script> console.log(document.getElementsByName(& ...

The Angular subscription gets triggered multiple times

I am currently subscribed to this service: login(): void { if (!this.loginForm.valid) { return; } const { email, password } = this.loginForm.value; this.authService.login(email, password).subscribe((res) => { if (res.ok) ...

Send dropdown selections to a Javascript function and convert them into an array

Within my JavaScript function, I need to pass multiple selected values from dropdown menus and store them in a JavaScript array. Each time a value is selected and sent using the onchange() function, it should be added to the array. If the same value is sel ...

Traverse an SVG element using JavaScript

I have a beautiful star SVG that I created, and I want to use it instead of styling a span to create floating bubbles in my div. However, I'm facing some challenges in adapting my Javascript loop to incorporate the SVG for creating the bubbles, as opp ...

Block users from printing in text input with Angular

I need to restrict users from entering text into a specific input field, even though they can click on it and select the value. Using the disabled attribute is not an option because it triggers another event when clicked. I also want users to have the ab ...

"React - encountering issues with state being undefined when passing child state up through parent components

I am currently navigating the world of react and have encountered a hurdle. I find myself facing difficulties in updating the parent component based on changes in the child state. I was able to pass the child state to the parent by linking the child's ...

Tips for triggering a JavaScript function within WordPress using an inline function call

While setting up my plugin in the WordPress admin area, I encountered an issue with a form that stores user information. In my file input type, there is a JavaScript function call to my custom JavaScript that I have linked. Here is the line of code causing ...

Implementing a New Port Number on a ReactJs Local Server Every Time

As a newcomer to ReactJS, I recently encountered an issue while working on a project that puzzled me. Every time I shut down my local server and try to relaunch the app in the browser using npm start, it fails to restart on the same port. Instead, I have ...

Is there a Node.js method that is similar to jQuery AJAX's .complete() function

In the process of creating a Node.js API to enroll a user in a different web application, I encountered an issue. As part of the registration flow, the API called by the Node app using request is being redirected with a status code of 301 to another API to ...

Is it possible to utilize $(this) within the $.post() function?

I seem to be having trouble accessing $(this) from inside the $.post section. It works perfectly fine outside of it. Here is the JavaScript code: $('.idea').each(function(){ var title = $(this).html(); $.post("votes.php", { t ...

Issue with form array patching causing value not to be set on material multiple select

When attempting to populate a mat-select with multiple options using an array of ids from Firestore, I encountered an issue. The approach involved looping through the array, creating a new form control for each id, and then adding it to the formArray using ...

Discover automatically generated titles for dynamic hyperlinks

I am looking to generate dynamic links for a collection of documents with varying names, such as Test, Test2, and so on. I want the link text to display as "Document TestN," where N is the specific document number. Currently, I am able to create the links ...

Can you create reusable components in Wordpress that are encapsulated?

In my quest to explore innovative approaches to Wordpress theme development, I have stumbled upon a variety of options such as the "Roots Sage" starter theme, the "Themosis Framework," and "Flynt." While these solutions address intriguing problems, they do ...

Getting JSON data from an API using $.ajax

Currently, I am working on creating a random quote machine. To start off, I wrote the following HTML code to outline the necessary elements: <div id="quoteDisplay"> <h1 id="quote">Quote</h1> <h2 id="author">- Author</h2> ...

Locally hosted website failing to transfer login details to external domain

Having trouble with an ajax call that is supposed to retrieve data from a web page, but instead returns a jQuery parse Error. Even though I can access the page directly, the ajax call doesn't seem to be working and storing the result properly. Below ...

Having difficulty in deciding due to a response received from an ajax request

Currently, I am making an ajax request using jQuery to check the availability of a username in a database. The response from my PHP script is being successfully displayed inside a div with the ID "wnguser." However, I am facing issues when trying to use th ...

Transfer all the child nodes to the parent using the spread operator or Object.assign while preventing duplicate properties from being overwritten

I'm trying to transfer all the nodes of a child node to the parent using the spread operator or Object.assign (without relying on Lodash) while avoiding overwriting existing properties. My initial thought was to simply append the childArray to the ro ...

Using XSLT to generate default XML nodes when a corresponding JSON element is missing

I am working with JSON structured as follows: { "Message" : { "dynamicFields" : [ { "alias" : "TEST_ALIAS", "value" : "VALUE" } , { "alias" : "CAR", "value" : "TOYOTA" } ] } } My XSLT style ...