How to call external javascript file from typescript method in ionic?-CodePudding

I have a json list in a javascript file and I want to filter it in typescript before sending the array of results to the html home page. However, I got an error in the html file.

Note: I tested my code with an online typescript editor and it worked perfectly.

Javascript File list.js

   var jsonList= [
  {
    "Answer": "Y",
    dummyProp1 : 1
  },
{
    "Answer": "N",
    dummyProp1 : 1
  }];

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);
}
}

home index file:

<body>
  <app-root></app-root>
  <script type="text/javascript" src="src/assets/list.js"></script>
</body>

home page file: home.html

<div *ngFor="let item of jsonlist">
<ion-item>
  <ion-label><b>{{item}}</b></ion-label>
</ion-item>

Error : Property 'jsonlist' does not exist on type 'HomePage'.ngtsc(2339) home.page.ts(11, 49): Error occurs in the template of component HomePage.

CodePudding user response：

Your json file is not a valid json. In json format you can't define variables, you should just define your data in json files.

A Valid json example.

[
  {
    "Answer": "Y",
    "dummyProp1" : 1
   },
   {
    "Answer": "N",
    "dummyProp1" : 1
   }
]

In typescripit declare means a declaration of a unknown reference (to be able to help build) you can't access the declaration like variables.

In an angular template you should only access the properties in the component class. You shouldn't (and probly can't) access the variables outside of the component class.

Use typescript instead of json

If your json value doesn't need the change after build completed, you can create it as a .ts file and export the json array from that file.

mydata.ts

export default [
  {
    Answer: "Y",
    dummyProp1: 1,
  },
  {
    Answer: "N",
    dummyProp1: 1,
  },
];

In your component you can import the myData and assign it to your property.

import mydata from "./mydata";


    export class HomePage { 
    
      dataList: Array<{ Answer: string; dummyProp1: number }>;
      ngOnInit() {
        this.dataList = myData;
// You can do all your operation, binding, filtering etc. from dataList property
       }
    }

If you have to use a .json file you can check this answer, and assign imported value to a component property.

But if you need to change this json file after build or you want serve this file in a server (with a distribution tool or something like that) you have to use HttpClientModule or another tool for get data with http/web-socket request.

For more information of HttpClientModule you can check this blog post.