2016-07-08 5 views
3

私がやっているSmart Mirrorプロジェクトの在庫ローダーを作ろうとしています。私が抱えている問題は、自分のコードをテストすることです。何らかの理由で、コードをコンパイルすると、テーブルがロードされない時間の半分になります。私のコーディング経験レベルは「愛好家」なので、私は間違いを犯し、それを知らない変化があります。HTMLテーブルはjQueryの半分の時間しかロードしません

しかし、このコードは半分の時間で動作するため、私はその問題がどうなるか分かりません。私はさまざまなバージョンのjQueryでそれをテストしましたが、私はまだ同じ問題を抱えています。

私は間違っていますか?
これはJSON Googleファイナンスの通話が拒否されている問題ですか?

var gstock = [{ 
 
    "title": "Apple", 
 
    "code": "NASDAQ:AAPL" 
 
}, { 
 
    "title": "Lockheed Martin", 
 
    "code": "NYSE:LMT" 
 
}, { 
 
    "title": "Exxon Mobil", 
 
    "code": "NYSE:XOM" 
 
}, { 
 
    "title": "Bristow", 
 
    "code": "NYSE:BRS" 
 
}, { 
 
    "title": "Boeing", 
 
    "code": "NYSE:BA" 
 
}, { 
 
    "title": "Realty Income", 
 
    "code": "NYSE:O" 
 
}, { 
 
    "title": "Activision Blizzard", 
 
    "code": "NYSE:ATVI" 
 
}, { 
 
    "title": "Level 3 Communication", 
 
    "code": "NYSE:LVLT" 
 
}, { 
 
    "title": "Disney", 
 
    "code": "NYSE:DIS" 
 
}, { 
 
    "title": "Tesla", 
 
    "code": "NYSE:TSLA" 
 
}, { 
 
    "title": "Advanced Micro Devices", 
 
    "code": "NYSE:AMD" 
 
}, { 
 
    "title": "Amazon", 
 
    "code": "NYSE:AMZN" 
 
}, { 
 
    "title": "Raytheon", 
 
    "code": "NYSE:RTN" 
 
}, { 
 
    "title": "Fedex", 
 
    "code": "NYSE:FDX" 
 
}, { 
 
    "title": "Deutsche Bank", 
 
    "code": "NYSE:DB" 
 
}, { 
 
    "title": "Microsoft", 
 
    "code": "NYSE:MSFT" 
 
}, ]; 
 

 
// array to hold previous results... 
 
