Filter out all elements in an array except for one from a JSON response using Angular 2

Question

Filter out all elements in an array except for one from a JSON response using Angular 2

After receiving a JSON response from a server via HTTP GET, the data structure looks like this:

{
    searchType: "search_1",
    overview: [
                "Bed",
                "BedSheets",
                "BedLinen",
                 ..
              ]
}

The contents of the overview array vary depending on the keyword.

To keep track of searched keywords and their responses, I have an Array named Output, structured like this:

[
    {kw: keyword1, resp: {JSON response as mentioned above}},
    {kw: keyword2, resp: {another JSON response with different elements in the `overview` array}}
]

In my component.html file, I aim to display the entries within the overview array as Buttons.

<ul>
  <li *ngFor="let eachOutput of Output">
    <div *ngFor="let each of eachOutput.resp.overview">
      <button *ngIf="eachOutput.resp.overview.length >=1">{{each}}</button>
    </div> <!-- I want to show only the first element here -->
    <!--- Then I want to display additional elements with an option like 'More'
      next to the first button -->
  </li>
</ul>

At present, there are keywords where the array contains numerous elements. I would prefer to display just overview[0] as a button, along with text such as More Options which, when clicked, reveals the other elements of overview.

How should I correctly utilize ngFor and ngIf in this scenario? I've been advised against using the hidden CSS attribute in Angular 2.

arrays json angular typescript

Answer 1

Answer №1

To distinguish the first element within the *ngFor loops, you can utilize the index. By using an array of booleans, you can keep track of which buttons should be displayed.

component.ts (implements OnInit)

(...)
@Input() Output: any[] = [];
showMore: boolean[] = [];

ngOnInit() {
  this.showMore = new Array(this.Output.length);
  this.showMore.fill(false);
}
(...)

component.html

<ul>
  <li *ngFor="let eachOutput of Output; let outerIndex = index">
    <div *ngFor="let each of eachOutput.resp.overview; let index = index">
      <button *ngIf="index === 0 || showMore[outerIndex]">{{each}}</button>
    </div>
    <button *ngIf="eachOutput.resp.overview.length > 1" 
      (click)="showMore[outerIndex]=!showMore[outerIndex]">
        {{showMore[outerIndex] ? 'Hide' : 'Show'}} more Buttons
    </button>
  </li>
</ul>

Answer 2

To distinguish the first element within the *ngFor loops, you can utilize the index. By using an array of booleans, you can keep track of which buttons should be displayed.

component.ts (implements OnInit)

(...)
@Input() Output: any[] = [];
showMore: boolean[] = [];

ngOnInit() {
  this.showMore = new Array(this.Output.length);
  this.showMore.fill(false);
}
(...)

component.html

<ul>
  <li *ngFor="let eachOutput of Output; let outerIndex = index">
    <div *ngFor="let each of eachOutput.resp.overview; let index = index">
      <button *ngIf="index === 0 || showMore[outerIndex]">{{each}}</button>
    </div>
    <button *ngIf="eachOutput.resp.overview.length > 1" 
      (click)="showMore[outerIndex]=!showMore[outerIndex]">
        {{showMore[outerIndex] ? 'Hide' : 'Show'}} more Buttons
    </button>
  </li>
</ul>

Answer 3

Answer №2

In order to maintain simplicity in my templates, I opt for a different approach when dealing with complex logic - I suggest breaking down response objects into a primary object and an array of secondary objects. These secondary objects can be displayed based on a flag value.

By structuring your template this way, it not only makes coding easier but also enhances readability and comprehension for anyone working on your code.

This concept could be implemented as follows:

[
 {kw: keyword1, response: {primaryResponse: 'Bed', secondaryItems: {bedlinen, pillows}},
 {kw: keyword2, response: {primaryResponse: 'Door', secondaryItems: {window, handle}}
]

<ul>
  <li *ngFor="let eachOutput of Output">
    <button *ngIf="eachOutput.response.primaryResponse">
      {{eachOutput.response.primaryResponse}}</button>

    <button (click)="ToggleSecondaryItems()">More</button>

    <div *ngIf="showSecondaryItems">
      <div *ngFor="let each of eachOutput.response.secondaryItems">
        <button *ngIf="each.overview.length > 0">{{each}}</button>
      </div>
    <//div>    
  </li>
</ul>

*Please note that the code has not been tested, so there may be errors present. However, it should illustrate the basic concept effectively.

Answer 4

In order to maintain simplicity in my templates, I opt for a different approach when dealing with complex logic - I suggest breaking down response objects into a primary object and an array of secondary objects. These secondary objects can be displayed based on a flag value.

By structuring your template this way, it not only makes coding easier but also enhances readability and comprehension for anyone working on your code.

This concept could be implemented as follows:

[
 {kw: keyword1, response: {primaryResponse: 'Bed', secondaryItems: {bedlinen, pillows}},
 {kw: keyword2, response: {primaryResponse: 'Door', secondaryItems: {window, handle}}
]

<ul>
  <li *ngFor="let eachOutput of Output">
    <button *ngIf="eachOutput.response.primaryResponse">
      {{eachOutput.response.primaryResponse}}</button>

    <button (click)="ToggleSecondaryItems()">More</button>

    <div *ngIf="showSecondaryItems">
      <div *ngFor="let each of eachOutput.response.secondaryItems">
        <button *ngIf="each.overview.length > 0">{{each}}</button>
      </div>
    <//div>    
  </li>
</ul>

*Please note that the code has not been tested, so there may be errors present. However, it should illustrate the basic concept effectively.

Filter out all elements in an array except for one from a JSON response using Angular 2

Answer №1

component.ts (implements OnInit)

component.html

Answer №2

Similar questions

Exploring the magic of Spring MVC with the power of Ajax

Work with Dart Language to Parse a Nested JSON Array and Store it in a Model Class

What steps can be taken to prevent the browser from freezing when loading JSON via an ajax request?

Enhancing Json_Encode output with extra arrays

The error thrown is: ProgrammingError - (psycopg2.errors.UndefinedObject) "json" type is not found

What steps can be taken to resolve the 400 Bad status error?

Breaking up an array in PHP according to search outcomes

Disable Styling and Override Readonly CSS restrictions

Encountering issues with deserializing a JSON instance while attempting to parse a JSON file using Jackson

Creating a unique object by dynamically incorporating features from another object

Unable to retrieve the value of a particular index within an array containing JSON data

Incorporating the non-typescript npm package "pondjs" into Meteor applications using typescript files

The Angular custom modal service is malfunctioning as the component is not getting the necessary updates

Dealing with Unresponsive Commands in Discord.NET (C#)

best method for implementing a TypeScript object

Retrieving specific information from the Model and returning it as a JSON response using annotations

Populate a dropdown menu in jQuery with options generated from an array

What steps are needed to convert this JSON object into a JSON array for easy consumption by Volley?

Discovering Spring Boot Properties Within Angular Application

Runtime not able to identify new modifications post migration from Angular 2 to Angular 6