Im stuck at something very trivial trying to build my frontend.
My main.js looks like this :
const textfield = document.getElementById('inpTextField')
const btnSendPost = document.getElementById('btnSendPost')
btnSendPost.addEventListener('click', () => {
sendData()
})
function sendData() {
let txtValue = textfield.value
console.log(txtValue)
let sendingJSON = {
"body" : `${txtValue}`
}
fetch("http://localhost:3000/post", {
method: "post",
body: JSON.stringify(sendingJSON),
headers: { "Content-Type": "application.json"}
})
.then(res => res.json())
.then(json => console.log(json))
.catch(err => console.log(err))
}
but my backend (express 4.18) doesnt register POST request, and console gives back enigmatic :
TypeError: Failed to fetch
at <anonymous>:1:876
at sendData (main.js:17:5)
at HTMLButtonElement.<anonymous> (main.js:7:5)
index.js (backend)
const express = require('express')
const app = express()
const port = 3000
const bp = require('body-parser')
let randomJson = {
"apple" : "cider viegar"
}
app.use(bp.json())
app.use(bp.urlencoded(({ extended: true})))
app.get('/',(req,res) => {
res.json(randomJson)
})
app.post('/post', (req, res) => {
var body = req.body
console.log(body)
res.send("ok")
})
app.listen(port, () => {
console.log(`Server running on ${port}`)
})
any ideas ?
Related
I would like to scrape multiple websites using NodeJS, Express, Cheerio and Axios.
I'm able now to scrape 1 website and display the information to the HTML.
But when I try to scrape multiple websites looking for the same element, it doesn't go through the forEach (stops after 1 cycle). Notice my loop which doesn't work correctly:
urls.forEach(url => {
2 files that are the most important:
index.js
const PORT = 8000
const axios = require('axios')
const cheerio = require('cheerio')
const express = require('express')
const app = express()
const cors = require('cors')
app.use(cors())
const urls = ['https://www.google.nl','https://www.google.de']
// const url = 'https://www.heineken.com/nl/nl/'
app.get('/', function(req, res){
res.json('Robin')
})
urls.forEach(url => {
app.get('/results', (req, res) => {
axios(url)
.then(response => {
const html = response.data
const $ = cheerio.load(html)
const articles = []
$('script', html).each(function(){
const link = $(this).get()[0].namespace
if (link !== undefined) {
if (link.indexOf('w3.org') > -1) {
articles.push({
link
})
}
}
})
res.json(articles)
}).catch(err => console.log(err))
})
})
app.listen(PORT, () => console.log('server running on PORT ${PORT}'))
App.js:
const root = document.querySelector('#root')
fetch('http://localhost:8000/results')
.then(response => {return response.json()})
.then(data => {
console.log(data)
data.forEach(article => {
const title = `<h3>` + article.link + `</h3>`
root.insertAdjacentHTML("beforeend", title)
})
})
You're registering multiple route handlers for the same route. Express will only route requests to the first one. Move your URL loop inside app.get("/results", ...)...
app.get("/results", async (req, res, next) => {
try {
res.json(
(
await Promise.all(
urls.map(async (url) => {
const { data } = await axios(url);
const $ = cheerio.load(data);
const articles = [];
$("script", html).each(function () {
const link = $(this).get()[0].namespace;
if (link !== undefined) {
if (link.indexOf("w3.org") > -1) {
articles.push({
link,
});
}
}
});
return articles;
})
)
).flat() // un-nest each array of articles
);
} catch (err) {
console.error(err);
next(err); // make sure Express responds with an error
}
});
I am creating OAuth2 for my application by which the people who are redirected to the server by clickking it will get the verified role. Can somebody please help me on how i can add it in my script. Right now I am using the script given below:
const express = require('express');
const { port } = require('./config.json');
const app = express();
app.get('/', (request, response) => {
console.log(`The access code is: ${request.query.code}`)
;
return response.sendFile('index.html', { root: '.' });
});
app.listen(port, () => console.log(`App listening at http://localhost:${port}`));
and from the index file they get redirected to the server here's the index.html script:
<script>
window.location.href = "https://discord.gg/DhsYQ3u4jj";
</script>
<div id="info">Congrats! You have been successfully connected to Discord.</div>
<a id="login" style="display: none;" href="https://discord.gg/jkBJarBY">Click here to Join Akudo's official Discord!</a>
<script>
window.onload = () => {
const fragment = new URLSearchParams(window.location.hash.slice(1));
const [accessToken, tokenType] = [fragment.get('access_token'), fragment.get('token_type')];
if (!accessToken) {
return (document.getElementById('login').style.display = 'block');
}
fetch('https://discord.com/api/users/#me', {
headers: {
authorization: `${tokenType} ${accessToken}`,
},
})
.then(result => result.json())
.then(response => {
const { username, discriminator } = response;
document.getElementById('info').innerText += ` ${username}#${discriminator}`;
})
.catch(console.error);
};
</script>
I have a express.js route whose code is below: -
const path = require("path");
const express = require("express");
const hbs = require("hbs");
const weather = require("./weather");
const app = express();
app.get("/weather", (req, res) => {
if (!req.query.city) {
return res.send({
error: "City Not Found",
});
}
res.send({
currentTemp: weather.temp,
});
});
And I also have a file to fetch data from api using axios whose code is here
const axios = require("axios");
axios
.get(
"https://api.openweathermap.org/data/2.5/weather?q=samalkha&appid=91645b79f9eac8808153c90472150f2d"
)
.then(function (response) {
module.exports = {
temp: response.data.main.temp
}
})
.catch(function (error) {
console.log("Error Spotter");
});
As I am using res.send I should get a json with currentTemp and the value of current temp should be temperature that I will get from weather.js file but I am getting a blank json array.
Try this.
You'll get the temperature in the localhost:3000
If you want to render the data for EJS (or something) instead of .then((data) => res.json(data.main.temp)) use:
.then((data) => res.render("index", { weather: data })
--
const URL =
"https://api.openweathermap.org/data/2.5/weather?q=samalkha&appid=91645b79f9eac8808153c90472150f2d"
const express = require("express")
const axios = require("axios")
const app = express()
const PORT = 3000
app.get("/", (req, res) => {
axios
.get(URL)
.then((response) => response.data)
.then((data) => res.json(data.main.temp))
.catch((err) => console.log(err))
})
app.listen(PORT, () => {
console.log(`Listening at http://localhost:${PORT}`)
})
module.exports is processed when the module is being defined. when you import weather, it does not exists therefore you get no data.
try to export a function which does the request and add a callback function as argument so you can pass the request result to it.
Change your weather.js to the following example:
const axios = require("axios");
let temperature;
async function getTemp() {
await axios
.get("https://api.openweathermap.org/data/2.5/weather?q=samalkha&appid=91645b79f9eac8808153c90472150f2d")
.then(function (response) {
temperature = response.data.main.temp
})
.catch(function (error) {
console.log("Error Spotter");
});
}
module.exports = {
temp: getTemp
}
This will actually return the fetched temperature.
Whenever I make an axios call to an the '/login' endpoint, I keep getting the following error printed in my browser console. I've included the server.js file and the file from where I'm making the call for your reference.
Dependencies installed in the client folder: axios, react, react-dom, react-router-dom
Dependencies installed in the server folder: cors, express, node, spotify-web-api-node
GET http://localhost:3001/login net::ERR_EMPTY_RESPONSE
index.js file
import axios from 'axios'
const Profile = () => {
const login = () => {
console.log("testing login function - client")
axios.get("http://localhost:3001/login")
.then(() => {
console.log("success")
})
.catch(() => {
console.log("error")
})
}
return (
<div className="profile">
.
.
.
<div className="button">
<button onClick={() => login()} className="btn">Log In</button>
</div>
</div>
</div>
)
}
export default Profile
server.js file
const SpotifyWebAPINode = require('spotify-web-api-node')
const express = require('express')
const cors = require("cors")
const app = express()
app.use(cors)
// This file is copied from: https://github.com/thelinmichael/spotify-web-api-node/blob/master/examples/tutorial/00-get-access-token.js
const scopes = [
'user-top-read',
'user-library-read',
'playlist-read-private',
'playlist-read-collaborative',
'playlist-modify-public',
'playlist-modify-private',
]
// credentials are optional
var spotifyApi = new SpotifyWebAPINode({
clientId: 'XXX',
clientSecret: 'XXX',
redirectUri: 'http://localhost:3001/callback',
})
app.get('/login', (req, res) => {
console.log("testing login endpoint - server")
res.redirect(spotifyApi.createAuthorizeURL(scopes))
})
app.get('/callback', (req, res) => {
const error = req.query.error
const code = req.query.code
const state = req.query.state
if (error) {
console.error('Callback Error:', error)
res.send(`Callback Error: ${error}`)
return
}
spotifyApi
.authorizationCodeGrant(code)
.then((data) => {
const access_token = data.body['access_token']
const refresh_token = data.body['refresh_token']
const expires_in = data.body['expires_in']
spotifyApi.setAccessToken(access_token)
spotifyApi.setRefreshToken(refresh_token)
console.log('access_token:', access_token)
console.log('refresh_token:', refresh_token)
console.log(
`Sucessfully retreived access token. Expires in ${expires_in} s.`,
)
res.send('Success! You can now close the window.')
setInterval(async () => {
const data = await spotifyApi.refreshAccessToken()
const access_token = data.body['access_token']
console.log('The access token has been refreshed!')
console.log('access_token:', access_token)
spotifyApi.setAccessToken(access_token)
}, (expires_in / 2) * 1000)
})
.catch((error) => {
console.error('Error getting Tokens:', error)
res.send(`Error getting Tokens: ${error}`)
})
})
app.listen(3001, () => {
console.log('Server live on port 3001')
})
When I'm trying to get the response from my server route I'm getting this error: FetchError: invalid json response body - unexpected token < in JSON
I think the problem is when I do response.json()?
When I use Postman to reach the same endpoint I got the response that I want. What is happening here?
note: my api tokens can be publicly used
server.js
const express = require('express')
const path = require('path')
const bodyParser = require('body-parser')
const fetch = require('node-fetch')
const app = express()
const port = process.env.PORT || 5000
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: true }))
const TRANSLINK_TOKEN = 'j2bXKzENILvyoxlZ399I'
const TRANSLINK_URL = 'http://api.translink.ca/rttiapi/v1/buses?apikey='
// API routes
app.get('/buses/location', (req, res) => {
const apiURL = `${TRANSLINK_URL}${TRANSLINK_TOKEN}`
console.log(apiURL)
fetch(apiURL)
.then(response => {
if (response.ok) {
console.log("response ok")
response.json()
.then((data) => {
res.json(data)
})
}
else {
res.sendStatus(response.status)
}
})
.catch(error => {
console.log(error)
alert(error.message)
})
})
app.listen(port, () => console.log(`Listening on port ${port}`))
You API return XML not json, please make sure that apiURL return valid json object
to check the response please put console.log(data) before res.json(data)
You can use XML2JSON package to convert the response to json format or use res.send(data) to retrieve xml response as is
fetch(apiURL)
.then(response => {
if (response.ok) {
console.log("response ok");
console.log(response.body);
// Add XML2JSON to convert body
res.send(response.body);
}
else {
res.sendStatus(response.status)
}
})