0

I am trying to render on front-end the result of the Web Api which contains array of data to populate the stock chart. Each time I enter a symbol and click the "Get Quote" button it should fetch data from the web api. Here is the code that I tried. You will find the error print as well.

home.handlebars

<div>
  <div>
    <h3>Charts</h3>
  </div>
  <div>
    <form action="/app" method="get">
      <label for="symbol">Symbol: </label>
      <input type="text" name="symbol" id="symbolTags" style="text-transform: uppercase" placeholder="Symbol">

      <input type="submit" id="requestSymbol" value="Get Quote">
    </form>
  </div>
</div>

<script>
  const symbolTags = document.querySelector('#symbolTags')
  const requestSymbol = document.querySelector('#requestSymbol')
  requestSymbol.addEventListener('click', getSymbolDb)
  symbolTags.addEventListener("keyup", executeEnterKey)

  function getSymbolDb() {
    $.getJSON('/app', function (data) {
      let chartData = data.chartValue.map(item => {
        item.date,
          item.open,
          item.high,
          item.low,
          item.close,
          item.volume
      })
      console.log(chartData)
    })
  }

  function executeEnterKey(event) {
    if (event.keyCode === 13) {
      requestSymbol.click()
      event.preventDefault()
    }
  }
</script>

controller - webApiController.js

const axios = require('axios')

exports.webApi = (req, res) => {

  let curValue = req.query.symbol

  const urlCompact = `https://www.alphavantage.co/query?function=TIME_SERIES_DAILY&symbol=${curValue}&outputsize=compact&apikey=TUVR`

  axios.get(urlCompact)
    .then(response => {
      let highLow = Object.keys(response.data['Time Series (Daily)']).map(date => {
        return {
          date: Date.parse(date),
          open: Math.round(parseFloat(response.data['Time Series (Daily)'][date]['1. open']) * 100) / 100,
          high: Math.round(parseFloat(response.data['Time Series (Daily)'][date]['2. high']) * 100) / 100,
          low: Math.round(parseFloat(response.data['Time Series (Daily)'][date]['3. low']) * 100) / 100,
          close: Math.round(parseFloat(response.data['Time Series (Daily)'][date]['4. close']) * 100) / 100,
          volume: parseInt(response.data['Time Series (Daily)'][date]['5. volume'])
        }
      })

        res.render('home', {
          nameUpperCase: curValue,
          chartValue: highLow
        })
      })
        .catch(error => {
          console.log(error)
        })
    }

Error

TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at axios.get.then.response (/mnt/c/Users/john/Desktop/node/controllers/webApiController.js:18:28)
    at process.internalTickCallback (internal/process/next_tick.js:77:7)

console.log(highLow)

 [{ date: 1530835200000,
    open: 185.42,
    high: 188.43,
    low: 185.2,
    close: 187.97,
    volume: 17485245 },
  { date: 1530748800000,
    open: 185.26,
    high: 186.41,
    low: 184.28,
    close: 185.4,
    volume: 16604248 } ]
John John
  • 1,305
  • 2
  • 16
  • 37
  • So what does `console.log(response)` show? – Keith Nov 23 '18 at 23:53
  • @Keith just updated - ```console.log(highLow)``` – John John Nov 24 '18 at 00:01
  • Change -> `res.render('home', {` to `res.json( {` Your not wanting to render a template, but return json to use in your ajax request. – Keith Nov 24 '18 at 00:06
  • can you explain me this line```
    ``` This is how I understand it ```action``` The URI of a program that processes the form information. But when I submit the form it will render ```http://localhost:3000/app?symbol=aapl``` page. How can i prevent leaving the main page ```http://localhost:3000```
     – John John Nov 24 '18 at 00:24
  • 1
    You need to prevent the default of the onsubmit of the form, eg. https://stackoverflow.com/questions/8664486/javascript-code-to-stop-form-submission ps, the second answer saying, vanilla javascript is the one I would use. I would also ignore the check for attachEvent, addEventListener is widely supported now. – Keith Nov 24 '18 at 00:35

0 Answers0