admin管理员组

文章数量:1023066

I am new to Ajax and JSON. I am facing issues with the parsing of Json data from the Alpha Vantage API. My project is to create a stock widget using the jive platform in a html5 widget and I have existing code using the yahoo finance api. The yahoo api url is no longer working and I found another api that is working and giving me json data. I have tried to work with the existing code but the trouble I am stumbling on is how to parse the code from json data to the html.

Also console is giving me the following error for the first line of the json data so I added a callback to the url thinking it would fix it Uncaught SyntaxError: Unexpected token :

<script src="//ajax.googleapis/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
// This version has been tested to work in Jive 4.0.15 and 5.0. It should work in Jive 4.5 but has not been tested
// Add the stock symbol here
  // var yourStockSymbol = 'LIFE';
</script>

<div id="stock_miniQuote_head" class="ajaxtrigger"><span id="stockSymbol"></span>&nbsp;(mon stock)</div>

<div id="stock_miniQuote">
<div id="stockIndicator"><p>Retrieving stock information...</p></div>


    <div class="stock_divider">

      <div id="stock_left">
        <span class="stock_label">Price</span><br/>
        <strong class="stock_strong">$<span id="stockAsk"></span></strong><br/>
      </div>


      <div id="stock_right">
        <span class="stock_label">Change</span><br/>
        <strong class="stock_strong"><span id="stockChange"></span></strong><br />
        <strong class="stock_strong"><span id="stockChangePercent"></span></strong><br />
      </div>
      <div style="clear: both;"></div>


    </div>

      <div id="stock_body">

      <div id="stock_body_content">
        <span class="stock_label">Volume</span><br/>
        <strong class="stock_strong"><span id="stockVolume"></span></strong>
        <br /><br />
        <span class="stock_label">Average Daily Volume</span><br/>
        <strong class="stock_strong"><span id="stockAvgVolume"></span></strong>
        <br /><br />
        <span class="stock_label">52 Week Range</span><br/>
        <strong class="stock_strong"><span id="stockRange"></span></strong>

      </div>

      <div style="clear: both;"></div>

    </div>



</div>



<style>

#stockIndicator {
  text-align:left;
  padding: 10px;
  margin: 5px;
  color: red;
}

.ajaxtrigger:hover {
  cursor: pointer;
  cursor: hand;
}

#stock_miniQuote_head {
  background-color:#464A55;
  color:#FFFFFF;
  font-size:14px;
  font-weight:bold;
  padding-bottom:10px;
  padding-left:10px;
  padding-right:10px;
  padding-top:10px;
}

#stock_miniQuote {
  border-bottom-color:#DDDDDD;
  border-bottom-left-radius:5px 5px;
  border-bottom-right-radius:5px 5px;
  border-bottom-style:solid;
  border-bottom-width:1px;
  border-left-color:#DDDDDD;
  border-left-style:solid;
  border-left-width:1px;
  border-right-color:#DDDDDD;
  border-right-style:solid;
  border-right-width:1px;
  border-top-color:initial;
  border-top-style:none;
  border-top-width:initial;
  list-style-type:none;
  margin-bottom:10px;
  padding-bottom:0;
  padding-top:10px;
  vertical-align:text-top;
  height: 100%;
  width: 99%;
}

.stock_divider {
  border-bottom:1px solid #B2B0AD; padding-bottom:5px;
}

#stock_left {
  float:left; width:35%; height:50px; border-right:1px solid #B2B0AD; padding:0 15px;
}

#stock_right {
  float:right; width:*; padding:0 20px; vertical-align:text-top;
}

.stock_label {
  font-size:14px;
}

.stock_strong {
  font-size:17px;
}

#stock_body {
  padding:10px 0 15px;
}

#stock_body_content {
  float:left; width:170px; padding:0 15px;
}

</style>


<script type="text/javascript">

