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 ? – Gautam Sheth Jun 6 '17 at 11:54
  • import $ from 'jquery'; – SynozeN Technologies Jun 6 '17 at 11:54
  • 2
    can you try it as import * as $ from 'jquery'; ? assuming that you have installed jquery as npm install jquery – Gautam Sheth Jun 6 '17 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 – SynozeN Technologies Jun 6 '17 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) – Danny '365CSI' Engelman Jun 6 '17 at 12:06

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

| improve this answer | |
  • 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. – SynozeN Technologies Jun 6 '17 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); }); – SynozeN Technologies Jun 6 '17 at 13:12
  • Check this link - stackoverflow.com/questions/13458132/… , implement your code accordingly. – Gautam Sheth Jun 6 '17 at 15:40
  • Check updated answer. – Gautam Sheth Jun 7 '17 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 => {
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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