0

When I try to Fetch GET data from an API, I get the following error on index.html page when loading-

script.js:14 SyntaxError: Unexpected end of input
    at script.js:10
(anonymous) @ script.js:14
Promise.catch (async)
foodApi @ script.js:14
(anonymous) @ script.js:18

Here is the JSON I'm trying to fetch from URL (http://localhost:3000/food/). If I go to that URL I'm able to see the JSON I created.

[{"calories":140,"_id":"5f47f19289fb9913fd136a7a","name":"small potato","__v":0},{"calories":120,"_id":"5f4801ab674e691ec6350d64","name":"sweet potato","__v":0},{"calories":234,"_id":"5f48236092d55f1c226936b0","name":"avocado","__v":0}]

This is the client side javascript code I'm using to get the data, but instead get the above error on index.html

Does anybody know a solution?

this is the client side javascript code (script.js):

const textAPI = document.querySelector("#textAPI");

const url = "http://localhost:3000/food/";

function foodApi() {
  fetch(url, {
    method: "GET",
    mode: "no-cors",
  })
    .then((response) => response.json())
    .then((data) => {
      textAPI.innerHTML = "from the db: " + JSON.stringify(data);
    })
    .catch((error) => console.error(error));
}

foodApi();

this is the server side API (foodRoutes.js):

const express = require("express");
const foodModel = require("../models/food");
const fetch = require("node-fetch").default;
const app = express();

//get all
app.get("/food", async (req, res) => {
  const food = await foodModel.find({});

  try {
    res.type("json").send(food);
  } catch (error) {
    res.status(500).send(error);
  }
});

module.exports = app;

this is the html (index.html):

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>atlas test</title>
      </head>
      <body>
        <div class="textAPI">
          <p id="textAPI">initial start</p>
        </div>
      </body>
      <script src="script.js"></script>
    </html>
raj-newcoder
  • 1
  • 1
  • posting it as a snippet when server is local is kinda useless – Flash Thunder Aug 27 '20 at 23:04
  • 1
    `.then((response) => response)` should be `.then((response) => response.json())` but that returns an array in the next then() not a string. You need to loop over the array and process each item individually – charlietfl Aug 27 '20 at 23:06
  • What result do you want out of this? What should the HTML look like in the end? – Phil Aug 27 '20 at 23:12
  • I would like the html to show the results of all the json data. – raj-newcoder Aug 27 '20 at 23:13
  • 2
    change `.then((response) => response)` to `.then((response) => response.json())` and `"from the db: " + data` to `"from the db: " + JSON.stringify(data)` to see the response – Gabriele Petrioli Aug 27 '20 at 23:13
  • Hi Gabriele- thanks for the suggestion, but it did not work. I get this error - SyntaxError: Unexpected end of input at script.js:10 (anonymous) @ script.js:14 Promise.catch (async) foodApi @ script.js:14 (anonymous) @ script.js:18 – raj-newcoder Aug 27 '20 at 23:16
  • @raj-newcoder please [edit your question](https://stackoverflow.com/posts/63625241/edit) to show what your code currently looks like – Phil Aug 27 '20 at 23:20
  • updated the post to include suggestions from the comments – raj-newcoder Aug 27 '20 at 23:33
  • i was able to resolve this by installing cors on the nodejs server. `code` $ npm install cors const cors = require('cors'); app.use(cors()); – raj-newcoder Aug 27 '20 at 23:59

0 Answers0