C#, React, Getting data from a JSON file

I’m pretty new to C# development and I’m trying to get data from a JSON … Read more C#, React, Getting data from a JSON file

I’m pretty new to C# development and I’m trying to get data from a JSON file to show on a React page for a portfolio site. I was trying to follow this tutorial for the C# portion,I plan on completely redoing the React & CSS portion to fit how I want it to look (already changed the react class component to a functional one), but when going to the /api/aboutMe URL, it was blank. I can’t seem to figure out how to make the fetch request to work with the Controller, I’ve looked it up and found different ways of writing the controller which would negate the need for a JSON file, but I was wondering if there was advise to make it work with the JSON file.

Any help/advise would be appreciated.

I have a Controller:

using Microsoft.AspNetCore.Mvc;
using Newtonsoft.Json;
using PortfolioSite.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace PortfolioSite.Controllers
{
    [ApiController]
    [Route("api/aboutMe")]
    public class AboutController
    {
        [HttpGet]
        public AboutMe GetAboutInfo()
        {
            string jsonText = System.IO.File.ReadAllText("./Data/AboutMe.json");
            return JsonConvert.DeserializeObject<AboutMe>(jsonText);
        }
    }
}

A Model:

using System;

namespace PortfolioSite.Models
{
    public class AboutMe
    {
        public String Name { get; set; }
        public String Title { get; set; }
        public String Location { get; set; }
        public String Description { get; set; }
    }
}

The react component:

import React, { Component, useState, useEffect  } from 'react';
import {
    Row, Col, Card, CardImg, CardText, CardBody,
    CardTitle, CardSubtitle, Button
} from 'reactstrap';

const AboutMe = () => {

    const [hasError, setErrors] = useState(false);
    const [name, setName] = useState("");
    const [title, setTitle] = useState("");
    const [location, setLocation] = useState("");
    const [description, setDescription] = useState("");

    const fetchData =()=> {
        fetch("api/aboutMe")
            .then((res) => res.json())
            .then(res => setTitle(res.title))
            .then(res => setName(res.name))
            .then(res => setLocation(res.location))
            .then(res => setDescription(res.description))
            .catch(err => setErrors(err));
    }

        useEffect(() => {
            fetchData();
        });
        
    return (
        <div style={{ padding: "15px" }}>
            <Row>
                <Col md={2}>
                    <img style={{ height: "100px" }} src='' />
                </Col>
                <Col md={3} className="center-mobile-text">
                    <div >
                        <h5>Name : {name}</h5>
                        <p> Location: {location}</p>
                        <p> Title : {title} </p>
                    </div>
                    <a style={{ color: "#007bb5" }} target="_blank" href="">
                        <span className="fa-stack fa-lg">
                            <i className="fas fa-circle fa-stack-2x"></i>
                            <i className="fab fa-linkedin-in fa-stack-1x fa-inverse"></i>
                        </span>
                    </a>
                    <a style={{ color: "black" }} target="_blank" href="">
                        <span className="fa-stack fa-lg">
                            <i className="fas fa-circle fa-stack-2x"></i>
                            <i className="fab fa-github fa-stack-1x fa-inverse"></i>
                        </span>
                    </a>
                    <a style={{ color: "red" }} target="_blank" href="">
                        <span className="fa-stack fa-lg">
                            <i className="fas fa-circle fa-stack-2x"></i>
                            <i className="fas fa-envelope fa-stack-1x fa-inverse"></i>
                        </span>
                    </a>
                </Col>
                <Col md={7}>
                    <p className="textStyle">{description}</p>
                </Col>
            </Row>
        </div>
    );
}

export default AboutMe;

And a JSON file in a Data Folder:

{
  "Name": "Test data",
  "Title": "Test data job",
  "Location": "Test data location",
  "Description": ""
}

Source: React – Stack Overflow


Categories: NewsTags: , , ,

Tags: , , ,


Leave a Reply

Your email address will not be published. Required fields are marked *