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.

  • How have you have imported jquery ? Commented Jun 6, 2017 at 11:54
  • import $ from 'jquery'; Commented Jun 6, 2017 at 11:54
  • 2
    can you try it as import * as $ from 'jquery'; ? assuming that you have installed jquery as npm install jquery Commented Jun 6, 2017 at 11:55
  • That error gone by using import * as $ from 'jquery'; but now m gettin g new error in console Mixed Content: The page at 'sites/dev/_layouts/15/workbench.aspx' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.financ…%20symbol%20in%20(%22goog%22)&env=store://datatables.org/alltableswithkeys'. This request has been blocked; the content must be served over HTTPS Commented Jun 6, 2017 at 11:59
  • 1
    You are not allowed to call HTTP endpoints from an HTTPS server.. that WAS a serious security hole. So you have use the HTTPS endpoints (and most often you have to pay for those) Commented Jun 6, 2017 at 12:06

2 Answers 2


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:


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

    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

  • I have changed the code as per above code lines now all errors gone but I am getting null data and it shows data in the browser while directly executing URL but it is not showing in web part. Commented Jun 6, 2017 at 13:11
  • i am using this snippet : var url = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes%20where%20symbol%20in%20(%22goog%22)&env=store://datatables.org/alltableswithkeys&format=xml"; $.getJSON(url, function (json) { alert(json); }); Commented Jun 6, 2017 at 13:12
  • Check this link - stackoverflow.com/questions/13458132/… , implement your code accordingly. Commented Jun 6, 2017 at 15:40
  • Check updated answer. Commented Jun 7, 2017 at 7:14

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


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 => {

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.