Error while using jQuery- jQuery is not defined

Ionic Framework ionic-v3
1

Hi, I have installed jquery and I am trying to loop over REST API data. But, get an error saying “jQuery is not defined”.

REST API: https://xpm4zyor39.execute-api.us-west-2.amazonaws.com/prod/entries
Code:

import * as HighCharts from 'highcharts';
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {MessageProvider} from '../../providers/message/message';
import * as $ from 'jquery';

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

messageList=[];
  ml=[];

  ionViewDidLoad() {
//this.messageProvider.getMessages().subscribe(data =>ml = data.Items)

   // var ml=[];
    this.messageProvider.getMessages().subscribe(data => this.ml= data.Items);
    var myChart = HighCharts.chart('container', {

      chart: {
        type: 'spline'
      },
      title: {
        text: 'Fruit Consumption'
      },
      xAxis: {
        categories: ['Apples', 'Bananas', 'Oranges']
      },
      yAxis: {
        title: {
          text: 'Fruit eaten'
        }
      },
      series: [{
        name: 'Humidity',
        data: $(jQuery.parseJSON(this.ml)).each(function (){
          x: this.Items.humidity
          y: this.Items.Date

        })
      }]
    });
  }
  constructor(private messageProvider: MessageProvider) {
    this.getMessages();
  }

  getMessages(){
    this.messageProvider.getMessages().subscribe(data => this.messageList= data.Items);
  }

}
2

You shouldn’t need to import jQuery. You should be able to do what you are doing without it.

1 Like
3

Get an error saying: $ is not defined

4

As a style and performance point, it’s better to avoid mixing jQuery with Angular. If you have a different solution available, probably better to explore that.

2 Likes