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

When attempting to print a string from an array, an inaccurate result is

Searching JSON Data for Specific String Value Using JavaScript

Retrieve information from MySQL database to display in Android application

Encountering an Uncaught ReferenceError in Angular 8 and Webpack 4: Issue with vendor_lib not being defined plus source map error

Ways to generate arrays in Typescript

Issue with accessing storage in Ionic Storage (Angular)

Exploring Inheritance in Java JSON Configuration Files

ngClass with multiple conditions

Converting a JSON array of key-value pairs into a Plain Old Java Object (POJO

My function won't get called when utilizing Angular

Create a TypeScript function called toSafeArray that transforms any input into a properly formatted array

Substitute the symbol combination (][) with a comma within Node.js

Using Angular 2's rxjs switchMap function will produce an Observable<Object> as the

Running NG BUILD from Gulp can be done using either child-process.spawn or by disabling all output in child-process.exec

Struggling to implement server side processing with Datatables in MVC4?

Combining strings from an array while restricting repeated characters

Is there a more efficient method for examining each multidimensional array?

Searching for a property in JSON using C# can be done by parsing the

The "fullName" input remains constant despite any changes made during text input

Error: Unable to call function onPopState from _platformLocation due to TypeError