javascript live stock ticker pulling wrong name

Question

I currently have a javascript stock ticker which pulls out live stock data. I really want the company name aswell as the stock acryonm but i am struggling to get this working.

One way which I have done this is by forcing the stock name in text. it seems to work well however the code keeps running over and over duplicating the results. although I'm new to javascript i believe this is related to the i++ and the 3 segments of code.

I have created a jsfiddle to try and understand this better and will hopefully make things clearer.

any help into how to remove the duplication would be greatly appreciated.

https://jsfiddle.net/7o3dgwgq/

var gstock = ["EPA:PIG","LON:AHT","NYSE:URI"];
$(document).ready(function () {
       for (var i = 0; i < gstock.length; i++) {
        $.getJSON("https://finance.google.com/finance/info?client=ig&q="+gstock[0]+"&callback=?", function (response) {
            var stockInfo1 = response[0];
            var stockString1 = '<div class="stockWrapper">HAULOTTE:';
            var stockName1 = stockInfo1.t;             
            stockString1 += '<span class="stockSymbol "> '  +  stockInfo1.t + ' </span>';
            stockString1 += '<span class="stockPrice "> '  +  stockInfo1.l  + '</span>';
            stockString1 += '<span class="stockChange "> '  +  stockInfo1.c + '</span>';
            stockString1 += '<span> at</span> <span class="stockTime">'  + stockInfo1.ltt + '</span>';
            stockString1 += '</div>';
            $('.haul').prepend(stockString1);

        });
    }
});

kind regards, Sam

You are always using the 0 index of gstock variable in the getJSON call. Change **gstock[0]** for **gstock[i]** and it will work. Have have fixed your Fiddle [https://jsfiddle.net/7o3dgwgq/1/](https://jsfiddle.net/7o3dgwgq/1/) — Jonathan Larouche, May 19 '15 at 22:25
HI, sorry this did not work. It was actually written as [i] initally and then i experimented by changing the int, however this did not seem to resolve the problem. — user3036451, May 19 '15 at 22:31
See my answer bellow, I've changed the for loop and removed duplications — Jonathan Larouche, May 19 '15 at 22:55

Jonathan Larouche · Answer 1 · 2015-05-19T22:57:01.630

Can you try this?.

The Approach:

Create 3 distinct <DIV> element and use the data tags to specify the stock quote to get and the title to display. E.g: <div class="stockinfo" data-symbol="EPA:PIG" data-title="HAULOTTE"></div>
All element share the same class stockinfo
We then use the selector on the stockinfo class and loop through all element.
For each element get your JSON from external resource and append the result.

var gstock = ["EPA:PIG","LON:AHT","NYSE:URI"];
$(document).ready(function () {
    $(".stockinfo").each(function(indx,itm){
        var divContainer =  $(itm);
        $.getJSON("https://finance.google.com/finance/info?client=ig&q="+divContainer.data('symbol')+"&callback=?", function (response) {
            var stockInfo1 = response[0];
            var stockString1 = '<div class="stockWrapper">' + divContainer.data('title') + ':';
            var stockName1 = stockInfo1.t;             
            stockString1 += '<span class="stockSymbol "> '  +  stockInfo1.t + ' </span>';
            stockString1 += '<span class="stockPrice "> '  +  stockInfo1.l  + '</span>';
            stockString1 += '<span class="stockChange "> '  +  stockInfo1.c + '</span>';
            stockString1 += '<span> at</span> <span class="stockTime">'  + stockInfo1.ltt + '</span>';
            stockString1 += '</div>';
            divContainer.append(stockString1);

        });
    
    });
});

.stockWrapper {
    display: block;
    padding-top: 5px;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
   font-weight: 300;
   border-bottom: 1px solid #E5DDD2;
}


.stockSymbol {
    font-weight: 600;
}

.stockPrice {
    font-weight: 600;
    color: red;
}

.stockChange {
    font-weight: 600;
    color: green;
}

.stockTime {
    font-weight: 600;
    color: grey;  
font-size: smaller; 
}

h2 {
    font-size: 1.5em;
}

p {
    margin-bottom: 0.5em;
}
.symbol { 
    float: left;
    margin-right: 3px;
}
.symbol .name { display: block }
    
.symbol.up { background: #70DB70 }
.symbol.up .change { color: green }
    
.symbol.down { background: #f7cdc2 }
.symbol.down .change { color: red }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="stockinfo" data-symbol="EPA:PIG" data-title="HAULOTTE"></div>
<div class="stockinfo" data-symbol="LON:AHT" data-title="ASHTEAD"></div>
<div class="stockinfo" data-symbol="NYSE:URI" data-title="UNITED RENTALS"></div>

This code-only answer could really use some explanation as to what was changed or fixed to make it work. — Cᴏʀʏ, May 19 '15 at 22:43
Wow thanks, I really appreciate this its been bugging me for ages. your knowledge is a inspiration to me at the moment. i'm too new to upvote you, but thanks — user3036451, May 19 '15 at 23:00

score 0 · Answer 2 · answered May 19 '15 at 23:30

0

instead of gstock being array of string, it be array of objects, holding acryonm , companyName.

try this link

answered May 19 '15 at 23:30

ray abu

143
2
15

javascript live stock ticker pulling wrong name

2 Answers2