if ($('#jive-widgets-browser').css('display') == 'block') {
// Do Nothing as we are in edit mode

} else {
// Build the URL to Alpha Vantage
// var q = escape('select * from yahoo.finance.quotes where symbol in ("' + yourStockSymbol + '")');
var theURL = ";symbol=0787.HK&interval=1min&apikey=AOIAMG3WFZ8LS58W&callback=?";


$(document).ready(function(){
// Load function on launch
  $("#stockIndicator").show();
  doAjax(theURL);

// Function for refreshing the stock by clicking on the title header
$('.ajaxtrigger').click(function(){
  $("#stockIndicator").show();
  doAjax(theURL);
    return false;
  });

// Function to add mas to numbers for volume
  function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");
  }

// Main function to make JSON request to Alpha Vantage for stock information
  function doAjax(url){
  $.ajax({
    url: url,
    dataType: 'jsonp',
    contentType: "application/json",
    success: function(data){
      var s = data.query.results;
          if(s){
      if(s.quote.Change > 0) {
        // Change the change text to green
        $('#stockChange').css({'color': 'green'});
        $('#stockChangePercent').css({'color': 'green'});
      } else {
        // Change the change text to red
        $('#stockChange').css({'color': 'red'});
        $('#stockChangePercent').css({'color': 'red'});
      }

      console.log('s is' + s);

      // This is where we add the JSON values back into the HTML above
      $('#stockSymbol').html(s.quote.symbol);
      $('#stockAsk').html(s.quote.LastTradePriceOnly);
      $('#stockChange').html(s.quote.Change);
      $('#stockChangePercent').html(s.quote.ChangeinPercent);
      $('#stockVolume').html(numberWithCommas(s.quote.Volume));
      $('#stockAvgVolume').html(numberWithCommas(s.quote.AverageDailyVolume));
      $('#stockRange').html(s.quote.YearRange);

      $("#stockIndicator").hide();

          } else {
            var errormsg = '<p>Error: could not load the page.</p>';
      $("#stockIndicator").show();
            $("#stockIndicator").html(errormsg);
          }
        }
      });

  }


  }); //end ready function

} //end first else





</script>

I am new to Ajax and JSON. I am facing issues with the parsing of Json data from the Alpha Vantage API. My project is to create a stock widget using the jive platform in a html5 widget and I have existing code using the yahoo finance api. The yahoo api url is no longer working and I found another api that is working and giving me json data. I have tried to work with the existing code but the trouble I am stumbling on is how to parse the code from json data to the html.

Also console is giving me the following error for the first line of the json data so I added a callback to the url thinking it would fix it Uncaught SyntaxError: Unexpected token :

<script src="//ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
// This version has been tested to work in Jive 4.0.15 and 5.0. It should work in Jive 4.5 but has not been tested
// Add the stock symbol here
  // var yourStockSymbol = 'LIFE';
</script>

<div id="stock_miniQuote_head" class="ajaxtrigger"><span id="stockSymbol"></span>&nbsp;(mon stock)</div>

<div id="stock_miniQuote">
<div id="stockIndicator"><p>Retrieving stock information...</p></div>


    <div class="stock_divider">

      <div id="stock_left">
        <span class="stock_label">Price</span><br/>
        <strong class="stock_strong">$<span id="stockAsk"></span></strong><br/>
      </div>


      <div id="stock_right">
        <span class="stock_label">Change</span><br/>
        <strong class="stock_strong"><span id="stockChange"></span></strong><br />
        <strong class="stock_strong"><span id="stockChangePercent"></span></strong><br />
      </div>
      <div style="clear: both;"></div>


    </div>

      <div id="stock_body">

      <div id="stock_body_content">
        <span class="stock_label">Volume</span><br/>
        <strong class="stock_strong"><span id="stockVolume"></span></strong>
        <br /><br />
        <span class="stock_label">Average Daily Volume</span><br/>
        <strong class="stock_strong"><span id="stockAvgVolume"></span></strong>
        <br /><br />
        <span class="stock_label">52 Week Range</span><br/>
        <strong class="stock_strong"><span id="stockRange"></span></strong>

      </div>

      <div style="clear: both;"></div>

    </div>



</div>



<style>

#stockIndicator {
  text-align:left;
  padding: 10px;
  margin: 5px;
  color: red;
}

.ajaxtrigger:hover {
  cursor: pointer;
  cursor: hand;
}

#stock_miniQuote_head {
  background-color:#464A55;
  color:#FFFFFF;
  font-size:14px;
  font-weight:bold;
  padding-bottom:10px;
  padding-left:10px;
  padding-right:10px;
  padding-top:10px;
}

#stock_miniQuote {
  border-bottom-color:#DDDDDD;
  border-bottom-left-radius:5px 5px;
  border-bottom-right-radius:5px 5px;
  border-bottom-style:solid;
  border-bottom-width:1px;
  border-left-color:#DDDDDD;
  border-left-style:solid;
  border-left-width:1px;
  border-right-color:#DDDDDD;
  border-right-style:solid;
  border-right-width:1px;
  border-top-color:initial;
  border-top-style:none;
  border-top-width:initial;
  list-style-type:none;
  margin-bottom:10px;
  padding-bottom:0;
  padding-top:10px;
  vertical-align:text-top;
  height: 100%;
  width: 99%;
}

.stock_divider {
  border-bottom:1px solid #B2B0AD; padding-bottom:5px;
}

