如何更改网址参数？

Question

How can I change the parameter "symbol" in the url to each element of the array one by one and run the function multiple times?

var symbols = [MSFT, CSCO, FB, AMZN, GOOG];

window.onload = function() {
$.ajax({
    type: "GET",
    url: "https://www.alphavantage.co/query?function=TIME_SERIES_INTRADAY&symbol=AAPL&interval=1min&apikey=T6UEJETEQRVGDJS9",
    success: function(result){
        stocks = result;
        document.getElementById("myDiv").innerHTML = stocks;

    }
 });
}

Thanks!

Answer 1

You have to separate the AJAX call to stand alone function, and then call the that function each time with different parameter.

Like so:

window.onload = function() {
    var symbols = ['MSFT', 'CSCO', 'FB', 'AMZN', 'GOOG'];

    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;
        document.getElementById("myDiv").innerHTML = stocks;
    }
 });
}

Answer 2

Do it in a forEach on the array:

var symbols = ["MSFT", "CSCO", "FB", "AMZN", "GOOG"];

window.onload = function() {
    symbols.forEach(function(sym){
        var url = "https://www.alphavantage.co/query?function=TIME_SERIES_INTRADAY&" + sym + "=AAPL&interval=1min&apikey=T6UEJETEQRVGDJS9";
        $.ajax({
            type: "GET",
            url: url,
            success: function(result){
                stocks = result;
                document.getElementById("myDiv").innerHTML = stocks;

            }
         });
    }   
})

Answer 3

I didn't include promises to keep it simple, but you could use one more parameter to specify the DOM element that will receive the value of the stock.

window.onload = function() {
    var symbols = ['MSFT', 'CSCO', 'FB', 'AMZN', 'GOOG'];
    symbols.forEach(symbol => getSymbol(symbol, divId));
}

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

Answer 4

You can set it as a variable:

$  node
> var symbol = 'aallalla'
undefined
> var html = 'http://www.google.com/?symbol='
undefined
> html + symbol
'http://www.google.com/?symbol=aallalla'
> 

This will allow you to change it on demand.

Answer 5

const getSymbol = (symbol) => {
  return new Promise((resolve, reject) => {
    $.ajax({
        type: "GET",
        url: `https://www.alphavantage.co/query?function=TIME_SERIES_INTRADAY&symbol=${symbol}&interval=1min&apikey=T6UEJETEQRVGDJS9`,
        success: function(result){
            resolve(result);
        }
    });
  });
};

window.onload = function() {
  const symbolPromises = symbols.map((symbol) => {
    return getSymbol(symbol);
  });

  Promise.all(symbolPromises).then((arrayOfResult) => {
    const stocks = result.join('</br>');
    document.getElementById("myDiv").innerHTML = stocks;
  }).catch((err) => {
    console.error(err);
  });       
}

Following this approach you can call as much symbols as you need having all symbol results in the result gave in promise.all function and just is necessary present this result to the user.