Encountering an issue with core.js:15723 showing ERROR TypeError: Unable to access property 'toLowerCase' of an undefined value while using Angular 7

Below, I have provided my code which utilizes the lazyLoading Module. Please review my code and identify any errors. Currently facing TypeError: Cannot read property 'toLowerCase' of undefined in Angular 7.

Model Class:

export class C_data {
    productId:number;
    product:string;
    code:string;
    available:string;
    price:number;
    rating:number;
    productImage:string;
}

allData-page.component.ts:

import {C_data} from '../../shared/model/c_data';
import { AllDataService } from './allData.service';
import { Observable } from 'rxjs';

@Component({
    selector: 'all-data',
    templateUrl: './alldataPage.component.html'
})

export class AlldataPageComponent implements OnInit {

    cdata:Observable<C_data[]>;

    constructor(private _allDataService: AllDataService) { }

    ngOnInit() { 
        this._allDataService.getData().subscribe(data => this.cdata);
        console.log(this.cdata);
    }
}

allData.service.ts:

import { HttpClient } from '@angular/common/http';
import { C_data } from 'app/shared/model/c_data';
import { Observable } from 'rxjs';

@Injectable({providedIn: 'root'})
export class AllDataService {

    urls:'../../shared/services/modeldata.json';

    constructor(private _httpClient: HttpClient) { }

    getData():Observable<C_data[]>{
        return this._httpClient.get<C_data[]>(this.urls);
    }

}

modeldata.json:

// JSON data here...

alldata.module.ts:

import { CommonModule } from '@angular/common';
import { AllDataRouterModule } from './allData-routing.module';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
    imports: [
        CommonModule,
        AllDataRouterModule,
        HttpClientModule
    ],
    exports: [],
    declarations: [AlldataPageComponent]
})
export class AllDataModule { }

allData-routing.module.ts:

import { NgModule } from '@angular/core';
import { AlldataPageComponent } from './allData-page.component';

// Route configuration here...

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule],
    declarations: [],
})
export class AllDataRouterModule { }

Answer №1

the correct format is:

path='../../shared/data/modelexample.json';

and not:

path:"../../shared/data/modelexample.json";

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

Limiting character count in jQuery using JSON

I am trying to manipulate the output of a snippet of code in my jQuery: <li> Speed MPH: ' + val.speed_mph + '</li>\ that is being pulled from a JSON endpoint and currently displays as: Speed MPH: 7.671862999999999 Is there a ...

Incorporate Subtitles into Your Website Using JWPlayer

I want to incorporate Video Captions similar to those seen on Lynda.com, for example at The captions should synchronize with the player and also appear in a separate block of HTML below the player. I am using JWPlayer for my video and have successfully in ...

How can I create a textbox in vue.js that only allows numeric input?

