none
How to display stocks list in sharepoint online using JSOM/Rest API RRS feed

  • Question

  • Hi Team,

    How to display stocks list in sharepoint online in Content Editor webpart using JSOM/Rest API. 

    I need to show in a Tabular format with Stock name and Live value with (up & down arrows next to value)

    How to implement this. Can some one suggest with the details would be helpful.


    Ganesh

    Thursday, October 3, 2019 1:41 PM

Answers

  • Hi Ganesh,

    We can use this:

    https://financialmodelingprep.com/api/v3/company/profile/MSFT

    The following code for your reference.

    <p id="ptitle">
    <table class="alternate"><tr><th>Name</th><th>Value</th></tr></table>
    </p>
    <style>
    .StockName{font-size:1.5em;}
    .StockLastPrice{font-size:1.2em;}
    .alternate{
    	font-family: arial, sans-serif;
    	border-collapse: collapse;
    	width: 100%;
    }
    .alternate td, .alternate th {
    	border: 1px solid #dddddd;
    	text-align: left;
    	padding: 8px;
    }
    .alternate tr:nth-child(2n) {
    	background-color: silver;
    }
    .alternate tr {
    	background-color: white;
    }
    .alternate tr:nth-child(2n):hover, .alternate tr:hover {
    	background-color: grey;
    }
    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    jq = jQuery.noConflict(true);
    jq(document).ready(function () {
    	var listTitle="StocksList";
    	getListItems(listTitle);
    });
    function getListItems(listTitle){
    	var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('"+listTitle+"')/items";
    	jq.ajax({
    		url: requestUri,
    		method: "GET",
    		headers: { "Accept": "application/json; odata=verbose" },
    		success: function (data) {
    			jq.each(data.d.results,function(i,item){
    				getStockPrice(item.Title);
    			});
    		},
    		error: function (data) {
    		}
    	});
    }
    
    function getStockPrice(symbol) {
    	var EndPoint = "https://financialmodelingprep.com/api/v3/company/profile/"+symbol;
    	jq.ajax({
    		url: EndPoint,
    		method: "GET",
    		dataType: 'json',
    		success: function (response) {
    			var stockInfo=response.profile;
    			var stockHtml="";
    			stockHtml+='<div class="StockContainer">';
    			stockHtml+='<span class="StockLastPrice">'+stockInfo.price+'<sub>USD</sub></span>';						
    			if(stockInfo.changes<0){
    				stockHtml+='<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjI2cHgiIGhlaWdodD0iMjZweCIgdmlld0JveD0iMCAwIDI2IDI2IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTEyLjUsMyBMNCwxNSBMMTAuMjgwMjg1NywxNSBMMTAuMjgwMjg1NywyMi41IEwxNC43MTk3MTQzLDIyLjUgTDE0LjcxOTcxNDMsMTUgTDIxLDE1IEwxMi41LDMgTDEyLjUsMyBaIiBmaWxsPSIjREQ0QjM5Ij48L3BhdGg+Cjwvc3ZnPg==" alt="PriceDown" class="Down" style="transform:rotate(180deg);">';
    				stockHtml+='<span class="StockChange" style="color:red">'+stockInfo.changes+'</span>';
    				stockHtml+='<span class="StockPercentChange" style="color:red">'+stockInfo.changesPercentage+'</span>';
    			}else{
    				stockHtml+='<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjI2cHgiIGhlaWdodD0iMjZweCIgdmlld0JveD0iMCAwIDI2IDI2IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTEyLjUsMyBMNCwxNSBMMTAuMjgwMjg1NywxNSBMMTAuMjgwMjg1NywyMi41IEwxNC43MTk3MTQzLDIyLjUgTDE0LjcxOTcxNDMsMTUgTDIxLDE1IEwxMi41LDMgTDEyLjUsMyBaIiBmaWxsPSIjM0Q5NDAwIj48L3BhdGg+Cjwvc3ZnPg==" alt="PriceUp" class="Up" style="">';
    				stockHtml+='<span class="StockChange" style="color:green">'+stockInfo.changes+'</span>';
    				stockHtml+='<span class="StockPercentChange" style="color:green">'+stockInfo.changesPercentage+'</span>';
    			}			
    			stockHtml+='</div>';
    			jq(".alternate").append('<tr><td>' + stockInfo.companyName + '('+symbol+')</td><td>' +stockHtml+ '</td></tr>');
    		},
    		error: function (data) {
    		}
    	});
    }
    </script>

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    • Marked as answer by Ganesh Naga Thursday, October 10, 2019 12:57 PM
    Thursday, October 10, 2019 8:17 AM
    Moderator
  • Hi Ganesh,

    Try to use the code below.

    <p id="ptitle">
    <table class="alternate"><tr><th>Name</th><th>Value</th></tr></table>
    </p>
    <style>
    .StockName{font-size:1.5em;}
    .StockLastPrice{font-size:1.2em;}
    .alternate{
    	font-family: arial, sans-serif;
    	border-collapse: collapse;
    	width: 100%;
    }
    .alternate td, .alternate th {
    	border: 1px solid #dddddd;
    	text-align: left;
    	padding: 8px;
    }
    .alternate tr:nth-child(2n) {
    	background-color: silver;
    }
    .alternate tr {
    	background-color: white;
    }
    .alternate tr:nth-child(2n):hover, .alternate tr:hover {
    	background-color: grey;
    }
    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    jq = jQuery.noConflict(true);
    jq(document).ready(function () {
    	var listTitle="StocksList";
    	getListItems(listTitle);
    });
    function getListItems(listTitle){
    	var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('"+listTitle+"')/items";
        jq.ajax({
            url: requestUri,
            method: "GET",
            headers: { "Accept": "application/json; odata=verbose" },
            success: function (data) {
                jq.each(data.d.results,function(i,item){
    				getStockPrice(item.Title);
                });
            },
            error: function (data) {
            }
        });
    }
    
    function getStockPrice(symbol) {
    	var EndPoint = "http://dev.markitondemand.com/MODApis/Api/v2/Quote/jsonp";
    	jq.ajax({
    		url: EndPoint,
    		method: "GET",
    		jsonp: "callback",
    		dataType: 'jsonp',
    		data: {
    			"symbol":symbol
    		},
    		success: function (response) {
    			var stockHtml="";
    			stockHtml+='<div class="StockContainer">';
    			stockHtml+='<span class="StockLastPrice">'+response.LastPrice+'<sub>USD</sub></span>';						
    			if(response.Change<0){
    				stockHtml+='<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjI2cHgiIGhlaWdodD0iMjZweCIgdmlld0JveD0iMCAwIDI2IDI2IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTEyLjUsMyBMNCwxNSBMMTAuMjgwMjg1NywxNSBMMTAuMjgwMjg1NywyMi41IEwxNC43MTk3MTQzLDIyLjUgTDE0LjcxOTcxNDMsMTUgTDIxLDE1IEwxMi41LDMgTDEyLjUsMyBaIiBmaWxsPSIjREQ0QjM5Ij48L3BhdGg+Cjwvc3ZnPg==" alt="PriceDown" class="Down" style="transform:rotate(180deg);">';
    				stockHtml+='<span class="StockChange" style="color:red">'+Math.round(response.Change*100)/100+'</span>';
    				stockHtml+='<span class="StockPercentChange" style="color:red">('+Math.round(response.ChangePercent*100)/100+')</span>';
    			}else{
    				stockHtml+='<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjI2cHgiIGhlaWdodD0iMjZweCIgdmlld0JveD0iMCAwIDI2IDI2IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTEyLjUsMyBMNCwxNSBMMTAuMjgwMjg1NywxNSBMMTAuMjgwMjg1NywyMi41IEwxNC43MTk3MTQzLDIyLjUgTDE0LjcxOTcxNDMsMTUgTDIxLDE1IEwxMi41LDMgTDEyLjUsMyBaIiBmaWxsPSIjM0Q5NDAwIj48L3BhdGg+Cjwvc3ZnPg==" alt="PriceUp" class="Up" style="">';
    				stockHtml+='<span class="StockChange" style="color:green">'+Math.round(response.Change*100)/100+'</span>';
    				stockHtml+='<span class="StockPercentChange" style="color:green">('+Math.round(response.ChangePercent*100)/100+')</span>';
    			}			
    			stockHtml+='</div>';
    			jq(".alternate").append('<tr><td>' + response.Name + '</td><td>' +stockHtml+ '</td></tr>');
    		},
    		error: function (data) {
    		}
    	});
    }
    </script>

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    • Marked as answer by Ganesh Naga Wednesday, October 9, 2019 9:36 AM
    Tuesday, October 8, 2019 6:57 AM
    Moderator

