I am making a simple program with a backend in ASP.NET Core Web API, and a frontend in JS React. I have a SQL-database in my backend with a table called Events (Arrangementer in Norwegian). The events table has three columns: ID, name, and description.

I have opened and started the react-project. In my App.js (which is the only file I have edited since opening the project), I am trying to fetch some event data from my SQL-database. When I try to console.log() the json-response, nothing gets outputted to the console. I have tried using an ASYNC function, but that doesnt work either. My backend is up and running, and I have data inside of the tables, i can see that when i click the fetch-url.

Here is the App.js file:

import logo from './logo.svg';
import './App.css';
import {useEffect, useState} from 'react'
function App() {

  useEffect(() => {

    fetch("https://localhost:7031/api/Arrangements")
    .then((res) => res.json())
    .then((json) => {
      console.log(json)
    })           
  }, [])

  return (
    <div className="App">
      <header className="App-header">
    
      testing project

      </header>
    </div>
  );
}

export default App;

The getter in the Swagger UI

CodePudding user response：

if you console log the res, you will se some resonpse. But i dont think you can use json in the last .then, beacause res.json() does'nt save your data anywhere.

Try using a useState, and set that state in the last .then.

CodePudding user response：

I believe something is wrong with the endpoint. First thing that strikes me is that the url you are using starts with https:// but adresses localhost. I'm aware that's possible, but are you sure it's not http:// ?

To be sure of that, please test your endpoint using Postman or the Chrome Dev tools network tab - both should give you sufficient information about the status of your endpoint.

Your frontend code looks good and should work, so I believe you have a backend problem.