display string on client side by fetching data from server side

Question

I was trying to display a string on the client-side by fetching the result from serverside but for some reason, it is not displaying the fetched data. When I console log the variable straight on the js file the server successfully prints the string. The program is not exporting the variable to the client-side to display it. I can't figure out where I went wrong. Any help is appreciated. Thanks in advance.

const router = require("express").Router();
const {
  callName
} = require("pathJs");

router.route("PathRoute").get(async(req, res) => {
  const Result = await callName();
  return res.json(Result);
});


module.exports = router;

function name() {
  const liner = "this works"
  console.log(liner)
  //updated
  return liner;

}

async function callName() {
  const data1 = await name()
  return data1;

}

callName()

<p id="insertHere" style="color: white;"></p>


<script>
  async function caller() {
    await fetch(`http://localhost:5000/api/PATH`)
      .then((res) => {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve(res.json())
          }, 1000)
        })

      }).then((response) => {
          console.log(response)
          document.getElementById("insertHere").innerHTML = response.liner

        }

      )
  }
</script>

const express = require("express");
const cors = require("cors");
const routePath = require("./routePath");
const {
  response
} = require("express");
require("dotenv").config({
  debug: process.env.DEBUG
});
const port = process.env.PORT || 5000;
const app = express();
app.use(cors());
app.use(express.json());
app.use("/api", routePath);
app.listen(port, () => {
  console.log(`server is running on port: http://localhost:${port}`);
});

`function name() {` logs a value but it doesn't return anything. — Quentin, Apr 28 '21 at 11:14
do I have to return ```liner``` in function ```name```. @Quentin — anon20010813, Apr 28 '21 at 11:16
i returned every data in function name below that function.@Quentin — anon20010813, Apr 28 '21 at 11:17
`name` has no `return` statement so it returns `undefined`. `callName` does have a `return` statement, it returns the return value of `name` … which is `undefined` so `callName` returns (because it is an `async` function) a promise that resolves to `undefined`. If you want to return the value of `liner` then you have to return it. — Quentin, Apr 28 '21 at 11:19
I returned ```liner``` in my name function but the string is still not displayed on the client-side. @Quentin — anon20010813, Apr 28 '21 at 11:25
"still not displayed on the client-side" — Does the `console.log` you have before the assignment to `innerHTML` show you anything? — Quentin, Apr 28 '21 at 11:35
@anon20010813 — Not even `undefined`? Any error messages in the console? Maybe something about CORS? — Quentin, Apr 28 '21 at 11:39
I have another promise code I haven't included in my function. It is not relevant to displaying my string.@jabaa — anon20010813, Apr 28 '21 at 11:55
First you should localize your problem. Is it a client or server side problem? Then create a [mcve]. It looks like there is much unrelated code in your question. Use a network sniffer like Wireshark, tcpdump or your browser debug tools to analyze the response. — , Apr 28 '21 at 12:41
my fetch is not responding so I added my reduced server-side, my route, and my main js file minified to the fullest. all the added code is potentially the root of my error. Did you read the code I added? cause all the things you have suggested till now don't have anything to do with a potential solution.@jabaa — anon20010813, Apr 28 '21 at 12:49

score 1 · Accepted Answer · 2021-04-28T14:57:10.210

1

There is no export in pathJs and you want name() to return an object containing liner. You need

function name() {
  const liner = "this works"
  console.log(liner)
  //updated
  return {liner};

}

async function callName() {
  const data1 = await name()
  return data1;

}

callName()

module.exports = { callName };

The backend is probably crashing with TypeError: callName is not a function while handling the request and therefore doesn't send a response.

edited Apr 28 '21 at 14:57

answered Apr 28 '21 at 13:45

yes that was the main problem but I get ```liner``` not defined on client-side now.@jabaa – anon20010813 Apr 28 '21 at 14:48
@anon20010813 Of course not. `liner` is a server side variable. How should it be known on client side? `callName` returns the string `"this works"`, nothing else. – Apr 28 '21 at 14:50
exporting the specific variable won't work? @jabaa – anon20010813 Apr 28 '21 at 14:51
@anon20010813 You should probably read [What is the difference between client-side and server-side programming?](https://stackoverflow.com/questions/13840429/what-is-the-difference-between-client-side-and-server-side-programming) Server side code is evaluated on a server. Client side code is evaluated on a different computer. They don't share the same memory. If you want to share values you have to send them. You can't simply export a variable from server side to client side. – Apr 28 '21 at 14:53
my main goal was to insert ```this works``` into innerHtml. on client-side. by receiving its response.@jabaa – anon20010813 Apr 28 '21 at 14:57
On Stackoverflow you ask a specific question and get specific answers. Discussion, debugging and mutliple problems in one question doesn't work well with this platform. Questions starting with _"I'm trying to..."_ are usually to broad. I solved two of your problems. If you still have problems, localize and debug them and ask a new question. – Apr 28 '21 at 14:58
1

Thanks for all ther help. Just figured out how to insert it into my inner HTML too I returned liner like ```return {liner}``` and inserted it as```document.getElementById("insertHere").innerHTML = response.liner``` . Thanks for the cs vs ss explanation link. @jabba – anon20010813 Apr 28 '21 at 15:10

display string on client side by fetching data from server side

1 Answers1

Linked