#stock_left {
  float:left; width:35%; height:50px; border-right:1px solid #B2B0AD; padding:0 15px;
}

#stock_right {
  float:right; width:*; padding:0 20px; vertical-align:text-top;
}

.stock_label {
  font-size:14px;
}

.stock_strong {
  font-size:17px;
}

#stock_body {
  padding:10px 0 15px;
}

#stock_body_content {
  float:left; width:170px; padding:0 15px;
}

</style>


<script type="text/javascript">

if ($('#jive-widgets-browser').css('display') == 'block') {
// Do Nothing as we are in edit mode

} else {
// Build the URL to Alpha Vantage
// var q = escape('select * from yahoo.finance.quotes where symbol in ("' + yourStockSymbol + '")');
var theURL = "https://www.alphavantage.co/query?function=TIME_SERIES_DAILY&symbol=0787.HK&interval=1min&apikey=AOIAMG3WFZ8LS58W&callback=?";


$(document).ready(function(){
// Load function on launch
  $("#stockIndicator").show();
  doAjax(theURL);

// Function for refreshing the stock by clicking on the title header
$('.ajaxtrigger').click(function(){
  $("#stockIndicator").show();
  doAjax(theURL);
    return false;
  });

// Function to add mas to numbers for volume
  function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");
  }

// Main function to make JSON request to Alpha Vantage for stock information
  function doAjax(url){
  $.ajax({
    url: url,
    dataType: 'jsonp',
    contentType: "application/json",
    success: function(data){
      var s = data.query.results;
          if(s){
      if(s.quote.Change > 0) {
        // Change the change text to green
        $('#stockChange').css({'color': 'green'});
        $('#stockChangePercent').css({'color': 'green'});
      } else {
        // Change the change text to red
        $('#stockChange').css({'color': 'red'});
        $('#stockChangePercent').css({'color': 'red'});
      }

      console.log('s is' + s);

      // This is where we add the JSON values back into the HTML above
      $('#stockSymbol').html(s.quote.symbol);
      $('#stockAsk').html(s.quote.LastTradePriceOnly);
      $('#stockChange').html(s.quote.Change);
      $('#stockChangePercent').html(s.quote.ChangeinPercent);
      $('#stockVolume').html(numberWithCommas(s.quote.Volume));
      $('#stockAvgVolume').html(numberWithCommas(s.quote.AverageDailyVolume));
      $('#stockRange').html(s.quote.YearRange);

      $("#stockIndicator").hide();

          } else {
            var errormsg = '<p>Error: could not load the page.</p>';
      $("#stockIndicator").show();
            $("#stockIndicator").html(errormsg);
          }
        }
      });

  }


  }); //end ready function

} //end first else





</script>

This is the json info

{
    "Meta Data": {
        "1. Information": "Daily Prices (open, high, low, close) and Volumes",
        "2. Symbol": "0787.HK",
        "3. Last Refreshed": "2017-12-07",
        "4. Output Size": "Compact",
        "5. Time Zone": "US/Eastern"
    },
    "Time Series (Daily)": {
        "2017-12-07": {
            "1. open": "0.6700",
            "2. high": "0.6800",
            "3. low": "0.6600",
            "4. close": "0.6600",
            "5. volume": "20488001"
        }
        // More rows
    }
}

What am i doing wrong and how do I do this correctly?

  • javascript
  • jquery
  • json
  • ajax
  • alpha-vantage
Share Improve this question edited Sep 7, 2018 at 2:52 jww 103k103 gold badges445 silver badges946 bronze badges asked Dec 7, 2017 at 21:18 user3730179user3730179 1214 silver badges14 bronze badges 8
  • Did you mean to make the dataType 'jsonp' instead of 'json' which would match the response format? – Taplar Commented Dec 7, 2017 at 21:24
  • I think the ma at the end of the third last bracket is causing problems. – Chris Happy Commented Dec 7, 2017 at 21:40
  • @ChrisHappy that is the json output from the api, i shortened it to save space. – user3730179 Commented Dec 7, 2017 at 21:45
  • @Taplar I have revised it but it doesnt seem to make a difference. – user3730179 Commented Dec 7, 2017 at 21:45
  • Did you ever parse the JSON? I don't see JSON.parse(...) anywhere. – Chris Happy Commented Dec 7, 2017 at 21:48
 |  Show 3 more ments

2 Answers 2

Reset to default 2

Remove &callback=? from

var theURL = "https://www.alphavantage.co/query?function=TIME_SERIES_DAILY&symbol=0787.HK&interval=1min&apikey=AOIAMG3WFZ8LS58W&callback=?";

