How can i list data from table in the database in a browser

Question

I'm developing a web application using reactjs nodejs and mysql database.

I want to list the data created in a table i created in the database in the browser via a link(http://localhost:5000/api/v/companies) .What code should i write in a page created in reactsjs? Here is the code in the file index.js the backend of the table i created :

const express = require("express");
const app = express();
const cors = require("cors");
const pe = require('parse-error');
const logger = require('morgan');
const database = require('./mysql');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({
    extended: false,
    limit: '800mb'
}));

// CORS
app.options("*", cors());
app.use(cors());

database.connect(function(err) {
    if (err) throw err;
    console.log("==> MySQL Connected Successfully!");

    // The main page
    app.get('/', function (req, res) {
        res.json({
            version: 'v1',
            status: true
        });
    });

    const stations = require('./routes/stations');
    const companies = require('./routes/companies');

    app.use('/api/v1', [stations, companies]);
});
app.listen(5000, () => {
    console.log("Server is running on port 5000");
});

process.on('unhandledRejection', error => {
    console.error('Uncaught Error', pe(error));
});

as well as other files created in the backend

const database = require('./../mysql');

/**
 * List all companies
 */
const getAllCompanies = async function(req, res, next) {
  try {
    database.query('SELECT * FROM infos_stations.Companies', function (err, result, fields) {
      if (err) throw err;

      return res.status(200).json(result);
    });
  } catch (err) {
    return res.status(500).send({
      code: 500,
      status: false,
      data: "Internal Server Error"
    });
  }
};

module.exports = {
  getAllCompanies,
};

score 0 · Answer 1 · answered May 15 '22 at 16:21

In the reactjs application, you have to install any library for HTTP requests. Axios is a Javascript library used to make HTTP requests from node.js or XMLHttpRequests from the browser that also supports the ES6 Promise.

In the backend, You have to create a route that accepts the HTTP request from Frontend.

 app.post('/getdata', function (req, res) {



   // database queries etc.
   //sending response(database result)at frontend.



}

In reactjs you can create an HTTP request on a button click or can create a request on component renders using the UseEffect hook.

axios({
   method: 'POST',
   url: 'htttp//localhost/getdata',
   responseType: 'stream'
 })
   .then(function (response) {
                // response.data have all data of database.
    //store response data in any reactjs state.
   });

Use Map Function of state array in which you store a response that contains all database records. How to map lists How to render an array of objects in React?

How can i list data from table in the database in a browser

1 Answers1