Navigating json data in angular 6

I retrieved a JSON object in the following format

 response = [
{
  'a': [
    {
      'b': [
        {
          'c': [
            {
              'name': 'abc',
              'value': 900
            }
          ]
        }
      ]
    }
  ]
},
{
  'a': [
    {
      'b': [
        {
          'c': [
            {
              'name': 'abc',
              'amount': 900
            }
          ]
        }
      ]
    }
  ]
}
];

Now, I am trying to iterate through the object as shown below

this.response.forEach(
    (event) => {
      event.a.forEach(
          () => {

          }
      );
    }
)

However, while compiling, an error message is thrown

error TS2349: Cannot invoke an expression whose type lacks a call signature. Type '((callbackfn: (value: { 'b': { 'c': { 'name': string; 'value': number; }[]; }[]; }, index: number...' has no compatible call signatures.

Is there any solution for the above error? Thank you in advance.

Answer №1

Here is a simple way to access the properties c.name and c.amount

response.forEach(element => {
      element['a'].forEach(a => {
           a['b'].forEach(b => {
               b['c'].forEach(c => {
                     console.log(c.name);
                     console.log(c.amount);
               });
            });
      });
 });

Link to JSFiddle for reference: https://jsfiddle.net/jpwga2du/

Answer №2

for (let element1 of this.response) {
  for (let element2 of element1.a) {
    for (let element3 of element2.b) {
      element3.c.forEach(element4 => {
        alert(element4);
      });
    }
  }
}

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

What is the solution to the error message "Unable to assign property of undefined"?

I am currently working on an angular countdown timer and encountering a TypeError when attempting to access a variable from another component. I am struggling to identify the root cause of this issue. Here is the video tutorial that I am using as a referen ...

Passing data to an Angular 8 router can be done easily with this simple guide

In a situation where I have a list of products on a page and wish to transmit a product ID to a /product/:id router without resorting to parsing it from the URL directly, what alternatives exist? Is there a way to implement functionality akin to an Input ...

Steps for transferring .pem files to Typescript outDir

I am currently working on a NodeJS project using Typescript, and I have encountered an issue with referencing .pem files to initiate an https server. The problem arises when my code is compiled, as the .pem files are not present in the output directory. ...

Can an Angular 5 web application be developed without using Node.js/npm?

I want to develop an Angular 5 web application using Java, but my boss prefers not to use Node.js/npm. Is it possible to build an app without Node.js/npm and rely solely on Java? Most of the resources I've come across recommend using Node.js/npm, inc ...

Dynamic loading of locale in Angular 5 using Angular CLI

Angular 5 offers a solution for loading i18n locale dynamically using registerLocaleData https://angular.io/guide/i18n#i18n-pipes I am interested in loading the locale based on a dynamic setting, such as one stored in localStorage. I tested loading a sin ...

Why is my RxJS timer not waiting for the specified time?

I'm diving into the world of RxJS and trying to grasp its concepts. During some testing, I encountered a puzzling issue that has me stumped. Below is the snippet in question : let item = { id: 1, name: 'chair' }; const asyncItem = timer(20 ...

Sharing enums between client and server code in Webpack is a smart way to improve

I'm currently working on a project setup that looks like this: | |--public-|file1.ts | |enum.ts | |--server/file2.ts | The issue I am facing is incorporating the enum defined in enum.ts into both file1 and file2. While file1 can import and u ...

Angular 7: Encounter of Conflicting Declarations in 2 Modules

I am encountering an issue while trying to run my project with just one component. I added the home component to app.module, but I am receiving this error: Error: Uncaught (in promise): Error: Type HomePage is part of the declarations of 2 modules: AppMod ...

Ways to Resolve the "TS2533: Object May Be Either 'Null' or 'Undefined'" Error on a Dynamic Object

I'm encountering an issue with the following code snippet: interface Schema$CommonEventObject { formInputs?: { [key: string]: Schema$Inputs; } | null; } interface Schema$Inputs { stringInputs?: Schema$StringInp ...

Utilizing React Native Camera Kit allows for the seamless and continuous scanning of QR codes, offering multiple callbacks when a code is

Attempting to integrate a QR code scanner into my project using react native. Utilizing the plugin react-native-camera-kit, which supports both QR and Bar code scanning. However, I am facing an issue where the scanner continuously scans the code and trig ...

The datepicker in Angular Material refuses to open when used within a modal dialog box

I successfully integrated an angular material 2 date-picker into a bootstrap modal form: <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">{{title}}</h ...

Unable to translate text on the loading page

Encountering a peculiar issue with the translate service. Here's how I set it up: export class AppComponent implements OnInit { constructor( private translateService: TranslateService, angulartics2GoogleAnalytics: Angulartics2GoogleAnalytics ...

Prohibit the Use of Indexable Types in TypeScript

I have been trying to locate a tslint rule in the tslint.yml file that can identify and flag any usage of Indexable Types (such as { [key: string] : string }) in favor of TypeScript Records (e.g. Record<string, string>). However, I haven't had a ...

What prevents me from extending an Express Request Type?

My current code looks like this: import { Request, Response, NextFunction } from 'express'; interface IUserRequest extends Request { user: User; } async use(req: IUserRequest, res: Response, next: NextFunction) { const apiKey: string = ...

The combination of the video tag within an SVG element is causing a strange error

I'm encountering an issue while attempting to implement the code provided in this particular answer. Despite following the code, I am receiving an error in the console log instead: Here's the Code Snippet: <svg version="1.1" class="center-bl ...

The ng test option is failing to execute effectively

Attempting to conduct unit tests utilizing Karma and Jasmine through the ng test is proving to be a bit challenging. Upon issuing the following command: ng test --watch=false --code-coverage --main ./src/main/resources/public/scripts/xyz/workspace/commons ...

Converting TypeScript to JavaScript: A Step-by-Step Guide

I have this code written in Typescript and I need to convert it to JavaScript const Home = (props) => { return ( <div> {props.name ? 'Hi ' + props.name : 'You are not logged in'} </div> ); }; How can I re ...

Using ngFor in Angular to apply a function to a variable

Imagine I have two tables: one for Books and one for Authors. The Author table contains a reference to the ID of a book. In my Angular project, I aim to iterate through the list of Authors and then iterate through the books written by each author: <di ...

Adding a new document to an existing collection with an array field in MongoDB

Having an issue with adding a new chapter to my var array. Here is the code snippet in question: array.push({ chapter: [ { id: 2, title: 'adsf', content: &ap ...

Having trouble with obtaining precise mouseup and mousedown coordinates

Currently, I am working with react and typescript for my project. I have implemented a canvas element where I am attempting to draw a rectangle based on mouseup and mousedown events. However, the issue I am facing is that the rectangles are being drawn in ...