and change dataType :"jsonp" to dataType :"json".

var url = 'https://www.alphavantage.co/query?function=TIME_SERIES_DAILY&symbol=0787.HK&interval=1min&apikey=AOIAMG3WFZ8LS58W';

jQuery.ajax({
    url: url,
    dataType: 'json',
    contentType: "application/json",
    success: function(data){
      console.log(data);
    }
});
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

I think your script was coded to retrieve data from yahoo finance.

I tried my best to rewrite part of the code in order to use ALPHAVANTAGE. I'd appreciate some feedback on it please.

var theURL = "https://www.alphavantage.co/query?function=TIME_SERIES_INTRADAY&symbol=MSFT&interval=1min&apikey=demo";

$(document).ready(function() {
  $("#stockIndicator").show();
  doAjax(theURL);

  $('.ajaxtrigger').click(function() {
    $("#stockIndicator").show();
    doAjax(theURL);
    return false;
  });

  function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");
  }

  function doAjax(url) {
    $.ajax({
      url: url,
      dataType: 'json',
      contentType: "application/json",
      success: function(data) {

        var symbol = data['Meta Data']['2. Symbol']
        var lastRefreshed = data['Meta Data']['3. Last Refreshed']
        var lastTradePriceOnly = data['Time Series (1min)'][lastRefreshed]['4. close']
        var lastVolume = data['Time Series (1min)'][lastRefreshed]['5. volume']

        $('#stockSymbol').html(symbol);
        $('#stockAsk').html(lastTradePriceOnly);
        $('#stockVolume').html(numberWithCommas(lastVolume));
        $("#stockIndicator").hide();
      }
    });
  }
});
#stockIndicator {
  text-align: left;
  padding: 10px;
  margin: 5px;
  color: red;
}

.ajaxtrigger:hover {
  cursor: pointer;
  cursor: hand;
}

#stock_miniQuote_head {
  background-color: #464A55;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: bold;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
}

#stock_miniQuote {
  border-bottom-color: #DDDDDD;
  border-bottom-left-radius: 5px 5px;
  border-bottom-right-radius: 5px 5px;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-left-color: #DDDDDD;
  border-left-style: solid;
  border-left-width: 1px;
  border-right-color: #DDDDDD;
  border-right-style: solid;
  border-right-width: 1px;
  border-top-color: initial;
  border-top-style: none;
  border-top-width: initial;
  list-style-type: none;
  margin-bottom: 10px;
  padding-bottom: 0;
  padding-top: 10px;
  vertical-align: text-top;
  height: 100%;
  width: 99%;
}

.stock_divider {
  border-bottom: 1px solid #B2B0AD;
  padding-bottom: 5px;
}

#stock_left {
  float: left;
  width: 35%;
  height: 50px;
  border-right: 1px solid #B2B0AD;
  padding: 0 15px;
}

#stock_right {
  float: right;
  width: *;
  padding: 0 20px;
  vertical-align: text-top;
}

.stock_label {
  font-size: 14px;
}

.stock_strong {
  font-size: 17px;
}

#stock_body {
  padding: 10px 0 15px;
}

#stock_body_content {
  float: left;
  width: 170px;
  padding: 0 15px;
}
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="stock_miniQuote_head" class="ajaxtrigger"><span id="stockSymbol"></span>&nbsp;(mon stock)</div>

<div id="stock_miniQuote">
  <div id="stockIndicator">
    <p>Retrieving stock information...</p>
  </div>


  <div class="stock_divider">

    <div id="stock_left">
      <span class="stock_label">Price</span><br/>
      <strong class="stock_strong">$<span id="stockAsk"></span></strong><br/>
    </div>


    <div id="stock_right">
      <span class="stock_label">Change</span><br/>
      <strong class="stock_strong"><span id="stockChange"></span></strong><br />
      <strong class="stock_strong"><span id="stockChangePercent"></span></strong><br />
    </div>
    <div style="clear: both;"></div>


  </div>

  <div id="stock_body">

    <div id="stock_body_content">
      <span class="stock_label">Volume</span><br/>
      <strong class="stock_strong"><span id="stockVolume"></span></strong>
      <br /><br />
      <span class="stock_label">Average Daily Volume</span><br/>
      <strong class="stock_strong"><span id="stockAvgVolume"></span></strong>
      <br /><br />
      <span class="stock_label">52 Week Range</span><br/>
      <strong class="stock_strong"><span id="stockRange"></span></strong>

    </div>

    <div style="clear: both;"></div>

  </div>



</div>

