Simple search api

Question

Im having a hard time understanding how to get a search from an html search box and input it into a api link on the JS side. i want something like this to work

$.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");

    }



  }
);

where in the url symbol=$(".stock-name") would be the name of the stock the user inputs on my front end and it would show the info from the array in the api.

You don't show any HTML, but somewhere on your page is an input field such as `` — you are _somehow_ invoking (which you also don't show) your `$.getJSON(…)` call; probably a _click_ or _submit_ event handler. In that handler you would do something like `let stock_name = $('input[name=ticker]').val()` to get the content of the input field. It's hard to say without seeing your HTML and your event handler & binding. — Stephen P, Mar 20 '20 at 20:11
I think this is what you are looking for .. https://stackoverflow.com/questions/42980645/easier-way-to-transform-formdata-into-query-string — Daniel Mabadeje, Mar 20 '20 at 20:12
You should delete your question and repost without the API KEY, since editing the question still allow it to be visible in edit history — Elias Soares, Mar 20 '20 at 23:06

score 0 · Accepted Answer · answered Mar 20 '20 at 23:03

0

You may want to remove your API key from your question..

You are not adding your stock string to the URL properly.
Here is an example of how to do it (with API key set to "test" which still seems to work)

$('#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>

answered Mar 20 '20 at 23:03

2pha

9,798
2
29
43

I tried the code and nothing shows up on my console. I did a test console.log and that showed up. – Vurtle Mar 22 '20 at 20:54
Does running the code snippet above work? (click the "Run code snippet" button) – 2pha Mar 22 '20 at 21:56
1

Yeh the snippet works, i asked my professor and i figured it out, my .js fine wasnt on the bottom of my html code, thanks a lot! – Vurtle Mar 22 '20 at 23:07

Simple search api

1 Answers1