Having a JSON list stored in a JavaScript file, my objective is to filter it using TypeScript before sending the filtered results to the HTML homepage. However, I encountered an issue within the HTML file.
It's worth mentioning that when running the code in an online TypeScript editor, everything worked smoothly.
The JavaScript file, list.js, holds the following data:
var jsonList= [
{
"Answer": "Y",
dummyProp1 : 1
},
{
"Answer": "N",
dummyProp1 : 1
}
];
Moving on to the TypeScript file, home.ts:
import { Component,OnInit } from '@angular/core';
import 'src/assets/list.js';
declare var list:any[];
declare var jsonlist:any[];
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {
constructor() {
}
ngOnInit() {
function filterJson() {
return this.list.filter(e => (
(e.Answer.indexOf('Y') === 0)
))
}
var o = filterJson();
for(var key in o) {
var infoJSON = o[key];
jsonlist.push(infoJSON.Answer)
}
console.log(jsonlist);
}
}
This is what the home index file looks like:
<body>
<app-root></app-root>
<script type="text/javascript" src="src/assets/list.js"></script>
</body>
Finally, here's the content of the home page file, home.html:
<div *ngFor="let item of jsonlist">
<ion-item>
<ion-label><b>{{item}}</b></ion-label>
</ion-item>
</div>
<p>An error message was displayed as follows:</p>
<blockquote>
Property 'jsonlist' does not exist on type 'HomePage'. ngtsc(2339) home.page.ts(11, 49): Error occurs in the template of component HomePage.
</blockquote>
</div></questionbody>
<exquestionbody>
<div class="question">
<p>While working with a JSON list in a JavaScript file and wanting to implement filtering in TypeScript before displaying the results on the HTML homepage, an error occurred within the HTML file.</p>
<p>Note: The code executed flawlessly in an online TypeScript editor.</p>
<p>The contents of the JavaScript file, list.js, are as follows:</p>
<pre><code>var jsonList= [
{
"Answer": "Y",
dummyProp1 : 1
},
{
"Answer": "N",
dummyProp1 : 1
}];
As for the TypeScript file, home.ts:
import { Component,OnInit } from '@angular/core';
import 'src/assets/list.js';
declare var list:any[];
declare var jsonlist:any[];
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {
constructor() {
}
//extract only yes answers
ngOnInit() {
function filterJson() {
return this.list.filter(e => (
(e.Answer.indexOf('Y') === 0)
))
}
var o = filterJson();
//get only Answers
for(var key in o) {
var infoJSON = o[key];
jsonlist.push(infoJSON.Answer)
}
console.log(jsonlist);
}
}
The structure of the home index file:
<body>
<app-root></app-root>
<script type="text/javascript" src="src/assets/list.js"></script>
</body>
Content of the home page file, home.html:
<div *ngFor="let item of jsonlist">
<ion-item>
<ion-label><b>{{item}}</b></ion-label>
</ion-item>
Error Message: Property 'jsonlist' does not exist on type 'HomePage'. ngtsc(2339) home.page.ts(11, 49): Error occurs in the template of component HomePage.