I am new to Ajax and JSON. I am facing issues with the parsing of Json data from the Alpha Vantage API. My project is to create a stock widget using the jive platform in a html5 widget and I have existing code using the yahoo finance api. The yahoo api url is no longer working and I found another api that is working and giving me json data. I have tried to work with the existing code but the trouble I am stumbling on is how to parse the code from json data to the html.

Also console is giving me the following error for the first line of the json data so I added a callback to the url thinking it would fix it Uncaught SyntaxError: Unexpected token :

<script src="//ajax.googleapis/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
// This version has been tested to work in Jive 4.0.15 and 5.0. It should work in Jive 4.5 but has not been tested
// Add the stock symbol here
  // var yourStockSymbol = 'LIFE';
</script>

<div id="stock_miniQuote_head" class="ajaxtrigger"><span id="stockSymbol"></span>&nbsp;(mon stock)</div>

<div id="stock_miniQuote">
<div id="stockIndicator"><p>Retrieving stock information...</p></div>


    <div class="stock_divider">

      <div id="stock_left">
        <span class="stock_label">Price</span><br/>
        <strong class="stock_strong">$<span id="stockAsk"></span></strong><br/>
      </div>


      <div id="stock_right">
        <span class="stock_label">Change</span><br/>
        <strong class="stock_strong"><span id="stockChange"></span></strong><br />
        <strong class="stock_strong"><span id="stockChangePercent"></span></strong><br />
      </div>
      <div style="clear: both;"></div>


    </div>

      <div id="stock_body">

      <div id="stock_body_content">
        <span class="stock_label">Volume</span><br/>
        <strong class="stock_strong"><span id="stockVolume"></span></strong>
        <br /><br />
        <span class="stock_label">Average Daily Volume</span><br/>
        <strong class="stock_strong"><span id="stockAvgVolume"></span></strong>
        <br /><br />
        <span class="stock_label">52 Week Range</span><br/>
        <strong class="stock_strong"><span id="stockRange"></span></strong>

      </div>

      <div style="clear: both;"></div>

    </div>



</div>



<style>

#stockIndicator {
  text-align:left;
  padding: 10px;
  margin: 5px;
  color: red;
}

.ajaxtrigger:hover {
  cursor: pointer;
  cursor: hand;
}

#stock_miniQuote_head {
  background-color:#464A55;
  color:#FFFFFF;
  font-size:14px;
  font-weight:bold;
  padding-bottom:10px;
  padding-left:10px;
  padding-right:10px;
  padding-top:10px;
}

#stock_miniQuote {
  border-bottom-color:#DDDDDD;
  border-bottom-left-radius:5px 5px;
  border-bottom-right-radius:5px 5px;
  border-bottom-style:solid;
  border-bottom-width:1px;
  border-left-color:#DDDDDD;
  border-left-style:solid;
  border-left-width:1px;
  border-right-color:#DDDDDD;
  border-right-style:solid;
  border-right-width:1px;
  border-top-color:initial;
  border-top-style:none;
  border-top-width:initial;
  list-style-type:none;
  margin-bottom:10px;
  padding-bottom:0;
  padding-top:10px;
  vertical-align:text-top;
  height: 100%;
  width: 99%;
}

.stock_divider {
  border-bottom:1px solid #B2B0AD; padding-bottom:5px;
}

#stock_left {
  float:left; width:35%; height:50px; border-right:1px solid #B2B0AD; padding:0 15px;
}

#stock_right {
  float:right; width:*; padding:0 20px; vertical-align:text-top;
}

.stock_label {
  font-size:14px;
}

.stock_strong {
  font-size:17px;
}

#stock_body {
  padding:10px 0 15px;
}

#stock_body_content {
  float:left; width:170px; padding:0 15px;
}

</style>


<script type="text/javascript">

