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

Adding HTML content to routes in ExpressOrEnhancing routes

Recently, I've been working with a basic index.html file. My goal is to have the routes file append an HTML button when requested by the browser without actually modifying the original file. This may seem like a peculiar idea, but my intention is to c ...

Error in Node.js: Using `import` token incorrectly

I am having trouble figuring out what the issue is. Node v5.6.0 NPM v3.10.6 This is the code snippet: function (exports, require, module, __filename, __dirname) { import express from 'express' }; The error message reads: SyntaxError: Une ...

Endless loop caused by Angular UI-router's promise resolving

I'm attempting to retrieve data from my SQLite database before loading a view using resolve when defining the state in ui-router. Currently, this is how I've set up the state: .state("menu", { templateUrl: "templates/menu.html", control ...

Is there an issue with the precedence of jison rules?

I've been stuck for hours trying to solve what seems like a simple problem but I just can't figure it out :/ I'm working on defining a small javascript-like language in jison. The issue I'm facing is that both the Parameter rule and th ...

Limiting the number of characters in a PrimeNG Quill editor

I am currently working on implementing a maximum length for the editor. Here is the code snippet I am using: this.editorTextChange$$ = this.quillEditor.onTextChange.asObservable() .subscribe((ev) => { const limit = this.maxLength; // last cha ...

When using mapStateToProps in React Redux, it may encounter difficulties in reading nested values

I feel like I must be overlooking something very obvious, possibly related to Immutable.js/React/Redux. Here is a method I have... function mapStateToProps(state){ console.log(JSON.stringify(state.test)); //prints all nested properties and object ...

connecting elements in an object's array to another array within a nested object

Is there a way to iterate through each string value in the imageKeys array and use it to create a URL for each object in the images array within the nested ImageList object, all without changing the original object? const myInitialStateFromParent = { ...

Guide on utilizing fs.readStream and fs.writesream for transmitting and receiving video file (.mp4) either from server to client or vice versa using Node Js

## My Attempt to Receive and Save Video Stream in .mp4 Format ## ---------- > Setting up Server Side Code > Receiving Video stream from client and saving it as a .mp4 file var express = require('express'); var app = global.app = expor ...

Angular 2: Enhancing Textareas with Emoji Insertion

I am looking to incorporate emojis into my text messages. <textarea class="msgarea" * [(ngModel)]="msg" name="message-to-send" id="message-to-send" placeholder="Type your message" rows="3"></textarea> After entering the text, I want the emoj ...

How can I reset a CSS position sticky element using JavaScript?

I have created a page where each section fills the entire screen and is styled using CSS position: sticky; to create a cool layered effect. Check it out here: https://codesandbox.io/s/ecstatic-khayyam-cgql1?fontsize=14&hidenavigation=1&theme=dark ...

Having trouble assigning a value to the datapicker through the onchange event and the name attribute in the code below

const stateValues = { code: '', product: '', checked: 'false', jobCardNo: '', openDate: '', completionDate: '', serial: '', technicalNo: '', ...

Guide to transforming View Model into JSON object in ASP.NET MVC

As a Java developer transitioning to .NET, I find myself delving into a .NET MVC2 project that requires a partial view for wrapping a widget. These JavaScript widgets come with JSON data objects that need to be populated by model data. Methods are then bou ...

Unable to transform into a tangible entity

When I run the code below, I encountered an error stating: Uncaught exception: TypeError: Cannot convert 'validation.messages.field' to object $.fn.validate = function(validation) { $.each(validation.rules, function(field, fieldRules){ ...

Yeoman Error: Issue with 'mkdir' in Javascript Execution

Currently, I am in the process of setting up a Meanjs instance using a Yeoman generator. However, when I execute 'sudo yo meanjs', everything goes smoothly until an issue arises while attempting to create a directory and it fails. Any insights on ...

"Exploring ways to reattempt a route request upon encountering the $stateNotFound event within AngularUI Router

Managing a large AngularJS application can be quite challenging when it comes to splitting it into functional modules. Currently, all the modules are loaded on the initial page load as they are bundled into a single JavaScript file. However, I am looking t ...

What are the distinctions in how jQuery behaves when an element is assigned to a variable versus in Javascript?

I've noticed that when I assign a jQuery element to a variable, it doesn't match the element in a comparison. However, if I assign a JavaScript element, it does... test1 = $(".the_div"); console.log(test1 == $(".the_div")); // This logs false ...

The Transparent Quirk in Three.js

Hey there! I'm working on displaying a 3D avatar on my website that allows users to apply textures to the character. I'm hoping to enable users to create transparent textures so they can see the model underneath. Right now, when implementing tran ...

What is the best way to create a JavaScript button that can be clicked to increase a variable by 1?

I am curious to know how you can create a button that appears on an empty HTML canvas and, when clicked, adds +1 to a variable. I am working on this JavaScript code within an HTML text file which will later be saved as an HTML file. Please ensure that th ...

Automatically inserting a row into an HTML table

My table structure looks like this: <form name="frm_data_nasabah2" method="post" enctype="application/x-www-form-urlencoded" action="<?php echo $page_action;?>"> <table class="table table-bordered table-hover" id="tab_logic_ ...

Develop a unique method for loading AngularJS templates

When working with AngularJS, there are various ways to provide an external template, such as using a script tag or a separate HTML file on the web server. However, I am faced with a situation where I need to implement a custom logic for retrieving these ...