Unable to fetch JSON file from the local server

Question

Unable to fetch JSON file from the local server

I'm trying to develop a server API using Koa. This server will have a single API endpoint, /api/data, which should read a local json file and display its content in the browser when a user accesses localhost:3000/api/data.

const Koa = require('koa');
const serve = require('koa-static');
const Router = require('koa-router');
// const http = require('http');
const fs = require('fs');

const app = new Koa();
const router = new Router();

app.use(serve('.'));

router.get('/api/data', async (ctx, next) => {
  await fs.readFile('./data.json','utf-8', (err, data) => {
    ctx.body = JSON.parse(data);
  });
});

app.use(router.routes()).use(router.allowedMethods());
app.listen(3000);

Unfortunately, I'm encountering an error with a status code of 404. Since I am relatively new to Koa, I'm not sure where I'm going wrong. Could someone please assist me with this issue?

javascript json api koa

Answer 1

Answer №1

When using <code>fs.readFile, it does not return a promise, causing koa not to wait for it to finish. Consequently, if the body is still empty at the end of your middleware function, you will receive a 404 page.

To address this issue, you must either promisify all your asynchronous functions or utilize their synchronous counterparts.

Your middleware should be structured like this:

router.get('/api/data', async (ctx) => {
    // Make sure to specify utf8, as fs.readFileSync returns a buffer otherwise
    let data = fs.readFileSync('./data.json', 'utf8')
    ctx.body = JSON.parse(data);
})

Answer 2

When using <code>fs.readFile, it does not return a promise, causing koa not to wait for it to finish. Consequently, if the body is still empty at the end of your middleware function, you will receive a 404 page.

To address this issue, you must either promisify all your asynchronous functions or utilize their synchronous counterparts.

Your middleware should be structured like this:

router.get('/api/data', async (ctx) => {
    // Make sure to specify utf8, as fs.readFileSync returns a buffer otherwise
    let data = fs.readFileSync('./data.json', 'utf8')
    ctx.body = JSON.parse(data);
})

Answer 3

Answer №2

If you need to access that file, streaming it might be a more efficient option:

router.get('/api/data', async (ctx, next) => {
  var readStream = fs.createReadStream('./data.json','utf8');
  ctx.body = readStream;
  await next();
});

Instead of using await fs.readFile(), consider using ctx.body to send out the data directly.

LATEST UPDATE

It is recommended to remove app.use(serve('.')); and place this middleware after the router middlewares:

app
  .use(router.routes())
  .use(router.allowedMethods())
  .use(serve('.'));

Answer 4

If you need to access that file, streaming it might be a more efficient option:

router.get('/api/data', async (ctx, next) => {
  var readStream = fs.createReadStream('./data.json','utf8');
  ctx.body = readStream;
  await next();
});

Instead of using await fs.readFile(), consider using ctx.body to send out the data directly.

LATEST UPDATE

It is recommended to remove app.use(serve('.')); and place this middleware after the router middlewares:

app
  .use(router.routes())
  .use(router.allowedMethods())
  .use(serve('.'));

Unable to fetch JSON file from the local server

Answer №1

Answer №2

Similar questions

There has been an issue processing the request body. TypeError has occurred because the 'builtin_function_or_method' object is not iterable in this context

Looking for mouseover tooltips in three.js?

I'm encountering a persistent issue of receiving null when attempting to read a JSON object file in

What is causing the disparity between the JSON generated using the `Factory` and the one received from the `API`?

The @Mui datepicker seems to be causing some trouble with the react-hooks-form integration

Passing properties to delete items

Getting image links from JSON in Flutter using regex

When a menu item is clicked, apply a class and change the display property to

Refresh the Google Maps location using GPS coordinates

"Implementing a sorting feature in a product filtering system with JavaScript/Vue, allowing

Struggling to display the retrieved data on the webpage

Having trouble with my loop using Jquery's $.get method

Is there a way to implement form validation without causing a page refresh?

Encountering an Issue with jQuery 1.9.1 when Checking the #idCheckbox in Internet Explorer Versions 7 and 8

The user's input is not being bound properly when using $scope.$watch

Why do certain URLs bypass the filters despite not meeting the criteria in the Chrome extension?

Incorporating lazy loading for diverse content to enhance pagination

Moving the panel to follow the mouse cursor in Firefox Add-on SDK

Guide on how to clear and upload personalized information to Stormpath

Is there a way to ensure a dialog box is positioned in the center of the window?