if ($('#jive-widgets-browser').css('display') == 'block') {
// Do Nothing as we are in edit mode

} else {
// Build the URL to Alpha Vantage
// var q = escape('select * from yahoo.finance.quotes where symbol in ("' + yourStockSymbol + '")');
var theURL = ";symbol=0787.HK&interval=1min&apikey=AOIAMG3WFZ8LS58W&callback=?";


$(document).ready(function(){
// Load function on launch
  $("#stockIndicator").show();
  doAjax(theURL);

// Function for refreshing the stock by clicking on the title header
$('.ajaxtrigger').click(function(){
  $("#stockIndicator").show();
  doAjax(theURL);
    return false;
  });

// Function to add mas to numbers for volume
  function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");
  }

// Main function to make JSON request to Alpha Vantage for stock information
  function doAjax(url){
  $.ajax({
    url: url,
    dataType: 'jsonp',
    contentType: "application/json",
    success: function(data){
      var s = data.query.results;
          if(s){
      if(s.quote.Change > 0) {
        // Change the change text to green
        $('#stockChange').css({'color': 'green'});
        $('#stockChangePercent').css({'color': 'green'});
      } else {
        // Change the change text to red
        $('#stockChange').css({'color': 'red'});
        $('#stockChangePercent').css({'color': 'red'});
      }

      console.log('s is' + s);

      // This is where we add the JSON values back into the HTML above
      $('#stockSymbol').html(s.quote.symbol);
      $('#stockAsk').html(s.quote.LastTradePriceOnly);
      $('#stockChange').html(s.quote.Change);
      $('#stockChangePercent').html(s.quote.ChangeinPercent);
      $('#stockVolume').html(numberWithCommas(s.quote.Volume));
      $('#stockAvgVolume').html(numberWithCommas(s.quote.AverageDailyVolume));
      $('#stockRange').html(s.quote.YearRange);

      $("#stockIndicator").hide();

          } else {
            var errormsg = '<p>Error: could not load the page.</p>';
      $("#stockIndicator").show();
            $("#stockIndicator").html(errormsg);
          }
        }
      });

  }


  }); //end ready function

} //end first else





</script>

I am new to Ajax and JSON. I am facing issues with the parsing of Json data from the Alpha Vantage API. My project is to create a stock widget using the jive platform in a html5 widget and I have existing code using the yahoo finance api. The yahoo api url is no longer working and I found another api that is working and giving me json data. I have tried to work with the existing code but the trouble I am stumbling on is how to parse the code from json data to the html.

Also console is giving me the following error for the first line of the json data so I added a callback to the url thinking it would fix it Uncaught SyntaxError: Unexpected token :

<script src="//ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
// This version has been tested to work in Jive 4.0.15 and 5.0. It should work in Jive 4.5 but has not been tested
// Add the stock symbol here
  // var yourStockSymbol = 'LIFE';
</script>

<div id="stock_miniQuote_head" class="ajaxtrigger"><span id="stockSymbol"></span>&nbsp;(mon stock)</div>

<div id="stock_miniQuote">
<div id="stockIndicator"><p>Retrieving stock information...</p></div>


    <div class="stock_divider">

      <div id="stock_left">
        <span class="stock_label">Price</span><br/>
        <strong class="stock_strong">$<span id="stockAsk"></span></strong><br/>
      </div>


      <div id="stock_right">
        <span class="stock_label">Change</span><br/>
        <strong class="stock_strong"><span id="stockChange"></span></strong><br />
        <strong class="stock_strong"><span id="stockChangePercent"></span></strong><br />
      </div>
      <div style="clear: both;"></div>


    </div>

      <div id="stock_body">

      <div id="stock_body_content">
        <span class="stock_label">Volume</span><br/>
        <strong class="stock_strong"><span id="stockVolume"></span></strong>
        <br /><br />
        <span class="stock_label">Average Daily Volume</span><br/>
        <strong class="stock_strong"><span id="stockAvgVolume"></span></strong>
        <br /><br />
        <span class="stock_label">52 Week Range</span><br/>
        <strong class="stock_strong"><span id="stockRange"></span></strong>

      </div>

      <div style="clear: both;"></div>

    </div>



</div>



<style>

#stockIndicator {
  text-align:left;
  padding: 10px;
  margin: 5px;
  color: red;
}

.ajaxtrigger:hover {
  cursor: pointer;
  cursor: hand;
}

#stock_miniQuote_head {
  background-color:#464A55;
  color:#FFFFFF;
  font-size:14px;
  font-weight:bold;
  padding-bottom:10px;
  padding-left:10px;
  padding-right:10px;
  padding-top:10px;
}

#stock_miniQuote {
  border-bottom-color:#DDDDDD;
  border-bottom-left-radius:5px 5px;
  border-bottom-right-radius:5px 5px;
  border-bottom-style:solid;
  border-bottom-width:1px;
  border-left-color:#DDDDDD;
  border-left-style:solid;
  border-left-width:1px;
  border-right-color:#DDDDDD;
  border-right-style:solid;
  border-right-width:1px;
  border-top-color:initial;
  border-top-style:none;
  border-top-width:initial;
  list-style-type:none;
  margin-bottom:10px;
  padding-bottom:0;
  padding-top:10px;
  vertical-align:text-top;
  height: 100%;
  width: 99%;
}

.stock_divider {
  border-bottom:1px solid #B2B0AD; padding-bottom:5px;
}

#stock_left {
  float:left; width:35%; height:50px; border-right:1px solid #B2B0AD; padding:0 15px;
}