var results = new Array(gstock.length); 
 

 
$(document).ready(function() { 
 
    // construct the table... 
 
    for (var i = 0; i < gstock.length; i++) { 
 
    var row = 
 
     "<tr id=\"row_" + i + "\" style=\"height:20px\"><td>" + gstock[i].title + "</td>" + 
 
     "<td id=\"symbol_" + i + "\" style=\"text-align:left\"></td>" + 
 
     "<td id=\"price_" + i + "\" style=\"text-align:right\"></td>" + 
 
     "<td id=\"price_change_" + i + "\" style=\"text-align:right\"></td>" + 
 
     "<td id=\"percent_change_" + i + "\" style=\"text-align:right\"></td></tr>"; 
 
    if (i == 0) { 
 
     $('#stocks').append(row); 
 
    } else { 
 
     $('#stocks tr:last').after(row); 
 
    } 
 
    } 
 

 
    display_table(); 
 

 
    setInterval(function() { 
 
    display_table(); 
 
    }, 5000); 
 
}); 
 

 
function load_stock(i) { 
 
    // Need this function so that i can be referenced correctly inside the callback... 
 
    $.getJSON("https://finance.google.com/finance/info?client=ig&q=" + gstock[i].code + "&callback=?", function(response) { 
 
    var stockInfo1 = response[0]; 
 

 
    console.log("here: " + i); 
 
    // update key fields 
 
    $("#symbol_" + i).html(stockInfo1.t); 
 
    $("#price_" + i).html(stockInfo1.l); 
 
    $("#price_change_" + i).html(stockInfo1.c); 
 
    $("#percent_change_" + i).html(stockInfo1.cp); 
 

 
    $("#percent_change_" + i).append("%"); 
 
    $("#symbol_" + i).css({ 
 
     "padding-left": "10px" 
 
    }); 
 
    $("#percent_change_" + i).css({ 
 
     "padding-right": "10px" 
 
    }); 
 

 

 
    if (stockInfo1.c > 0) { 
 
     $("#percent_change_" + i).css({ 
 
     "color": "#70DB70" 
 
     }); 
 
     $("#price_change_" + i).css({ 
 
     "color": "#70DB70" 
 
     }); 
 
     $("#percent_change_" + i).prepend("+"); 
 
    } else { 
 
     $("#percent_change_" + i).css({ 
 
     "color": "#FF0000" 
 
     }); 
 
     $("#price_change_" + i).css({ 
 
     "color": "#FF0000" 
 
     }); 
 
    } 
 

 

 
    if (results.length > 0) { 
 
     // other calculations here... 
 
     // use records[i] to get the previous record 
 
    } 
 

 
    flash_background("#row_" + i, "#000000", "#000000"); 
 
    flash_background("#price_" + i, "#3342FF", "#000000"); 
 
    flash_background("#price_change_" + i, "#3342FF", "#000000"); 
 
    flash_background("#percent_change_" + i, "#3342FF", "#000000"); 
 

 
    // store the last record (for next time); 
 
    results[i] = stockInfo1; 
 
    }); 
 
} 
 

 
function flash_background(id, col1, col2) { 
 
    $(id).css("background-color", col1); 
 
    setTimeout(function() { 
 
    $(id).css("background-color", col2); 
 
    }, 300); 
 
} 
 

 
function display_table() { 
 
    for (var i = 0; i < gstock.length; i++) { 
 
    load_stock(i); 
 
    } 
 
}
caption { 
 
    width: 25em; 
 
    height: 1em; 
 
    color: white; 
 
    background-color: black; 
 
    padding-bottom: 10px; 
 
    font-weight: bold; 
 
    text-decoration: underline; 
 
    font-family: "Times New Roman", Times, serif; 
 
} 
 
.container1 { 
 
    height: 20em; 
 
    width: 25em; 
 
    color: white; 
 
    font-family: "Times New Roman", Times, serif; 
 
} 
 
table { 
 
    border-collapse: collapse; 
 
} 
 
td {}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="container1"> 
 
    <table id="stocks"> 
 
    <caption>Equities</caption> 
 
    </table> 
 
</div>

上に表示JSFiddle

+1

テーブルのロードに失敗したときに、あなたのブラウザのコンソールでエラーを参照していますか? – showdev

+0

@showdev NASDAQに変更するように提案された変更を行った後、コンソールにはまだエラーがありますが、私は思うほど多くのGoogle API呼び出しからのものです。私はこれらを現在取り除く方法を考えています。 – Aurum115

答えて

3

はい、あなたの推測では、上場企業のいくつかはNASDAQにあるため、これにあなたには、いくつかの障害が発生したを取得しているため、テーブルには、いくつかの行が欠落している、権利でありますあなたのコンソールでGoogle Financeコール。ちょうどあなたのJSONを更新し、すべてが大丈夫になります

var gstock = [{"title":"Apple", "code":"NASDAQ:AAPL"}, 
 
{"title":"Lockheed Martin", "code":"NYSE:LMT"}, 
 
{"title":"Exxon Mobil", "code":"NYSE:XOM"}, 
 
    {"title":"Bristow", "code":"NYSE:BRS"}, 
 
    {"title":"Boeing", "code":"NYSE:BA"}, 
 
    {"title":"Realty Income", "code":"NYSE:O"}, 
 
    {"title":"Activision Blizzard", "code":"NASDAQ:ATVI"}, 
 
    {"title":"Level 3 Communication", "code":"NYSE:LVLT"}, 
 
    {"title":"Disney", "code":"NYSE:DIS"}, 
 
    {"title":"Tesla", "code":"NASDAQ:TSLA"}, 
 
    {"title":"Advanced Micro Devices", "code":"NYSE:AMD"}, 
 
    {"title":"Amazon", "code":"NASDAQ:AMZN"}, 
 
    {"title":"Raytheon", "code":"NYSE:RTN"}, 
 
    {"title":"Fedex", "code":"NYSE:FDX"}, 
 
    {"title":"Deutsche Bank", "code":"NYSE:DB"}, 
 
    {"title":"Microsoft", "code":"NASDAQ:MSFT"} ]; 
 

 
