Fetching web api using Nodejs - Express
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 } ]
javascript node.js express
asked Nov 23 '18 at 23:42
John John John John
758
add a comment |
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 } ]
javascript node.js express
asked Nov 23 '18 at 23:42
John John John John
758
So what doesconsole.log(response)show?
– Keith
Nov 23 '18 at 23:53
@Keith just updated -console.log(highLow)
– John John
Nov 24 '18 at 0:01
Change ->res.render('home', {tores.json( {Your not wanting to render a template, but return json to use in your ajax request.
– Keith
Nov 24 '18 at 0:06
can you explain me this line<form action="/app" method="get">This is how I understand itactionThe URI of a program that processes the form information. But when I submit the form it will renderhttp://localhost:3000/app?symbol=aaplpage. How can i prevent leaving the main pagehttp://localhost:3000
– John John
Nov 24 '18 at 0:24
1
You need to prevent the default of the onsubmit of the form, eg. stackoverflow.com/questions/8664486/… 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 0:35
add a comment |
0
0
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 } ]
javascript node.js express
asked Nov 23 '18 at 23:42
John John John John
758
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 } ]
javascript node.js express
javascript node.js express
asked Nov 23 '18 at 23:42
John John John John
758
asked Nov 23 '18 at 23:42
John John John John
758
edited Nov 24 '18 at 0:00
John John
asked Nov 23 '18 at 23:42
John John John John
758
asked Nov 23 '18 at 23:42
John John John John
758
asked Nov 23 '18 at 23:42
John John John John
758
758
So what doesconsole.log(response)show?
– Keith
Nov 23 '18 at 23:53
@Keith just updated -console.log(highLow)
– John John
Nov 24 '18 at 0:01
Change ->res.render('home', {tores.json( {Your not wanting to render a template, but return json to use in your ajax request.
– Keith
Nov 24 '18 at 0:06
can you explain me this line<form action="/app" method="get">This is how I understand itactionThe URI of a program that processes the form information. But when I submit the form it will renderhttp://localhost:3000/app?symbol=aaplpage. How can i prevent leaving the main pagehttp://localhost:3000
– John John
Nov 24 '18 at 0:24
1
You need to prevent the default of the onsubmit of the form, eg. stackoverflow.com/questions/8664486/… 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 0:35
add a comment |
So what doesconsole.log(response)show?
– Keith
Nov 23 '18 at 23:53
@Keith just updated -console.log(highLow)
– John John
Nov 24 '18 at 0:01
Change ->res.render('home', {tores.json( {Your not wanting to render a template, but return json to use in your ajax request.
– Keith
Nov 24 '18 at 0:06
can you explain me this line<form action="/app" method="get">This is how I understand itactionThe URI of a program that processes the form information. But when I submit the form it will renderhttp://localhost:3000/app?symbol=aaplpage. How can i prevent leaving the main pagehttp://localhost:3000
– John John
Nov 24 '18 at 0:24
1
You need to prevent the default of the onsubmit of the form, eg. stackoverflow.com/questions/8664486/… 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 0:35
So what does
console.log(response) show?– Keith
Nov 23 '18 at 23:53
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 0:01
@Keith just updated -
console.log(highLow)– John John
Nov 24 '18 at 0: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 0:06
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 0:06
can you explain me this line
<form action="/app" method="get"> 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 0:24
can you explain me this line
<form action="/app" method="get"> 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 0:24
1
1
You need to prevent the default of the onsubmit of the form, eg. stackoverflow.com/questions/8664486/… 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 0:35
You need to prevent the default of the onsubmit of the form, eg. stackoverflow.com/questions/8664486/… 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 0:35
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53453946%2ffetching-web-api-using-nodejs-express%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53453946%2ffetching-web-api-using-nodejs-express%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
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 0:01
Change ->
res.render('home', {tores.json( {Your not wanting to render a template, but return json to use in your ajax request.– Keith
Nov 24 '18 at 0:06
can you explain me this line
<form action="/app" method="get">This is how I understand itactionThe URI of a program that processes the form information. But when I submit the form it will renderhttp://localhost:3000/app?symbol=aaplpage. How can i prevent leaving the main pagehttp://localhost:3000– John John
Nov 24 '18 at 0:24
1
You need to prevent the default of the onsubmit of the form, eg. stackoverflow.com/questions/8664486/… 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 0:35