Get JSON Object from URL using Express

Question

In the express users.js file:

router.get('/', function(req, res, next) {
  fetch('https://www.somwhere.com/users')
      .then(res => res.json())
      .catch(error => console.log(error));
});

module.exports = router;

In my App.js file for my React App I use

componentDidMount() {
        fetch('/users')
            .then(res => res.json())
            .then(users => this.setState({ users }));
    }

Right now it throws a 500 error and its not catching the error

Can I get some help fixing this

Use fetch with external URL in your route then return response with res.json — Ahmet Zeybek
– Ahmet Zeybek, Commented Jan 25, 2020 at 3:02
thanks for the help, I have edited my code above with what I am running into right now. — kris_needs_help
– kris_needs_help, Commented Jan 25, 2020 at 4:30
Use fetch('/localhost:3000/') in your App.js not fetch('/users') — zerosand1s
– zerosand1s, Commented Jan 25, 2020 at 5:50
zerosand1s: I don't think so, I think he uses app.use('/users', userRouter), that's why he doesn't use router.get('/users'). — Titus Sutio Fanpula
– Titus Sutio Fanpula, Commented Jan 25, 2020 at 6:20

Titus Sutio Fanpula · Accepted Answer · 2020-01-25 06:30:56Z

You can use axios in your FrontEnd("React") and BackEnd("Express"). This code below only an example code that you can follow:

🔴 Backend: Express Server Using axios

const express = require('express');
const app = express();
const axios = require('axios');
const cors = require('cors');

app.use(cors( { origin: '*'}));

const END_POINT = 'https://jsonplaceholder.typicode.com/users';

app.get('/users', async (req, res) => {
  try {
    const { data } = await axios.get(END_POINT);
    res.status(200).send(data);
  } catch(ex) {
    res.status(500).send(ex.data);
  }
})

app.listen(3000, () => {
  console.log('Server is up');
});

The code above only an example if you want to using axios in your backend.

📤 Updated: Using fetch

If you still want to using fetch, then you can use code below 👇:

router.get('/', async (req, res) => {
  try {
    const result = await fetch('https://jsonplaceholder.typicode.com/users');
    const json = await result.json();
    res.status(200).send(json);
  } catch(ex) {
    console.log(ex);
    res.status(500).send(ex.message);
  }
})

module.exports = router;

🔵 FrontEnd: React Using axios

async componentDidMount() {
  try {
    // change the endpoint with yours
    const { data } = await axios.get('http://localhost:3000/users');
    console.log(data);
    // do some stuff here: set state or some stuff you want
  } catch(ex) {
    console.log(ex);
  }
}

💡 Dont Forget to install and import axios in your React App.

📤 Updated: If you still want to using fetch in your React App, than you can use this code below:

async componentDidMount() {
  try {
    // change the endpoint with yours
    const result = await fetch('http://localhost:3000/users');
    const json = await result.json();
    console.log(json);
    // do some stuff here: set state or some stuff you want
  } catch(ex) {
    console.log(ex);
  }
}

I hope it's can help you 🙏.

Collectives™ on Stack Overflow

Get JSON Object from URL using Express

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related