All replies

  • Hi Ganesh,

    The script editor web part coding is not recommended in SharePoint online in fact by default this is disabled. You can try doing the same using the modern programming SPFx and you can display the web part using the JSON object some thing like below:

    https://global-sharepoint.com/2019/09/15/how-to-enable-tiles-view-in-modern-sharepoint-online-list/

    If you still prefer to do with script editor web part - you may face issue to locate the script web part option, here is how this can be enabled:

    https://global-sharepoint.com/2019/08/24/how-to-enable-script-editor-web-part-in-sharepoint-online-site/ 


    Thanks&Regards,

    Habibur Rahaman

    MCSA,MCP,MCTS

    My Certificates

    Note: If you feel the proposed answer is helpful, please mark as so or if this answered your question,please mark as answer.

    Thursday, October 3, 2019 7:01 PM
  • Hi Ganesh,

    The following code for your reference.

    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
        getStockPrice();        
        setInterval(getStockPrice,5000);
    });
    var EndPoint = 'http://dev.markitondemand.com/Api/v2/Quote/jsonp';
    function getStockPrice () {
        return $.ajax({
          url: EndPoint,
          data: {symbol: "MSFT"},
          dataType: 'jsonp',
          method: 'GET'
        }).then(function (response) {
            $(".StockName").text(response.Name);
            $(".StockLastPrice").text(response.LastPrice);
            $(".StockLastPrice").append("<sub>USD</sub>");
            if(response.Change<0){
                $(".Down").show();
                $(".StockChange").css("color","red");
                $(".StockPercentChange").css("color","red");
            }else{
                $(".Up").show();
                $(".StockChange").css("color","green");
                $(".StockPercentChange").css("color","green");
            }
            $(".StockChange").text(Math.round(response.Change*100)/100);
            $(".StockPercentChange").text("("+Math.round(response.ChangePercent*100)/100+")");          
        });
    }
    </script>
    <style>
    .StockName{font-size:1.5em;}
    .StockLastPrice{font-size:1.2em;}
    </style>
    
    <h2>Live Stock Price</h2>
    <br/>
    
    <div class="StockContainer">    
      <div class="StockName"></div>
    
      <span class="StockLastPrice"></span>
      <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjI2cHgiIGhlaWdodD0iMjZweCIgdmlld0JveD0iMCAwIDI2IDI2IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTEyLjUsMyBMNCwxNSBMMTAuMjgwMjg1NywxNSBMMTAuMjgwMjg1NywyMi41IEwxNC43MTk3MTQzLDIyLjUgTDE0LjcxOTcxNDMsMTUgTDIxLDE1IEwxMi41LDMgTDEyLjUsMyBaIiBmaWxsPSIjM0Q5NDAwIj48L3BhdGg+Cjwvc3ZnPg==" alt="PriceUp" class="Up" style="display:none;">
      <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjI2cHgiIGhlaWdodD0iMjZweCIgdmlld0JveD0iMCAwIDI2IDI2IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTEyLjUsMyBMNCwxNSBMMTAuMjgwMjg1NywxNSBMMTAuMjgwMjg1NywyMi41IEwxNC43MTk3MTQzLDIyLjUgTDE0LjcxOTcxNDMsMTUgTDIxLDE1IEwxMi41LDMgTDEyLjUsMyBaIiBmaWxsPSIjREQ0QjM5Ij48L3BhdGg+Cjwvc3ZnPg==" alt="PriceDown" class="Down" style="transform:rotate(180deg);display:none;">
      <span class="StockChange"></span>
      <span class="StockPercentChange"></span>
    </div>  

    If you want to achieve in the modern site page, we need create SPFx web part to achieve it. Here is a solution from GitHub for your reference.

    Stock Tracker SharePoint Webpart

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Friday, October 4, 2019 3:09 AM
    Moderator
  • Thanks Dennis,

    I have list of 10 stock names like Microsoft. How to show those in a tabular format with two columns. Can you please suggest to display in a tabular structure with 10 different stocks and values


    Ganesh

    Friday, October 4, 2019 5:41 AM
  • Hi Ganesh,

    The following code for your reference.

    <p id="ptitle">
    <table class="alternate"><tr><th>Name</th><th>Value</th></tr></table>
    </p>
    <style>
    .StockName{font-size:1.5em;}
    .StockLastPrice{font-size:1.2em;}
    .alternate{
    	font-family: arial, sans-serif;
    	border-collapse: collapse;
    	width: 100%;
    }
    .alternate td, .alternate th {
    	border: 1px solid #dddddd;
    	text-align: left;
    	padding: 8px;
    }
    .alternate tr:nth-child(2n) {
    	background-color: silver;
    }
    .alternate tr {
    	background-color: white;
    }
    .alternate tr:nth-child(2n):hover, .alternate tr:hover {
    	background-color: grey;
    }
    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    	var listTitle="StocksList";
    	getListItems(listTitle);
    });
    function getListItems(listTitle){
    	var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('"+listTitle+"')/items";
        $.ajax({
            url: requestUri,
            method: "GET",
            headers: { "Accept": "application/json; odata=verbose" },
            success: function (data) {
                $.each(data.d.results,function(i,item){
    				getStockPrice(item.Title);
                });			 
            },
            error: function (data) {
            }
        });
    }
    
    function getStockPrice(symbol) {
    	var EndPoint = 'http://dev.markitondemand.com/Api/v2/Quote/jsonp?symbol='+symbol;
    	$.ajax({
            url: EndPoint,
            method: "GET",
    		dataType: 'jsonp',
    		async:false,
            //headers: { "Accept": "application/json; odata=verbose" },
            success: function (response) {
    			var stockHtml="";
    			stockHtml+='<div class="StockContainer">';
    			stockHtml+='<span class="StockLastPrice">'+response.LastPrice+'<sub>USD</sub></span>';						
    			if(response.Change<0){
    				stockHtml+='<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjI2cHgiIGhlaWdodD0iMjZweCIgdmlld0JveD0iMCAwIDI2IDI2IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTEyLjUsMyBMNCwxNSBMMTAuMjgwMjg1NywxNSBMMTAuMjgwMjg1NywyMi41IEwxNC43MTk3MTQzLDIyLjUgTDE0LjcxOTcxNDMsMTUgTDIxLDE1IEwxMi41LDMgTDEyLjUsMyBaIiBmaWxsPSIjREQ0QjM5Ij48L3BhdGg+Cjwvc3ZnPg==" alt="PriceDown" class="Down" style="transform:rotate(180deg);">';
    				stockHtml+='<span class="StockChange" style="color:red">'+Math.round(response.Change*100)/100+'</span>';
    				stockHtml+='<span class="StockPercentChange" style="color:red">('+Math.round(response.ChangePercent*100)/100+')</span>';
    			}else{
    				stockHtml+='<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjI2cHgiIGhlaWdodD0iMjZweCIgdmlld0JveD0iMCAwIDI2IDI2IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTEyLjUsMyBMNCwxNSBMMTAuMjgwMjg1NywxNSBMMTAuMjgwMjg1NywyMi41IEwxNC43MTk3MTQzLDIyLjUgTDE0LjcxOTcxNDMsMTUgTDIxLDE1IEwxMi41LDMgTDEyLjUsMyBaIiBmaWxsPSIjM0Q5NDAwIj48L3BhdGg+Cjwvc3ZnPg==" alt="PriceUp" class="Up" style="">';
    				stockHtml+='<span class="StockChange" style="color:green">'+Math.round(response.Change*100)/100+'</span>';
    				stockHtml+='<span class="StockPercentChange" style="color:green">('+Math.round(response.ChangePercent*100)/100+')</span>';
    			}			
    			stockHtml+='</div>';
    			$(".alternate").append('<tr><td>' + response.Name + '</td><td>' +stockHtml+ '</td></tr>');
            },
            error: function (data) {
            }
        });
    }
    </script>

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.


    Friday, October 4, 2019 7:58 AM
    Moderator
  • Hi Dennis, 

    I tried in same way. I am getting error as: 

    message"response is not defined"

    ReferenceError: response is not defined↵ at eval (eval at getStockPrice

    Can you please help me to fix this.


    Ganesh

    Friday, October 4, 2019 9:39 AM
  • Hi Ganesh,

    Did you modify the "listTitle" in the code above?

    Using IE F12 to debug the code, and check which line of code throw the error.

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Friday, October 4, 2019 9:57 AM
    Moderator
  • Hi Dennis,

    Yes, I changed the list name and when I debug I get error in the function:

    'function getStockPrice(symbol)'. Its not not going into success case.

    value in endpoint coming as : EndPoint = "http://dev.markitondemand.com/Api/v2/Quote/jsonp?symbol=MFST"

    then its not going into Success case. Can you please suggest how to fix this error.


    Ganesh

    Saturday, October 5, 2019 3:07 AM
  • Tried the given endpoint and it did not work. Please replace the below part

    var EndPoint = 'http://dev.markitondemand.com/Api/v2/Quote/jsonp?symbol='+symbol;

    with this

    var EndPoint = 'http://dev.markitondemand.com/MODApis/Api/v2/quote/jsonp?symbol='+symbol;

    *Please not the api uses http and not https. So it is not secure.

    Hope it helps.


    Please remember to up-vote & mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    Saturday, October 5, 2019 5:50 PM
  • I again tried with replacing with the updated one but not working. This time I noticed some new error in console:

    A cookie associated with a cross-site resource at <URL> was set without the `SameSite` attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at <URL> and <URL>.


    Ganesh

    Sunday, October 6, 2019 5:36 AM
  • Just hit this in browser and check if you get the result:

    http://dev.markitondemand.com/MODApis/Api/v2/quote/jsonp?symbol=MSFT


    Please remember to up-vote & mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    Sunday, October 6, 2019 7:19 AM
  • Hi Ganesh,

    The symbol is not right, please modify "MFST" to "MSFT".

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Monday, October 7, 2019 8:32 AM
    Moderator
  • Yes Dennis, I changes the value in List still its not going to success case. Below is the screenshot I captured while debugging: Please verify the below error and kindly assist me how to fix to in order to enter into Success case

    Ganesh

    Monday, October 7, 2019 11:23 AM
  • Yes, I changed the URL, but same responses not going into Success case. I updated below. and results are coming for that URL in browser.

    Ganesh

    Monday, October 7, 2019 11:26 AM
  • Hi Ganesh,

    Please modify the code as below to check if it works.

    <p id="ptitle">
    <table class="alternate"><tr><th>Name</th><th>Value</th></tr></table>
    </p>
    <style>
    .StockName{font-size:1.5em;}
    .StockLastPrice{font-size:1.2em;}
    .alternate{
    	font-family: arial, sans-serif;
    	border-collapse: collapse;
    	width: 100%;
    }
    .alternate td, .alternate th {
    	border: 1px solid #dddddd;
    	text-align: left;
    	padding: 8px;
    }
    .alternate tr:nth-child(2n) {
    	background-color: silver;
    }
    .alternate tr {
    	background-color: white;
    }
    .alternate tr:nth-child(2n):hover, .alternate tr:hover {
    	background-color: grey;
    }
    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    	var listTitle="StocksList";
    	getListItems(listTitle);
    });
    function getListItems(listTitle){
    	var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('"+listTitle+"')/items";
        $.ajax({
            url: requestUri,
            method: "GET",
            headers: { "Accept": "application/json; odata=verbose" },
            success: function (data) {
                $.each(data.d.results,function(i,item){
    				getStockPrice(item.Title);
                });			 
            },
            error: function (data) {
            }
        });
    }
    
    function getStockPrice(symbol) {
    	var EndPoint = "http://dev.markitondemand.com/MODApis/Api/v2/Quote/jsonp";
    	$.ajax({
            url: EndPoint,
            method: "GET",
    		jsonp: "callback",
    		dataType: 'jsonp',
    		data: {
    			"symbol":symbol
    		},
            success: function (response) {
    			var stockHtml="";
    			stockHtml+='<div class="StockContainer">';
    			stockHtml+='<span class="StockLastPrice">'+response.LastPrice+'<sub>USD</sub></span>';						
    			if(response.Change<0){
    				stockHtml+='<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjI2cHgiIGhlaWdodD0iMjZweCIgdmlld0JveD0iMCAwIDI2IDI2IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTEyLjUsMyBMNCwxNSBMMTAuMjgwMjg1NywxNSBMMTAuMjgwMjg1NywyMi41IEwxNC43MTk3MTQzLDIyLjUgTDE0LjcxOTcxNDMsMTUgTDIxLDE1IEwxMi41LDMgTDEyLjUsMyBaIiBmaWxsPSIjREQ0QjM5Ij48L3BhdGg+Cjwvc3ZnPg==" alt="PriceDown" class="Down" style="transform:rotate(180deg);">';
    				stockHtml+='<span class="StockChange" style="color:red">'+Math.round(response.Change*100)/100+'</span>';
    				stockHtml+='<span class="StockPercentChange" style="color:red">('+Math.round(response.ChangePercent*100)/100+')</span>';
    			}else{
    				stockHtml+='<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjI2cHgiIGhlaWdodD0iMjZweCIgdmlld0JveD0iMCAwIDI2IDI2IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTEyLjUsMyBMNCwxNSBMMTAuMjgwMjg1NywxNSBMMTAuMjgwMjg1NywyMi41IEwxNC43MTk3MTQzLDIyLjUgTDE0LjcxOTcxNDMsMTUgTDIxLDE1IEwxMi41LDMgTDEyLjUsMyBaIiBmaWxsPSIjM0Q5NDAwIj48L3BhdGg+Cjwvc3ZnPg==" alt="PriceUp" class="Up" style="">';
    				stockHtml+='<span class="StockChange" style="color:green">'+Math.round(response.Change*100)/100+'</span>';
    				stockHtml+='<span class="StockPercentChange" style="color:green">('+Math.round(response.ChangePercent*100)/100+')</span>';
    			}			
    			stockHtml+='</div>';
    			$(".alternate").append('<tr><td>' + response.Name + '</td><td>' +stockHtml+ '</td></tr>');
            },
            error: function (data) {
            }
        });
    }
    </script>

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Tuesday, October 8, 2019 1:40 AM
    Moderator
  • Thanks Dennis, its working now. But I noticed a few limitation.

    1. Not working in Crome, getting error in the JS file at the line: $(document).ready(function () {

                  Error: Uncaught ReferenceError: $ is not defined in sharepoint

    Can you please help me how to fix this in Crome and make it work.

    2. Working as expected in IE Browser, but getting popup for displaying data:

    Only secure content is displayed (Show all content) message is showing after allowing that only data is displaying.

     As HarshalGite mentioned, is this something related to "http & https"?. How to fix this EndPoint URL with Https.

    Can you please suggest this would be a great helpful.


    Ganesh

    Tuesday, October 8, 2019 3:54 AM
  • Hi Ganesh,

    Try to use the code below.

    <p id="ptitle">
    <table class="alternate"><tr><th>Name</th><th>Value</th></tr></table>
    </p>
    <style>
    .StockName{font-size:1.5em;}
    .StockLastPrice{font-size:1.2em;}
    .alternate{
    	font-family: arial, sans-serif;
    	border-collapse: collapse;
    	width: 100%;
    }
    .alternate td, .alternate th {
    	border: 1px solid #dddddd;
    	text-align: left;
    	padding: 8px;
    }
    .alternate tr:nth-child(2n) {
    	background-color: silver;
    }
    .alternate tr {
    	background-color: white;
    }
    .alternate tr:nth-child(2n):hover, .alternate tr:hover {
    	background-color: grey;
    }
    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    jq = jQuery.noConflict(true);
    jq(document).ready(function () {
    	var listTitle="StocksList";
    	getListItems(listTitle);
    });
    function getListItems(listTitle){
    	var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('"+listTitle+"')/items";
        jq.ajax({
            url: requestUri,
            method: "GET",
            headers: { "Accept": "application/json; odata=verbose" },
            success: function (data) {
                jq.each(data.d.results,function(i,item){
    				getStockPrice(item.Title);
                });
            },
            error: function (data) {
            }
        });
    }
    
    function getStockPrice(symbol) {
    	var EndPoint = "http://dev.markitondemand.com/MODApis/Api/v2/Quote/jsonp";
    	jq.ajax({
    		url: EndPoint,
    		method: "GET",
    		jsonp: "callback",
    		dataType: 'jsonp',
    		data: {
    			"symbol":symbol
    		},
    		success: function (response) {
    			var stockHtml="";
    			stockHtml+='<div class="StockContainer">';
    			stockHtml+='<span class="StockLastPrice">'+response.LastPrice+'<sub>USD</sub></span>';						
    			if(response.Change<0){
    				stockHtml+='<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjI2cHgiIGhlaWdodD0iMjZweCIgdmlld0JveD0iMCAwIDI2IDI2IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTEyLjUsMyBMNCwxNSBMMTAuMjgwMjg1NywxNSBMMTAuMjgwMjg1NywyMi41IEwxNC43MTk3MTQzLDIyLjUgTDE0LjcxOTcxNDMsMTUgTDIxLDE1IEwxMi41LDMgTDEyLjUsMyBaIiBmaWxsPSIjREQ0QjM5Ij48L3BhdGg+Cjwvc3ZnPg==" alt="PriceDown" class="Down" style="transform:rotate(180deg);">';
    				stockHtml+='<span class="StockChange" style="color:red">'+Math.round(response.Change*100)/100+'</span>';
    				stockHtml+='<span class="StockPercentChange" style="color:red">('+Math.round(response.ChangePercent*100)/100+')</span>';
    			}else{
    				stockHtml+='<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjI2cHgiIGhlaWdodD0iMjZweCIgdmlld0JveD0iMCAwIDI2IDI2IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTEyLjUsMyBMNCwxNSBMMTAuMjgwMjg1NywxNSBMMTAuMjgwMjg1NywyMi41IEwxNC43MTk3MTQzLDIyLjUgTDE0LjcxOTcxNDMsMTUgTDIxLDE1IEwxMi41LDMgTDEyLjUsMyBaIiBmaWxsPSIjM0Q5NDAwIj48L3BhdGg+Cjwvc3ZnPg==" alt="PriceUp" class="Up" style="">';
    				stockHtml+='<span class="StockChange" style="color:green">'+Math.round(response.Change*100)/100+'</span>';
    				stockHtml+='<span class="StockPercentChange" style="color:green">('+Math.round(response.ChangePercent*100)/100+')</span>';
    			}			
    			stockHtml+='</div>';
    			jq(".alternate").append('<tr><td>' + response.Name + '</td><td>' +stockHtml+ '</td></tr>');
    		},
    		error: function (data) {
    		}
    	});
    }
    </script>

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    • Marked as answer by Ganesh Naga Wednesday, October 9, 2019 9:36 AM
    Tuesday, October 8, 2019 6:57 AM
    Moderator
  • Hi Dennis,

    Thanks again, this was working now.

    Can we use this endpoint URL: "

    http://dev.markitondemand.com/MODApis/Api/v2/Quote/jsonp

    " in the real time projects for getting the data. Is it secure? can you please guide us on that?  

    I am getting the popup message in Crome, after allowing here then only data loading. How to over come this? 

    • Edited by Ganesh Naga Wednesday, October 9, 2019 11:14 AM added Image
    Wednesday, October 9, 2019 9:40 AM
  • Hi,

    I refer to the jQuery plugin here: https://www.jqueryscript.net/other/jQuery-Plugin-To-Display-Stock-Quotes-On-Your-Website-stockQuotes.html

    If  you worry about the security issue, please use the public finance API below to achieve it. Example, we can use Alpha Vantage API or Financial Modeling Prep API.

    https://github.com/public-apis/public-apis#finance

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Thursday, October 10, 2019 2:13 AM
    Moderator
  • Thanks Dennis for the information. I have gone through these both  Alpha Vantage API or Financial Modeling Prep API. I notices many end point urls are available. When URL I need to choose for our purpose related to Stock. 

    I took one URL: https://financialmodelingprep.com/api/v3/stock/real-time-price/MSFT, I got only two parameters. Can you suggest how do we change our logic similarly with value and Price difference with the above URL or similar any other Public APIs . 

    { "symbol" : "MSFT", "price" : 138.22 }



    Ganesh

    Thursday, October 10, 2019 5:15 AM
  • Hi Ganesh,

    We can use this:

    https://financialmodelingprep.com/api/v3/company/profile/MSFT

    The following code for your reference.

    <p id="ptitle">
    <table class="alternate"><tr><th>Name</th><th>Value</th></tr></table>
    </p>
    <style>
    .StockName{font-size:1.5em;}
    .StockLastPrice{font-size:1.2em;}
    .alternate{
    	font-family: arial, sans-serif;
    	border-collapse: collapse;
    	width: 100%;
    }
    .alternate td, .alternate th {
    	border: 1px solid #dddddd;
    	text-align: left;
    	padding: 8px;
    }
    .alternate tr:nth-child(2n) {
    	background-color: silver;
    }
    .alternate tr {
    	background-color: white;
    }
    .alternate tr:nth-child(2n):hover, .alternate tr:hover {
    	background-color: grey;
    }
    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    jq = jQuery.noConflict(true);
    jq(document).ready(function () {
    	var listTitle="StocksList";
    	getListItems(listTitle);
    });
    function getListItems(listTitle){
    	var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('"+listTitle+"')/items";
    	jq.ajax({
    		url: requestUri,
    		method: "GET",
    		headers: { "Accept": "application/json; odata=verbose" },
    		success: function (data) {
    			jq.each(data.d.results,function(i,item){
    				getStockPrice(item.Title);
    			});
    		},
    		error: function (data) {
    		}
    	});
    }
    
    function getStockPrice(symbol) {
    	var EndPoint = "https://financialmodelingprep.com/api/v3/company/profile/"+symbol;
    	jq.ajax({
    		url: EndPoint,
    		method: "GET",
    		dataType: 'json',
    		success: function (response) {
    			var stockInfo=response.profile;
    			var stockHtml="";
    			stockHtml+='<div class="StockContainer">';
    			stockHtml+='<span class="StockLastPrice">'+stockInfo.price+'<sub>USD</sub></span>';						
    			if(stockInfo.changes<0){
    				stockHtml+='<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjI2cHgiIGhlaWdodD0iMjZweCIgdmlld0JveD0iMCAwIDI2IDI2IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTEyLjUsMyBMNCwxNSBMMTAuMjgwMjg1NywxNSBMMTAuMjgwMjg1NywyMi41IEwxNC43MTk3MTQzLDIyLjUgTDE0LjcxOTcxNDMsMTUgTDIxLDE1IEwxMi41LDMgTDEyLjUsMyBaIiBmaWxsPSIjREQ0QjM5Ij48L3BhdGg+Cjwvc3ZnPg==" alt="PriceDown" class="Down" style="transform:rotate(180deg);">';
    				stockHtml+='<span class="StockChange" style="color:red">'+stockInfo.changes+'</span>';
    				stockHtml+='<span class="StockPercentChange" style="color:red">'+stockInfo.changesPercentage+'</span>';
    			}else{
    				stockHtml+='<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjI2cHgiIGhlaWdodD0iMjZweCIgdmlld0JveD0iMCAwIDI2IDI2IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTEyLjUsMyBMNCwxNSBMMTAuMjgwMjg1NywxNSBMMTAuMjgwMjg1NywyMi41IEwxNC43MTk3MTQzLDIyLjUgTDE0LjcxOTcxNDMsMTUgTDIxLDE1IEwxMi41LDMgTDEyLjUsMyBaIiBmaWxsPSIjM0Q5NDAwIj48L3BhdGg+Cjwvc3ZnPg==" alt="PriceUp" class="Up" style="">';
    				stockHtml+='<span class="StockChange" style="color:green">'+stockInfo.changes+'</span>';
    				stockHtml+='<span class="StockPercentChange" style="color:green">'+stockInfo.changesPercentage+'</span>';
    			}			
    			stockHtml+='</div>';
    			jq(".alternate").append('<tr><td>' + stockInfo.companyName + '('+symbol+')</td><td>' +stockHtml+ '</td></tr>');
    		},
    		error: function (data) {
    		}
    	});
    }
    </script>

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    • Marked as answer by Ganesh Naga Thursday, October 10, 2019 12:57 PM
    Thursday, October 10, 2019 8:17 AM
    Moderator
  • Thanks Dennis, this is working now as expected.

    Ganesh

    Thursday, October 10, 2019 12:57 PM