Need help running a javascript in my ionic app


#1

.
I have built an ionic app and need guidance on adding my javascript to it.

My files are on GitHub https://github.com/ksnyd/simpleApp.git

The javascript (getTLE2018.js) I want to add to my ionic App is in the ‘test’ folder but Im not sure how or where to add it. getTLE2018.js calls the jStrip function located in the root of the ‘test’ folder.

Please offer assistance.

Thank you…

> home.html

<ion-header padding color="dark">
  <ion-icon padding name="home"> {{ today | date: 'short' }}</ion-icon>
  <ion-navbar>
    <ion-title>
      Simple App
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding color='dark'>
  <p>
    After button click, display results below button.
  </p>
  <button ion-button small (click)="check()">Run my script</button>
  <ion-list padding color="dark">
    My script results:
    <ion-list padding color="dark">
    <p><b>...{{script_txt}}...</b></p>
    </ion-list>
  </ion-list>
</ion-content>

> home.ts

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { ToastController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  public today: number = Date.now();
  satellite: string;

  constructor(public navCtrl: NavController, public navParams: NavParams, public toastCtrl: ToastController) {
  this.satellite = ('');
  }

  showToast1(position: string) {
    let toast = this.toastCtrl.create({
      message: '{myScript_Data}',
      duration: 2000,
      position: position
    });
   toast.present(toast);
  }
  
  script_txt = 'empty data';
  check() {
    if (this.script_txt == 'empty data') {
      //do some logic
      this.script_txt = 'myScript ran, here are the results!';
    } else {
      console.log('go to next page');
    }
  }
}

> getTLE2018.js

const jStrip = require('jStrip');
const jStrip1 = new jStrip(console.clear());
const linz = "-".repeat(70);
console.log('Getting INTELSAT 33E (IS-33E) TLE\n'+linz);
jStrip1.on("sat1", (d) => {console.log(`${d.data.replace(/ /g, '#')}`+'\n'+linz+'\n'+new Date()+'\n'+linz+'\n');
})
  jStrip1.getData("https://www.pulsesat.com/satellites/s/0bcd3a1c-ea73-49b8-8e15-8738f5a32693/").
    selector(".callout.secondary pre").
        marker("sat1")

Results of getTLE2018.js:

Getting INTELSAT 33E (IS-33E) TLE
--------------------------------------
1#41748U#16053B###18135.18654197##.00000049##00000-0##00000-0#0##9991
2#41748###0.0231##15.5385#0001851##55.6213#288.8760##1.00271641##6632
--------------------------------------
Wed May 16 2018 08:09:20 GMT+0430 (+0430)
--------------------------------------

#2

Depending on where your script is you could load it and then call a function of it, so perhaps wrap the content of the script into a function and then import it like:

import * as test from '../assets/getTLE2018.js'

On a sidenote, why are you not adding the simple logic with Angular right to your Ionic app?


#3

Depending on where your script is you could load it and then call a function of it, so perhaps wrap the content of the script into a function and then import it like:

import * as test from '../assets/getTLE2018.js

I have tried import * as test from '../assets/getTLE2018.js in my home.ts and get a TypeScript error "_Cannot find module ..._’

This is my first foray into programming in java / javascript, ionic and angular at the same time but its kind of confusing mixing the lot. This is why Im posting this, hoping someone can point me in the right direction.

I have read tons of posts about pulling web data and the only thing I found was with jStrip.js that runs fine in console (with node), so my getTLE2018.js relies on jStrip.js and I dont know where or how to properly call it. If there is an “Angular”/“ionic” way of doing this please offer assistance.