複数のajax呼び出しの後に異なるモーダルウィンドウでグラフを表示するにはどうすればよいですか？

Question

私は複数のajax呼び出しを行い、シンボル名をクリックした後、モーダルウィンドウ内にグラフを表示したいとします。今、私は最後のシンボルだけのグラフを見ることができます。最初のシンボルの場合、モーダルウィンドウは空です。私は各AJAX呼び出しで新しいグラフ関数が前の結果を上書きし、最後のモーダルウィンドウに新しいグラフを表示することを理解しています。しかし、以前のすべてのチャートを表示して、lsatウィンドウに新しいチャートを表示するにはどうすればよいですか？

var stocks = []; 
window.onload = function() { 
var symbols = ['AAPL', 'MSFT', 'FB']; 

symbols.forEach(symbol => makeAjaxCall(symbol)); 
} 

function makeAjaxCall(param){ 
$.ajax({ 
    type: "GET", 
    url: "https://www.alphavantage.co/query?function=TIME_SERIES_INTRADAY&symbol=" + param + "&interval=1min&apikey=T6UEJETEQRVGDJS9", 
    success: function(result){ 
     stocks = result; 
     getPrices(); 
    } 
}); 
} 

function getPrices() { 
var metaData = stocks["Meta Data"], 
    timeSeries = stocks["Time Series (1min)"], 
    sym = metaData["2. Symbol"]; 
var mdl1 = '<div id="chartModal" class="modal fade" role="dialog">' + 
       '<div class="modal-dialog modal-lg" role="content">' + 
        '<div class="modal-content">' + 
         '<div class="modal-header">' + 
          '<h4>', 
mdl2 =      '</h4>' + 
          '<button type="button1" class="close" data-dismiss="modal">&times;</button>' + 
         '</div>' + 
         '<div class="modal-body" id="modalBody">' + 
          '<div class = "container-canvas">' + 
           '<canvas class = "line-chart" width = "400" height = "250"></canvas>' + 
          '</div>' + 
         '</div>' + 
        '</div>' + 
       '</div>' + 
      '</div>', 

mdl3 = mdl1 + sym + mdl2; 
document.getElementById("loadedStocks").innerHTML += '<div class="eachStock"><span><a onclick="showChart()">' + sym + '</a></span></div><div></div>' + mdl3; 
var datasetsValues = Object.values(timeSeries), 
    datasetsValuesReverse = datasetsValues.reverse(); 
    highPrice = Object.values(datasetsValuesReverse).map(o => o["4. close"]), 
dateKeys = Object.keys(timeSeries), 
    datesReverse = dateKeys.reverse(); 

var ctx = document.getElementById('loadedStocks').querySelectorAll('.line-chart'); 
var last = ctx[ctx.length - 1]; 



new Chart(last, { 
    type: 'line', 
    data: { 
     labels: datesReverse, 
     datasets: [{ 
      data: highPrice, 
      borderColor: "#FF4500", 
      label: "Close", 
      fillset: "#FFDAB9" 
     }], 
     pointStyle: "cross", 
    }, 
    options: { 
     title: { 
      display: true, 
      text: "Stock's close price changes" 
     } 
    } 
}); 
} 
function showChart() { 
    $('#chartModal').modal(); 
} 

私のhtml：

<div id='loadedStocks'></div> 

ありがとう！

Answer 1

主な問題は、すべてのモーダルに同じIDを指定したことです。

以下は改訂版です。

// better to use document.ready() than window.load() 
 
// good idea to wrap jQuery-related code within document.ready() 
 
$(function() { 
 
    // good idea to cache elements that you will re-use 
 
    var loadedStocks = $("#loadedStocks"); 
 
    var API = 'https://www.alphavantage.co/query'; 
 

 
    function makeAjaxCall(param) { 
 
    // simplified 
 
    $.getJSON(API, { 
 
     'function': 'TIME_SERIES_INTRADAY', 
 
     'symbol': param, 
 
     'interval': '1min', 
 
     'apikey': 'T6UEJETEQRVGDJS9', 
 
    }, getPrices); 
 
    } 
 

 
    function getPrices(stocks) { 
 
    var metaData = stocks["Meta Data"], 
 
     timeSeries = stocks["Time Series (1min)"], 
 
     symbol = metaData["2. Symbol"]; 
 

 
    // give a unique id to each modal e.g. chartModal-AAPL 
 
    // in rare cases, use inline style to hide your HTML 
 
    var modal = 
 
     '<div id="chartModal-' + symbol + '" class="modal fade" role="dialog" style="display:none">' + 
 
     '<div class="modal-dialog modal-lg" role="content">' + 
 
     '<div class="modal-content">' + 
 
     '<div class="modal-header">' + 
 
     '<h4>' + symbol + '</h4>' + 
 
     '<button type="button1" class="close" data-dismiss="modal">&times;</button>' + 
 
     '</div>' + 
 
     '<div class="modal-body" id="modalBody">' + 
 
     '<div class="container-canvas">' + 
 
     '<canvas class="line-chart" width="400" height="250"></canvas>' + 
 
     '</div>' + 
 
     '</div>' + 
 
     '</div>' + 
 
     '</div>' + 
 
     '</div>'; 
 

 
    // use HTML5-data attribute to store the stock value (*) 
 
    loadedStocks.append('<div class="eachStock"><a href="#" data-stock="' + symbol + '">' + symbol + '</a></div>' + modal); 
 

 
    var datasetsValues = Object.values(timeSeries), 
 
     datasetsValuesReverse = datasetsValues.reverse(), 
 
     highPrice = Object.values(datasetsValuesReverse).map(o => o["4. close"]), 
 
     dateKeys = Object.keys(timeSeries), 
 
     datesReverse = dateKeys.reverse(); 
 

 
    var last = loadedStocks.find('.line-chart').last()[0]; // simplified 
 

 
    new Chart(last, { 
 
     type: 'line', 
 
     data: { 
 
     labels: datesReverse, 
 
     datasets: [{ 
 
      data: highPrice, 
 
      borderColor: "#FF4500", 
 
      label: "Close", 
 
      fillset: "#FFDAB9" 
 
     }], 
 
     pointStyle: "cross", 
 
     }, 
 
     options: { 
 
     title: { 
 
      display: true, 
 
      text: "Stock's close price changes" 
 
     } 
 
     } 
 
    }); 
 
    } 
 

 
    // attach a click handler on the dynamically-created link 
 
    $(document).on('click', '.eachStock a[data-stock]', function showChart(e) { 
 
    e.preventDefault(); 
 
    // find modal based on this link's stock value (*) 
 
    $('#chartModal-' + this.dataset.stock).modal('show'); 
 
    }); 
 

 
    // start! 
 
    ['AAPL', 'MSFT', 'FB'].forEach(symbol => makeAjaxCall(symbol)); 
 
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script> 
 

 
<div id="loadedStocks"></div>

（すべてをロードするために、デモに数秒を与えます。あなたはおそらく、その後、あなたのAPIキーを変更する必要があります。）

• window.onload vs document.ready
• jQuery shorthand methods
• Event propogation
• Data attributes