I am getting object HTMLDivElement instead of its content

Tell us what’s happening:
Hi, I am trying to fetch data and display the data; but data is not showing up, I am getting undefined. I need to fire a new GET request, to fetch the data from server and then display. I couldn’t do it. Please help. I am using node express

/* Global Variables */
const zip = document.getElementById('zip');
const feelings = document.getElementById('feelings');
const button = document.getElementById('generate');

const date = document.getElementById('date');
const temp = document.getElementById('temp');
const content = document.getElementById('content');
// Base URL and API Key for OpenWeatherMap API
const baseURL = 'https://api.openweathermap.org/data/2.5/weather?zip=';
const apiKey = '81b3ea905300ac5f206548c2afc95a49';

// Create a new date instance dynamically with JS
let d = new Date();
let newDate = d.getMonth() + '.' + d.getDate() + '.' + d.getFullYear();

// Async GET
const retrieveData = async (baseURL, zip, apiKey) => {
	try {
		const request = await fetch(baseURL + zip + '&appid=' + apiKey + '&units=imperial');
		const allData = await request.json();
		const { main: { temp } } = allData;
		return temp;
	} catch (error) {
		console.log('error', error);
//chained promises to get and post data
button.addEventListener('click', performAction);

//select the actual value of an HTML input to include in POST
function performAction(e) {
	const newZip = zip.value;
	const feeling = feelings.value;
	//api call
	retrieveData(baseURL, newZip, apiKey).then(function(temp) {
		postData('/add', {
			date: newDate,
			content: feeling
			.then((response) => {
				return response.json();
			.then((responseData) => {
				updateUI(date, temp, content);
	// .then(updateUI());
// Async POST
const postData = async (url = '', data = {}) => {
	try {
		return await fetch(url, {
			method: 'POST',
			credentials: 'same-origin',
			headers: {
				'Content-Type': 'application/json'
			body: JSON.stringify(data) // body data type must match "Content-Type" header
	} catch (error) {
		console.log('error', error);

const updateUI = async (temperature, newDate, feelings) => {
	date.innerHTML = newDate;
	temp.innerHTML = temperature;
	content.innerHTML = feelings;

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.


Where are you expecting the data to show up? What is showing as undefined?

What do you see if you added a console.log(temp) after the above code?

You did not post what retrieveData looks like.

I have edited my code, it’s giving me [object HTMLDivElement] instead of content.