#stock_right {
  float:right; width:*; padding:0 20px; vertical-align:text-top;
}

.stock_label {
  font-size:14px;
}

.stock_strong {
  font-size:17px;
}

#stock_body {
  padding:10px 0 15px;
}

#stock_body_content {
  float:left; width:170px; padding:0 15px;
}

</style>


<script type="text/javascript">

if ($('#jive-widgets-browser').css('display') == 'block') {
// Do Nothing as we are in edit mode

} else {
// Build the URL to Alpha Vantage
// var q = escape('select * from yahoo.finance.quotes where symbol in ("' + yourStockSymbol + '")');
var theURL = "https://www.alphavantage.co/query?function=TIME_SERIES_DAILY&symbol=0787.HK&interval=1min&apikey=AOIAMG3WFZ8LS58W&callback=?";


$(document).ready(function(){
// Load function on launch
  $("#stockIndicator").show();
  doAjax(theURL);

// Function for refreshing the stock by clicking on the title header
$('.ajaxtrigger').click(function(){
  $("#stockIndicator").show();
  doAjax(theURL);
    return false;
  });

// Function to add mas to numbers for volume
  function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");
  }

// Main function to make JSON request to Alpha Vantage for stock information
  function doAjax(url){
  $.ajax({
    url: url,
    dataType: 'jsonp',
    contentType: "application/json",
    success: function(data){
      var s = data.query.results;
          if(s){
      if(s.quote.Change > 0) {
        // Change the change text to green
        $('#stockChange').css({'color': 'green'});
        $('#stockChangePercent').css({'color': 'green'});
      } else {
        // Change the change text to red
        $('#stockChange').css({'color': 'red'});
        $('#stockChangePercent').css({'color': 'red'});
      }

      console.log('s is' + s);

      // This is where we add the JSON values back into the HTML above
      $('#stockSymbol').html(s.quote.symbol);
      $('#stockAsk').html(s.quote.LastTradePriceOnly);
      $('#stockChange').html(s.quote.Change);
      $('#stockChangePercent').html(s.quote.ChangeinPercent);
      $('#stockVolume').html(numberWithCommas(s.quote.Volume));
      $('#stockAvgVolume').html(numberWithCommas(s.quote.AverageDailyVolume));
      $('#stockRange').html(s.quote.YearRange);

      $("#stockIndicator").hide();

          } else {
            var errormsg = '<p>Error: could not load the page.</p>';
      $("#stockIndicator").show();
            $("#stockIndicator").html(errormsg);
          }
        }
      });

  }


  }); //end ready function

} //end first else





</script>

This is the json info

{
    "Meta Data": {
        "1. Information": "Daily Prices (open, high, low, close) and Volumes",
        "2. Symbol": "0787.HK",
        "3. Last Refreshed": "2017-12-07",
        "4. Output Size": "Compact",
        "5. Time Zone": "US/Eastern"
    },
    "Time Series (Daily)": {
        "2017-12-07": {
            "1. open": "0.6700",
            "2. high": "0.6800",
            "3. low": "0.6600",
            "4. close": "0.6600",
            "5. volume": "20488001"
        }
        // More rows
    }
}

What am i doing wrong and how do I do this correctly?

  • javascript
  • jquery
  • json
  • ajax
  • alpha-vantage
Share Improve this question edited Sep 7, 2018 at 2:52 jww 103k103 gold badges445 silver badges946 bronze badges asked Dec 7, 2017 at 21:18 user3730179user3730179 1214 silver badges14 bronze badges 8
  • Did you mean to make the dataType 'jsonp' instead of 'json' which would match the response format? – Taplar Commented Dec 7, 2017 at 21:24
  • I think the ma at the end of the third last bracket is causing problems. – Chris Happy Commented Dec 7, 2017 at 21:40
  • @ChrisHappy that is the json output from the api, i shortened it to save space. – user3730179 Commented Dec 7, 2017 at 21:45
  • @Taplar I have revised it but it doesnt seem to make a difference. – user3730179 Commented Dec 7, 2017 at 21:45
  • Did you ever parse the JSON? I don't see JSON.parse(...) anywhere. – Chris Happy Commented Dec 7, 2017 at 21:48
 |  Show 3 more ments

2 Answers 2

Reset to default 2

Remove &callback=? from

var theURL = "https://www.alphavantage.co/query?function=TIME_SERIES_DAILY&symbol=0787.HK&interval=1min&apikey=AOIAMG3WFZ8LS58W&callback=?";

and change dataType :"jsonp" to dataType :"json".

