Exploring MVC with .Net for the first time. Here is my C# controller implementation:
namespace TFL.Controllers
{
[Route("api/[controller]")]
public class TubeApiController : Controller
{
[HttpGet("[action]")]
public async Task<IActionResult> GetTubeStatus()
{
using (var client = new HttpClient())
{
try
{
client.BaseAddress = new Uri("https://api.tfl.gov.uk");
var response = await client.GetAsync("/Line/Mode/tube/Status");
response.EnsureSuccessStatusCode();
var stringResult = await response.Content.ReadAsStringAsync();
var rawData = JsonConvert.DeserializeObject<List<RootObject>>(stringResult);
return Ok(new
{
LineId = rawData[0].name
});
}
catch (HttpRequestException httpRequestException)
{
return BadRequest("Error getting data");
}
}
}
}
public class RootObject
{
[JsonProperty("name")]
public string name { get; set; }
public List<LineStatus> lineStatuses { get; set; }
}
public class LineStatus
{
public string statusSeverityDescription { get; set; }
}
}
My goal is to fetch this data and display it on the front end:
import React, { Component } from "react";
export class Home extends Component {
constructor(props) {
super(props);
this.state = {
lineId: "",
status: ""
};
}
getData(e) {
e.preventDefault();
fetch("api/tubeapi/gettubestatus")
.then(res => res.text())
.then(text => console.log(text))
}
render() {
return (
<div>
<center>
<h1>Tube</h1>
<h4>Name</h4>
<p>{this.state.lineId}</p>
<h4>Status</h4>
<p>{this.state.status}</p>
</center>
</div>
);
}
}
When I visit localhost:5000/api/tubeapi/gettubestatus I receive the expected JSON response: {lineId: "Bakerloo" }(which is what I need for practice), however, the code does not fetch this data as intended. I've tried to debug by logging the text fetched by the API call but nothing shows up in the console. Any suggestions on where I might be going wrong would be greatly appreciated. Thanks
**Edit: my package.json file for one of the comments: **
{
"name": "tfl",
"version": "0.1.0",
"private": true,
"dependencies": {
"babel-eslint": "10.0.1",
"bootstrap": "^4.1.3",
"jquery": "^3.4.1",
"merge": "^1.2.1",
"oidc-client": "^1.9.0",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-router-bootstrap": "^0.24.4",
"react-router-dom": "^4.2.2",
"react-scripts": "^3.0.1",
"reactstrap": "^6.3.0",
"rimraf": "^2.6.2"
},
"devDependencies": {
"ajv": "^6.9.1",
"cross-env": "^5.2.0",
"eslint": "^5.12.0",
"eslint-config-react-app": "^4.0.1",
"eslint-plugin-flowtype": "^2.0.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-react": "^7.11.1",
"typescript": "^3.5.2"
},
"eslintConfig": {
"extends": "react-app"
},
"scripts": {
"start": "rimraf ./build && react-scripts start",
"build": "react-scripts build",
"test": "cross-env CI=true react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"lint": "eslint ./src/"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}