// array to hold previous results... 
 
var results = new Array(gstock.length); 
 

 
$(document).ready(function() { 
 
    // construct the table... 
 
    for (var i = 0; i < gstock.length; i++) { 
 
    var row = 
 
     "<tr id=\"row_" + i + "\" style=\"height:20px\"><td>" + gstock[i].title + "</td>" + 
 
     "<td id=\"symbol_" + i + "\" style=\"text-align:left\"></td>" + 
 
     "<td id=\"price_" + i + "\" style=\"text-align:right\"></td>" + 
 
     "<td id=\"price_change_" + i + "\" style=\"text-align:right\"></td>" + 
 
     "<td id=\"percent_change_" + i + "\" style=\"text-align:right\"></td></tr>"; 
 
    if (i == 0) { 
 
     $('#stocks').append(row); 
 
    } else { 
 
     $('#stocks tr:last').after(row); 
 
    } 
 
    } 
 

 
    display_table(); 
 

 
    setInterval(function() { 
 
    display_table(); 
 
    }, 5000); 
 
}); 
 

 
function load_stock(i) { 
 
    // Need this function so that i can be referenced correctly inside the callback... 
 
    $.getJSON("https://finance.google.com/finance/info?client=ig&q=" + gstock[i].code + "&callback=?", function(response) { 
 
    var stockInfo1 = response[0]; 
 

 
    // update key fields 
 
    $("#symbol_" + i).html(stockInfo1.t); 
 
    $("#price_" + i).html(stockInfo1.l); 
 
    $("#price_change_" + i).html(stockInfo1.c); 
 
    $("#percent_change_" + i).html(stockInfo1.cp); 
 

 
    $("#percent_change_" + i).append("%"); 
 
    $("#symbol_" + i).css({ 
 
     "padding-left": "10px" 
 
    }); 
 
    $("#percent_change_" + i).css({ 
 
     "padding-right": "10px" 
 
    }); 
 

 

 
    if (stockInfo1.c > 0) { 
 
     $("#percent_change_" + i).css({ 
 
     "color": "#70DB70" 
 
     }); 
 
     $("#price_change_" + i).css({ 
 
     "color": "#70DB70" 
 
     }); 
 
     $("#percent_change_" + i).prepend("+"); 
 
    } else { 
 
     $("#percent_change_" + i).css({ 
 
     "color": "#FF0000" 
 
     }); 
 
     $("#price_change_" + i).css({ 
 
     "color": "#FF0000" 
 
     }); 
 
    } 
 

 

 
    if (results.length > 0) { 
 
     // other calculations here... 
 
     // use records[i] to get the previous record 
 
    } 
 

 
    flash_background("#row_" + i, "#000000", "#000000"); 
 
    flash_background("#price_" + i, "#3342FF", "#000000"); 
 
    flash_background("#price_change_" + i, "#3342FF", "#000000"); 
 
    flash_background("#percent_change_" + i, "#3342FF", "#000000"); 
 

 
    // store the last record (for next time); 
 
    results[i] = stockInfo1; 
 
    }); 
 
} 
 

 
function flash_background(id, col1, col2) { 
 
    $(id).css("background-color", col1); 
 
    setTimeout(function() { 
 
    $(id).css("background-color", col2); 
 
    }, 300); 
 
} 
 

 
function display_table() { 
 
    for (var i = 0; i < gstock.length; i++) { 
 
    load_stock(i); 
 
    } 
 
}
caption { 
 
    width: 25em; 
 
    height: 1em; 
 
    color: white; 
 
    background-color: black; 
 
    padding-bottom: 10px; 
 
    font-weight: bold; 
 
    text-decoration: underline; 
 
    font-family: "Times New Roman", Times, serif; 
 
} 
 
.container1 { 
 
    height: 20em; 
 
    width: 25em; 
 
    color: white; 
 
    font-family: "Times New Roman", Times, serif; 
 
} 
 
table { 
 
    border-collapse: collapse; 
 
} 
 
td {}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="container1"> 
 
    <table id="stocks"> 
 
    <caption>Equities</caption> 
 
    </table> 
 
</div>

フィドル:http://fiddle.jshell.net/21n8j9ya/32/

関連する問題