var url = 'https://www.alphavantage.co/query?function=TIME_SERIES_DAILY&symbol=0787.HK&interval=1min&apikey=AOIAMG3WFZ8LS58W';

jQuery.ajax({
    url: url,
    dataType: 'json',
    contentType: "application/json",
    success: function(data){
      console.log(data);
    }
});
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

I think your script was coded to retrieve data from yahoo finance.

I tried my best to rewrite part of the code in order to use ALPHAVANTAGE. I'd appreciate some feedback on it please.

var theURL = "https://www.alphavantage.co/query?function=TIME_SERIES_INTRADAY&symbol=MSFT&interval=1min&apikey=demo";

$(document).ready(function() {
  $("#stockIndicator").show();
  doAjax(theURL);

  $('.ajaxtrigger').click(function() {
    $("#stockIndicator").show();
    doAjax(theURL);
    return false;
  });

  function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");
  }

  function doAjax(url) {
    $.ajax({
      url: url,
      dataType: 'json',
      contentType: "application/json",
      success: function(data) {

        var symbol = data['Meta Data']['2. Symbol']
        var lastRefreshed = data['Meta Data']['3. Last Refreshed']
        var lastTradePriceOnly = data['Time Series (1min)'][lastRefreshed]['4. close']
        var lastVolume = data['Time Series (1min)'][lastRefreshed]['5. volume']

        $('#stockSymbol').html(symbol);
        $('#stockAsk').html(lastTradePriceOnly);
        $('#stockVolume').html(numberWithCommas(lastVolume));
        $("#stockIndicator").hide();
      }
    });
  }
});
#stockIndicator {
  text-align: left;
  padding: 10px;
  margin: 5px;
  color: red;
}

.ajaxtrigger:hover {
  cursor: pointer;
  cursor: hand;
}

#stock_miniQuote_head {
  background-color: #464A55;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: bold;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
}

#stock_miniQuote {
  border-bottom-color: #DDDDDD;
  border-bottom-left-radius: 5px 5px;
  border-bottom-right-radius: 5px 5px;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-left-color: #DDDDDD;
  border-left-style: solid;
  border-left-width: 1px;
  border-right-color: #DDDDDD;
  border-right-style: solid;
  border-right-width: 1px;
  border-top-color: initial;
  border-top-style: none;
  border-top-width: initial;
  list-style-type: none;
  margin-bottom: 10px;
  padding-bottom: 0;
  padding-top: 10px;
  vertical-align: text-top;
  height: 100%;
  width: 99%;
}

.stock_divider {
  border-bottom: 1px solid #B2B0AD;
  padding-bottom: 5px;
}

#stock_left {
  float: left;
  width: 35%;
  height: 50px;
  border-right: 1px solid #B2B0AD;
  padding: 0 15px;
}

#stock_right {
  float: right;
  width: *;
  padding: 0 20px;
  vertical-align: text-top;
}

.stock_label {
  font-size: 14px;
}

.stock_strong {
  font-size: 17px;
}

#stock_body {
  padding: 10px 0 15px;
}

#stock_body_content {
  float: left;
  width: 170px;
  padding: 0 15px;
}
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="stock_miniQuote_head" class="ajaxtrigger"><span id="stockSymbol"></span>&nbsp;(mon stock)</div>

<div id="stock_miniQuote">
  <div id="stockIndicator">
    <p>Retrieving stock information...</p>
  </div>


  <div class="stock_divider">

    <div id="stock_left">
      <span class="stock_label">Price</span><br/>
      <strong class="stock_strong">$<span id="stockAsk"></span></strong><br/>
    </div>


    <div id="stock_right">
      <span class="stock_label">Change</span><br/>
      <strong class="stock_strong"><span id="stockChange"></span></strong><br />
      <strong class="stock_strong"><span id="stockChangePercent"></span></strong><br />
    </div>
    <div style="clear: both;"></div>


  </div>

  <div id="stock_body">

    <div id="stock_body_content">
      <span class="stock_label">Volume</span><br/>
      <strong class="stock_strong"><span id="stockVolume"></span></strong>
      <br /><br />
      <span class="stock_label">Average Daily Volume</span><br/>
      <strong class="stock_strong"><span id="stockAvgVolume"></span></strong>
      <br /><br />
      <span class="stock_label">52 Week Range</span><br/>
      <strong class="stock_strong"><span id="stockRange"></span></strong>

    </div>

    <div style="clear: both;"></div>

  </div>



</div>

本文标签： javascriptparsing json data from alpha vantageStack Overflow

版权声明：本文标题：javascript - parsing json data from alpha vantage - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745523319a2154415.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。