Trying to code working stock ticker

JavaScript
1

I am trying to code a working stock ticker and am having a heck of a time finding more information on how to use JSONP data. I have googled the heck out of this only to find that what I am doing continually doesn’t work. Here is what I am trying to accomplish:

I have a table set up that looks like thise:


<table id="stock-data">
  <tr>
    <td><span id="symbol"></span></td>
    <td><span id="last"></span></td>
  </tr>
  <tr>
    <td><span id="exchange"></span></td>
    <td><span id="change"></span></td>
  </tr>
</table>

I have been adding this external data as a script:


<script type="application/javascript" src="http://ir.stockpr.com/service/quote_jsonp?symbol=MSFT&jsonp=quote_search"></script>

Along with this script to handle the data:


<script>
		function quote_search(json) {
			var symbol = document.getElementById("symbol");
			var last = document.getElementById("last");
			var exchange = document.getElementById("exchange");
			var change = document.getElementById("change");
			symbol.innerHTML = json.symbol;
			last.innerHTML = json.last;
			exchange.innerHTML = json.exchange;
			change.innerHTML = json.change;
		}
</script>

Please be easy… I am a complete noob when it comes to using JSON/JSONP and am definitely no JavaScript guru either. Any help would be greatly appreciated.

2

The returned JSON is

quote_search(
	{"symbol":"MSFT",
	"exchange":"NASDAQ",
	"last":"36.62",
	"change_image":"http:\\/\\/a.eqcdn.com\\/stockpr\\/files\\/qb-change-up.gif",
	"volume":"11,256,950",
	"last_trade_time":"02\\/10\\/2014 12:18 PM EST",
	"high":"36.73",
	"low":"36.29",
	"year_high":"38.98",
	"year_low":"27.23",
	"day_high":"36.73",
	"day_low":"36.29",
	"change":"0.06",
	"market_cap":"304.0B"}
);

Your code is trying to get properties of the “json” object but it is named “quote_search”

*you didn’t show how you are passing the return to the function

3

Are you suggesting I switch out function quote_search(json) for function quote_search(quote_search)?

4

IMHO having a function with the same name as the object is not good.
Assuming the quote_search object exists when you try to get its properties, something like this should work

<script>
		function show_quote(quote_search) {
			var symbol = document.getElementById("symbol");
			var last = document.getElementById("last");
			var exchange = document.getElementById("exchange");
			var change = document.getElementById("change");
			symbol.innerHTML = quote_search.symbol;
			last.innerHTML = quote_search.last;
			exchange.innerHTML = quote_search.exchange;
			change.innerHTML = quote_search.change;
		}
</script>
5

I used exactly that, but it still will not show up in the table. I must be missing something.

6

Sorry, I took a closer look and noticed it isn’t returning an object, but a function call.
So you were closer to the solution than I was and I was misleading you :blush:

After some trial and error, this works for me (some name changes to avoid confusion and possible conflict)

<html>
<head>
<script type="text/javascript">
		function quote_search(json) {
			var dom_symbol = document.getElementById("symbol_span");
			var dom_last = document.getElementById("last_span");
			var dom_exchange = document.getElementById("exchange_span");
			var dom_change = document.getElementById("change_span");
			dom_symbol.innerHTML = json.symbol;
			dom_last.innerHTML = json.last;
			dom_exchange.innerHTML = json.exchange;
			dom_change.innerHTML = json.change;
		}
</script>
</head>
<body>
<table id="stock-data">
  <tr>
    <td><span id="symbol_span"></span></td>
    <td><span id="last_span"></span></td>
  </tr>
  <tr>
    <td><span id="exchange_span"></span></td>
    <td><span id="change_span"></span></td>
  </tr>
</table>
<script type="text/javascript" src="http://ir.stockpr.com/service/quote_jsonp?symbol=MSFT&jsonp=quote_search"></script>
</body>
</html>
7

That did the trick. I truly appreciate the help on this.