Tips for showing nested array values in Angular 8

I'm new to using angular and I'm attempting to display values from an array within another array in a table format.

Here is my JSON array that I'd like to display in rows:

{
  "data": {
    "Influencer": [
      {
        "clickDetails": [
          [
            {
              "clk_counter": "1",
              "social_type": "14"
            }
          ],
          [
            {
              "clk_counter": "32",
              "social_type": "1"
            }
          ]
        ]
      }
    ]
  }
}

In my HTML code, I am passing the data.Influencer array to resultSet, but it's only displaying the first array from clickDetails because I've set data.clickDetails[0] in the *ngFor loop. The other array is within data.clickDetails[1] and I'm unsure how to show that as well.

<tbody *ngIf="resultSet.length>0 ">
 <tr role="row" class="odd" *ngFor="let data of resultSet">
   <td>
       <span *ngFor="let clickd of data.clickDetails[0]">
           <span *ngIf="clickd.social_type==1"> 
               {{clickd.clk_counter}}
           </span>
       </span>
   </td>
   <td>
       <span *ngFor="let clickd of data.clickDetails[0]">
           <span *ngIf="clickd.social_type==2"> 
               {{clickd.clk_counter}
           </span>
       </span>
   </td>
 </tr>
</tbody>

The resultSet contains objects from the data.Influencer array.

Any assistance would be greatly appreciated!

Answer â„–1

To showcase the nested array of data, you must iterate through the nested array once more using the *ngFor loop instead of passing the array index directly. Below is a snippet of the code:

<tbody>
  <tr role="row" class="odd" *ngFor="let data of resultSet">
    <td>
      <span *ngFor="let clickd of data.clickDetails">
        <span *ngFor="let item of clickd">
          <span *ngIf="item.social_type==1" > 
            {{item.clk_counter}}
          </span>
        </span>
      </span>
    </td>
  </tr>
</tbody>

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

Retrieve the attribute from a TypeScript union data type

Here is the structure that I am working with: export interface VendorState extends PaginationViewModel { vendors: CategoryVendorCommand[] | CategoryVendorCommand; } This is my model: export interface CategoryVendorCommand { id: string; name: str ...

Error encountered when Angular Image stops working in Docker container

My Docker image is running Node Version v12.3.0 and NPM version 6.9.0. The package.json file below contains all the dependencies for the app: { .. }, "private": true, "dependencies": { "@agm/core": "1.0.0-beta.5", "@angular/animations": " ...

The ActivatedRoute snapshot does not function properly when used in the TypeScript class constructor

Currently, I am encountering a challenge with TypeScript and Angular 2. The structure of my TS class is as follows: 'import { Component, OnInit } from '@angular/core'; import {ActivatedRoute} from '@angular/router'; @Component({ ...

In Angular, make a call to a second API if the first API call times out after a specified period

In the event that my API does not return data within 5 seconds, I need to call a different one. Attempted implementation: this.service.returnData1(param1, param2) .pipe(timeout(5000), finalize(() => this.callSecondApi())) .subscribe( data => { ...

Automatically forwarding to another page in Angular 4 due to idle time

Is it possible to implement a timeout feature for inactivity on a webpage? For example, if a user is idle for 20 seconds without interacting with the page, can we automatically redirect them to the home screen? I've been struggling to get this functi ...

Steps to generate a fresh array from a given array of objects in JavaScript

Looking to transform an existing array into a new array of objects in Vue.js. Here's the initial array : import { ref } from 'vue'; const base_array = ref([ {id: 1, name: Pill, timing: [morning, noon, evening, night]}, {id: 2, name: Ta ...

What is the reason behind the ineffectiveness of injection in abstraction?

I am working with an interface export interface Tree {} The base class implements this interface: export class TreeBase implements Tree {} There are several concrete classes that extend the TreeBase: export class TreeLayers extends TreeBase {} export cl ...

Access specific data within a JSON array in PHP without the need for a foreach loop

Lately, I've been facing some challenges when it comes to decoding and interpreting the prices for specific items in the bitskins api. For instance, the OPSKINS API provides a straightforward output: {"status":1,"time":1477116462,"response":{"AK-47 ...

What is the best way to verify if all elements in an array are exactly equal to zero?

A new game concept involves pegs and discs, with the user determining the number of pegs (up to a maximum of 20) and the amount of discs on each peg (up to a maximum of 10). In this game, two players take turns removing any quantity of discs from a single ...

The Angular and Node.js console reports an error message reading, "Unauthorized: GET http://localhost:4200/user/profile."

I've been facing an issue while attempting to save data into /profile post login. The console is showing me these two errors after logging in: "VM276:1 GET http://localhost:4200/user/profile 401 (Unauthorized)" "HttpErrorResponse {hea ...

Deleting a button from a list item or array in Angular 12

Having some trouble removing a list item with the click button, I've tried a few options but nothing seems to be working. Can anyone offer assistance? I need to remove a list item from my users array when clicked. Below is the Typescript code and cor ...

Error in Typescript: Function expects two different types as parameters, but one of the types does not have the specified property

There's a function in my code that accepts two types as parameters. handleDragging(e: CustomEvent<SelectionHandleDragEventType | GridHandleDragEventType>) { e.stopPropagation(); const newValue = this.computeValuesFromPosition(e.detail.x ...

Utilizing React-Input-Mask (written in TypeScript) to conceal Material UI input within Formik forms

Issue with Formik Input and TextField Type Error <InputMask mask="99/99/9999" value={formik.values.phone} onChange={formik.handleChange} onBlur={formik.handleBlur} > {(inputProps: Pro ...

Troubleshooting a problematic dependency in Angular with the ngx-favicon package

Could someone please clarify why I am encountering issues when trying to run npm install ngx-favicon? npm install ngx-favicon npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: <a href="/cdn-cgi ...

Ways to confirm the visibility of a web element on the screen with serenity-js

In the current project, I am utilizing the Serenity-js BDD framework with a screenplay pattern approach. However, I am encountering an issue when attempting to assert the visibility of an element on a web page using the "that" method from the Ensure class. ...

Python code to transform an integer array into a binary array

I'm attempting to convert an array of integers into binary format using Python 2.7. Here's a simplified version of the code I'm working with: #!/usr/bin/python import numpy as np a = np.array([6, 1, 5, 0, 2]) b = np.zeros((5)) for i i ...

Error message "Cannot find children property on type IntrinsicAttributes & RefAttributes<unknown>" occurring in a React component due to a Typescript issue

Issue: The specified type '{ children: string; severity: string; sx: { width: string; }; }' is not compatible with the type 'IntrinsicAttributes & RefAttributes'. The property 'children' is missing in the type 'Intri ...

When employing CDK to configure an SNS topic Policy Statement with actions limited to ["sns:*"], the CloudFormation output may display a warning message stating "Policy statement action is not within the service scope."

Encountering an issue when attempting to reference all SNS actions with * in CDK. const MyTopicPolicy = new sns.TopicPolicy(this, 'MyTopicSNSPolicy', { topics: [MyTopic], }); MyTopicPolicy.document.a ...

Is it possible to specify the data type of form control values when using the Angular Reactive form builder?

Is it possible to use typed reactive forms with Angular form builder? I want to set the TValue on the form control to ensure we have the correct type. For example: public myForm= this.fb.group({ name: ['', [Validators.required, Validators.max ...

Discovering the class type in TypeScript

In my TypeScript coding journey, I encountered a challenge in detecting a specific Class type. Despite its seeming simplicity, I found a lack of straightforward documentation on how to accomplish this task. Here is an example that illustrates the issue: Cl ...