Encountering the error "The method .apply is not a function

Can someone explain why I am encountering the following issue:

ERROR TypeError: _this.user_data.apply is not a function

When attempting to populate user_data with data from a mapped JSON file

user_data: any;

this.testService.getTestWithObservable()
 .map( result => result.map( i => i.users.data) )
 .subscribe(
    res => {

        this.user_data = [];
        res.forEach(i => this.user_data(...i));
        console.log(this.user_data);
    }
);
}

JSON

[{
    "id": 1,
    "users": {
        "user_id": 14,
        "data": [{
            "name": "James",
            "age": 20
        },
        {
            "name": "Damien",
            "age": 25
        }]
    }
}
{
    "id": 2,
    "users": {
        "user_id": 11,
        "data": [{
            "name": "James",
            "age": 20
        },
        {
            "name": "Damien",
            "age": 25
        }]
    }
}]

I have been unable to locate any information regarding this error in my code

Answer №1

Solution found:

TS

       result => {
           this.user_data = result;
       }

HTML

   <div *ngFor="let userData of user_data">
       <div *ngFor="let item of userData">
        {{ item.name}}
       </div>
   </div>

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

The CORS policy has prevented access to XMLHttpRequest at zone.js:2969

I encountered an error while trying to use Angular to connect to a RestAPI. The zone.js:2969 is showing an error that says Access to XMLHttpRequest at 'localhost:8000/auth/api/authen' from origin 'http://localhost:4200' has been bloc ...

Defining a state in Typescript and passing it as a prop

export interface ISideBarProps { open: boolean; setOpen: React.Dispatch<React.SetStateAction<boolean>>; } export default function SideBar({ open, setOpen }: ISideBarProps) { return ( <div className={`absolute left-0 top-0 h- ...

Utilizing Nginx to route to various locations with distinct root paths in an Angular server-side rendered build

My website is up and running on the server, hosted at http://example.com. It was built using Angular and I deployed the dist folder containing the code to /opt/example_web/dist/browser on the server. The site is redirecting and loading successfully. I als ...

What is the best method for retrieving information from a JSON file in Swift?

I have a .json data file saved on my computer. The file is structured like this: { "employees" [ { "Name" : "John", "Location" : "Austin", "Age" : "30" }, ..... ], ..... } My goal is to retrieve this data and display it in a UITableView. Initially, I tho ...

Angular app's Google Drive viewer fails to display a PDF file

I have embedded an iFrame in my Angular app to display a PDF file using the link "https://drive.google.com/viewerng/viewer?embedded=true&url=my.pdf". However, I am facing an issue where sometimes it successfully displays the PDF, while other times it d ...

Getting a value from a JSON object by its ID within a class using Kotlin

Is there a more efficient way to retrieve the "temp" value from the "weather" array of a city based on its name, rather than using a slow for loop? You can find the JSON file here: Below is the code I have been working on: class MainActivity : AppCompat ...

Issues with form validators failing to work properly in Angular 2

I'm currently working on an Angular 2 form that utilizes form validators using the form builder module. After entering data in a text box, it successfully passes validation (indicated by a green outline around the div). However, upon loading the for ...

Oops! There seems to be a mistake: Unable to access the 'helpers' property of an undefined object

Click here to see my code import { OnInit } from '@angular/core'; import { HelpersService } from 'src/app/helpers.service'; @Component({ selector: 'app-system-maintenance', templateUrl: './system-maintenance.page.htm ...

PHP's ability to generate nested arrays in JSON format is a powerful

I am currently working on outputting JSON data from PHP, and I am facing some challenges with understanding how to handle nested arrays. So far, I have managed to successfully output individual sets, such as "type": "Feature", but I am unsure of how to ha ...

how can I display the JSON description based on the corresponding ID using Ionic 3

I have a JSON file containing: [{ "id": "1", "title": "Abba Father (1)", "description": "Abba Abba Father." }, { "id": "2", "title": "Abba Father, Let me be (2)", "description": "Abba Father, Let me be (2) we are the clay." }, { ...

What is the best method for displaying JSON data on an HTML page using Python Mako or Jinja templates?

Can you help me display JSON data in HTML using either a Mako or Jinja template? Take a look at the JSON file below: { "coord": { "lon": -0.13, "lat": 51.51 }, "weather": [ { "id": 300, ...

ReloginComponent missing in angular 4 service provider

The issue at hand is quite simple - I am encountering an error stating No provider for ReloginComponent Here's what I'm doing: calling a component within a service through injection. For instance: @Injectable() export class HttpUtil { con ...

This constructor is typically not suitable for Angular Dependency Injection, unless it is explicitly allowed

The error I am encountering seems to only occur during testing. When I build with -prod, everything works fine. The demo application project that utilizes the built library is able to fully interact with all the parameters of the services in question. I am ...

Step-by-step guide to debugging a Typescript node.js application from a remote location

With this particular configuration, I have successfully been able to remotely debug js files (on my Raspberry Pi). However, my goal is to be able to break inside ts files just like I can do during local debugging. Is this achievable? I have attempted vari ...

Error encountered in Angular8 Template Driven Form: TypeError - Attempt to access property 'ProviderName' of undefined resulting in Object.eval throwing an error in updateDirectives

An error has occurred with the template causing an issue. ProviderComponent.html:4 ERROR TypeError: Cannot read property 'ProviderName' of undefined at Object.eval [as updateDirectives] (ProviderComponent.html:4) at... provider.compo ...

Tips on switching the default camera with ngx-scanner-qrcode library in Angular

In my current project, I am utilizing the ngx-sanner-qrcode library for QRCode scanning. However, I am interested in changing the default camera from front to back in order to enhance the user experience. I assumed that I could change the default camera b ...

What is the best way to include an Observable in this function?

Every time I send a set of credentials to my API and receive the data that needs to be stored, I encounter an error during the login process. Error: TypeError: You have provided an invalid object when a stream was expected. You can provide an Observable ...

Is there a way to enable live-reload for a local npm package within a monorepo setup?

Currently, I am in the process of setting up a monorepo workspace that will house a Vue 3 application (using vite and TypeScript), cloud functions, and a shared library containing functions and TypeScript interfaces. I have successfully imported my local ...

What might be causing the frequent failures in my Angular project pipeline?

I've been working on an Angular project and trying to successfully tag and push it to the development server using Git and GitLab. Unfortunately, after multiple attempts, I'm feeling quite lost as to what might be going wrong. This is an excerp ...

Difficulty encountered when hosting an Angular and .Net Core application on a virtual machine's localhost

Having trouble running an application from a virtual machine on Azure? I'm facing an issue that I can't seem to solve. The application's front end is Angular and the backend is .NET Core 3.1. I'm using ngrok to tunnel my virtual machine ...