methods: { acceptNumber() { var x = this.value.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/); this.value = !x[2] ? x[1] : '(' + x[1] + ')' + x[2] + (x[3] ? '-' + x[3] : & ...

What is the best way to reference a component from another component in a React application?

I've been utilizing the react-notification-system library in my project, and here's a snippet of how I've incorporated it into my code. import React from 'react'; import Notification from 'react-notification-system'; cl ...

What is the process for declaring global mixins and filters on a Vue class-based TypeScript component?

Recently, I've been working on incorporating a Vue 2 plugin file into my project. The plugin in question is called global-helpers.ts. Let me share with you how I have been using it: import clone from 'lodash/clone' class GlobalHelpers { ...

The fadein feature in Deps.Autorun is not functioning as expected in Meteor version 0.5.9

Here is the code I am currently working with: Template.jobFlash.helpers({ latest_job: function(){ if(Session.get("latestJob")!=""){ return JobsCollection.findOne({}, {sort: {'added_date': -1}}); } } }); Deps. ...

What's the best way to use the like query in Mongoose?

Struggling with applying a Like query using Mongoose in the MEAN stack. Despite trying various solutions found online, nothing seems to work for me. Here is the model schema: const mongoose = require('mongoose'); const ItemTransactionSchema = ...

What methods can I utilize to expand the qix color library with personalized manipulation features?

Utilizing the qix color library, my goal is to create specific custom manipulation functions for use in a theme. The approach I am taking looks something like this: import Color from 'color'; const primary = Color.rgb(34, 150, 168); const get ...

Angular's ng-repeat allows you to iterate over a collection and

I have 4 different product categories that I want to display in 3 separate sections using AngularJS. Is there a way to repeat ng-repeat based on the product category? Take a look at my plnkr: http://plnkr.co/edit/XdB2tv03RvYLrUsXFRbw?p=preview var produc ...

Error TS2346: The parameters provided do not match the signature for the d3Service/d3-ng2-service TypeScript function

I am working with an SVG file that includes both rectangular elements and text elements. index.html <svg id="timeline" width="300" height="100"> <g transform="translate(10,10)" class="container" width="280" height="96"> <rect x ...

Is there a guarantee that XHR requests made within a click handler of an anchor tag will always be sent?

I'm trying to find information on whether an XHR request triggered in an anchor tag's click event handler is guaranteed to be sent. Despite my attempts at searching, I can't seem to locate a definitive answer. The specific question I have i ...

Issue with running the Jquery each function within a textbox inside an ASP.NET gridview

Below is the gridview markup: <asp:GridView ID="gvDoctorVisits" runat="server" DataKeyNames="AdmissionId" class="tableStyle" AutoGenerateColumns="False" Width="100%" EmptyDataText=& ...

Guide to implementing bidirectional data binding for a particular element within a dynamic array with an automatically determined index

Imagine having a JavaScript dynamic array retrieved from a database: customers = [{'id':1, 'name':'John'},{'id':2, 'name':'Tim}, ...] Accompanied by input fields: <input type='text' na ...

Some sections of the HTML form are failing to load

I'm currently following a tutorial and applying the concepts to a Rails project I had previously started. Here's my main.js: 'use strict'; angular.module('outpostApp').config(function ($stateProvider) { $stateProvider.sta ...

Issues arise when trying to use the Jquery append() method in conjunction with Angular

We are currently utilizing jquery version 1.9.1 and angular version 1.2.13 for our project. Our wysiwyg editor is functioning well, as we are able to save HTML into the database and load it back using the jquery append function successfully. However, we ar ...

What is the simplest way to send an AJAX request to run a PHP script?

Hey everyone, I'm facing a specific issue on my website that I haven't been able to solve by searching online. Therefore, I decided to create this question myself. What I'm trying to achieve: When I click a button on my site, it triggers a ...

Debate surrounding the use of .next() in conjunction with takeUntil

Recently, I've observed a change in behavior after updating my rxjs version. It seems that the .next() method this.ngUnsubscribe$.next(); is no longer functioning as it used to: export class TakeUntilComponent implements OnDestroy { // Our magical o ...

Tips for successfully sending an API request using tRPC and NextJS without encountering an error related to invalid hook calls

I am encountering an issue while attempting to send user input data to my tRPC API. Every time I try to send my query, I receive an error stating that React Hooks can only be used inside a function component. It seems that I cannot call tRPC's useQuer ...

How to store lengthy JSON strings in SAP ABAP as variables or literals without extensive formatting restrictions

Is there a way to input lengthy JSON data into ABAP as a string literal without the need for excessive line breaks or formatting? Perhaps enclosing the string in a specific template, or utilizing a method similar to JSON.stringify(..) found in other langua ...

Tips for transferring data from a pop-up or modal window to the main window in ASP.NET MVC

Currently, I am in the process of developing a contact form within ASP.NET MVC. This contact form will allow users to easily attach regular files through traditional file and browse functions. Additionally, users will have the option to search for a specif ...