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

Question

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.

ierhalim · Accepted Answer · 2022-04-19T08:43:52.710

0

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.

edited Apr 19 '22 at 08:43

answered Apr 19 '22 at 08:31

ierhalim

298
3
16

Thank you @ierhalim for your answer, you are correct so I have changed the json file to a javascript file but the same error raised in html page – Rand alrand Apr 19 '22 at 08:58
@Randalrand did you add a property that named jsonlist? – ierhalim Apr 19 '22 at 09:11
where should I add it? – Rand alrand Apr 19 '22 at 09:17
In my example code I define a property that named dataList you can use it and replace the dataList to => jsonlist. – ierhalim Apr 19 '22 at 09:25
I got a warning on "import mydata from 'src/assets/list.js';" (Could not find a declaration file for module 'src/assets/list.js'. '/Users/rawan/Documents/IonicProjects/test4/src/assets/list.js' implicitly has an 'any' type.ts(7016)) – Rand alrand Apr 19 '22 at 10:19
You should create it as .ts (in your case the filename must be list.ts) file and export it like in the example. – ierhalim Apr 19 '22 at 10:38
ok then how can I call it in the index.html? – Rand alrand Apr 19 '22 at 10:41
You don't need to add it in your html, typescript manages it. But adding .ts file to assets could be bad idea, you can add the file to same folder with your component. – ierhalim Apr 19 '22 at 11:03
this.dataList = myData; function filterJson() { return this.dataList.filter(e => ( (e.Answer.indexOf('Y') === 0) )) } this.dataList=filterJson(); ----->>> it prints an empty list with same number of elements of json array like this :[object Object] – Rand alrand Apr 19 '22 at 11:50
You should add property name that you want to show to your binding. {{item. Answer}} – ierhalim Apr 19 '22 at 11:52
works correctly thanks! – Rand alrand Apr 19 '22 at 12:02

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

1 Answers1