时间戳

首页 > 解决方案 > 简单的搜索api

javascript - 简单的搜索api

问题描述

我很难理解如何从 html 搜索框中获取搜索并将其输入到 JS 端的 api 链接中。我想要这样的东西工作

$.getJSON(`https://www.alphavantage.co/query?function=TIME_SERIES_DAILY&symbol=$(".stock-name")&apikey=APIKEY`, 
  function(data){
    console.log(data);

    var date = data["Meta Data"]["3. Last Refreshed"];

    var stock = data["Meta Data"]["2. Symbol"];
    var info = data["Meta Data"]["1. Information"];
    var open = data["Time Series (Daily)"][date]["1. open"];
    var close = data["Time Series (Daily)"][date]["4. close"];
    var high = data["Time Series (Daily)"][date]["2. high"];
    var low = data["Time Series (Daily)"][date]["3. low"];
    var vol = data["Time Series (Daily)"][date]["5. volume"];


    var difference = close-open;


    $(".Stock-Name").append(stock);
    $(".info").append(info);
    $(".stock-open").append(open);
    $(".stock-close").append(close);
    $(".difference").append(difference);
    $(".date").append(date);
    $(".high").append(high);
    $(".low").append(low);
    $(".vol").append(vol);

    if(difference < 0){
      $(".stock").css("background-color", "red");
    }
    else{
      $(".stock").css("background-color", "green");

    }



  }
);

其中 url symbol=$(".stock-name") 将是用户在我的前端输入的股票名称，它将显示来自 api 数组的信息。

标签： javascripthtml

解决方案

您可能想从您的问题中删除您的 API 密钥。

您没有将股票字符串正确添加到 URL。
这是一个如何执行此操作的示例（API 密钥设置为“测试”，这似乎仍然有效）

$('#stock-search').click(function(){
  var searchValue = $('#stock-name').val();
  $.getJSON(`https://www.alphavantage.co/query?function=TIME_SERIES_DAILY&symbol=${searchValue}&apikey=test`, function(data){
    console.log(data);
    var stock = data["Meta Data"]["2. Symbol"];
    $('#searched_for').html(`Got data for ${stock}`);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="stock-name" type="text" value="APO"/><br/>
<button id="stock-search">Search</button><br/>
<div id="searched_for"></div>

推荐阅读