Getting error in $.Get in SharePoint Framework

Question

I have created following function in webpart.ts file to retrieve stock data from the Yahoo finance,

 protected demo():void{      
 var symbol='goog'; 
 var url = 'http://query.yahooapis.com/v1/public/yql?q=';
 var data = 'select%20*%20from%20yahoo.finance.quotes%20where%20symbol%20in%20("'+symbol+'")&env=store://datatables.org/alltableswithkeys';

  $.get(url+data, function(response  ){
        alert("Data: " + response );
    }); 
  }

By executing this url in browser it shows me data but with SharePoint workbench it gives me following error in console :

HelloWebArtWebPart.ts:77 Uncaught (in promise) TypeError: Cannot read property 'get' of undefined
    at HelloWebArtWebPart.demo (HelloWebArtWebPart.ts:77)
    at HelloWebArtWebPart.render (HelloWebArtWebPart.ts:69)
    at HelloWebArtWebPart.e._renderWithAccessibleTitle (workbench-assembly_en-us_ba5b10d….js:133)
    at workbench-assembly_en-us_ba5b10d….js:133
    at <anonymous>

am i missing anything in this snippet?i have properly imported jquery.

Answer 1

Based on comments:

You need to use it as:

import * as $ from 'jquery';

Regarding the mixed content blocking, you need to use the below url:

https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes%20where%20symbol%20in%20("goog")&env=store://datatables.org/alltableswithkeys

So, your code would be as below:

var symbol='goog'; 
var url = 'https://query.yahooapis.com/v1/public/yql?q=';
var data = 'select%20*%20from%20yahoo.finance.quotes%20where%20symbol%20in%20("'+symbol+'")&env=store://datatables.org/alltableswithkeys';

This is default browser behaviour. You need to change the endpoint to https. You cant change this behaviour. Always ensure that you are pulling data over https. If its coming via http, browsers will block it.

How to fix a website with blocked mixed content

Update - so i had some time today, looks like some issue with Yahoo API.

You need to extract the XML and then get the value for the stock.

Below is a working code, modify it as per your need.

var symbol='goog'; 
var url = 'https://query.yahooapis.com/v1/public/yql?q=';
var data = 'select%20*%20from%20yahoo.finance.quotes%20where%20symbol%20in%20("'+symbol+'")&env=store://datatables.org/alltableswithkeys';

$.get(url + data).done(function (result) {
        //it gets me the entire page from which I need to extract xml
    console.log(result.documentElement.innerHTML); 

    var xml = result.documentElement.innerHTML,
          xmlDoc = $.parseXML( xml ),
          $xml = $( xmlDoc ),
          $title = $xml.find("Ask"); //use the element you want like  Currency,Bid,Bookvalue,DaysRange etc

          console.log($title.text());
});

Answer 2

Ditch jQuery and use the native browser Fetch API

  fetch(url+data).then(function(response  ){
        alert("Data: " + response );
    }); 
  }

You need a PolyFill for older IE versions, Edge supports it since v14

https://developer.mozilla.org/en/docs/Web/API/Fetch_API

---

And it is best to use a wrapper function

function get(uri) {
    fetch(uri, {
        method: 'GET',
        credentials: 'same-origin',    // or credentials: 'include'         
        headers: new Headers({
            "Accept": "application/json; odata=verbose",
        })
    }).then(response => response.json())
        .then(data => {
            (data.d.results || [data.d]).forEach(item => {
                 ......
            });
        });
}