How to call get api in react js using ID? - reactjs

Question

I am trying to fetch customer record using ID but it gives me error 404 and even if I try using like "https://localhost:44387/api/Customers/5" in browser it gives result only for ID 5 and below error message for other id
{
"type":"https://tools.ietf.org/html/rfc7231#section-6.5.4",
"title":"Not Found",
"status":404,
"traceId":"|a1f6c563-4f8db349ec6c707f."
}
this is the call Customer. If I click on any edit it passes the ID but when It try to fetch the specific user data it gives me error. In onEditCustomer
import React from 'react';
import { Table, Button } from 'semantic-ui-react';
import AddCustomer from './AddCustomer';
export default class Customer extends React.Component {
constructor(props) {
super(props);
this.state = {
error: null,
isLoaded: false,
formClose:false,
isAddCustomer:false,
isEditCustomer:false,
singleCustomer:{},
users: []
}
}
//fetch data
componentDidMount() {
const customerApi = 'https://localhost:44387/api/Customers';
const myHeader = new Headers();
myHeader.append('Content-type', 'application/json');
myHeader.append('Accept', 'application/json');
myHeader.append('Origin','https://localhost:44387');
const options = {
method: 'GET',
myHeader
};
fetch(customerApi, options)
.then(res => res.json())
.then(
(result) => {
this.setState({
users: result,
isLoaded: true
});
},
(error) => {
this.setState({
isLoaded: true,
error
});
}
)
}
//close form
closeForm = event => {
this.props.closeCreateForm();
}
//New Customer record
onAddFormSubmit = data => {
const customerApi = 'https://localhost:44387/api/Customers';
const myHeader = new Headers({
'Accept':'application/json',
'Content-type':'application/json'
});
fetch(customerApi,{
method:'post',
headers:myHeader,
body:JSON.stringify(data)
})
.then(res => res.json())
.then(
(result) => {
console.log("Customer add result");
console.log(result);
this.setState({})
},(error) => {
this.setState({ error });
}
)
}
//Edit customer record
onEditCustomer = custId => {
const customerApi = 'https://localhost:44387/api/Customers/';
const customerRecord = new FormData();
customerRecord.append("customerId", custId );
const myHeader = new Headers({
'Accept':'application/json',
'Content-type':'application/json; charset=utf-8'
});
fetch(customerApi,{
method:'POST',
headers:myHeader,
body:customerRecord
})
.then(res => res.json())
.then(
(result) => {
this.setState({
singleCustomer:result,
isEditCustomer:true,
isAddCustomer:true
})
},(error) => {
this.setState({ error });
}
)
}
render() {
const { users } = this.state;
let customerForm;
if (this.state.isEditCustomer || this.state.isAddCustomer){
customerForm = <AddCustomer onAddFormSubmit = {this.onAddFormSubmit} singleCustomer = {this.state.singleCustomer}/>
}
return (
<div>
<Table celled textAlign='center'>
<Table.Header>
<Table.Row>
<Table.HeaderCell>ID</Table.HeaderCell>
<Table.HeaderCell>Name</Table.HeaderCell>
<Table.HeaderCell>Address</Table.HeaderCell>
<Table.HeaderCell>Action</Table.HeaderCell>
<Table.HeaderCell>Action</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body >
{
users.map(user => (
<Table.Row key={user.customerId}>
<Table.Cell>{user.customerId}</Table.Cell>
<Table.Cell>{user.name}</Table.Cell>
<Table.Cell>{user.address}</Table.Cell>
<Table.Cell>
<Button color='blue' onClick = {()=>this.onEditCustomer(user.customerId)}>Edit</Button>
</Table.Cell>
<Table.Cell>
<Button color='red'>Delete</Button>
</Table.Cell>
</Table.Row>
))
}
</Table.Body>
<Table.Footer>
<Table.Row>
<Table.HeaderCell colSpan='5'>
No of Pages
</Table.HeaderCell>
</Table.Row>
</Table.Footer>
</Table>
</div>
)
}
}
Here is ASP.NET Core controller for API
namespace CRUDReact.Controllers
{
[Route("api/[controller]")]
[ApiController]
public class CustomersController : ControllerBase
{
private readonly DataBaseContext _context;
public CustomersController(DataBaseContext context)
{
_context = context;
}
// GET: api/Customers
[HttpGet]
public async Task<ActionResult<IEnumerable<Customer>>> GetCustomer()
{
return await _context.Customer.ToListAsync();
}
// GET: api/Customers/5
[HttpGet("{id}")]
public async Task<ActionResult<Customer>> GetCustomer(int id)
{
var customer = await _context.Customer.FindAsync(id);
if (customer == null)
{
return NotFound();
}
return customer;
}
// PUT: api/Customers/5
// To protect from overposting attacks, please enable the specific properties you want to bind to, for
// more details see https://aka.ms/RazorPagesCRUD.
[HttpPut("{id}")]
public async Task<IActionResult> PutCustomer(int id, Customer customer)
{
customer.CustomerId = id;
_context.Entry(customer).State = EntityState.Modified;
try
{
await _context.SaveChangesAsync();
}
catch (DbUpdateConcurrencyException)
{
if (!CustomerExists(id))
{
return NotFound();
}
else
{
throw;
}
}
return NoContent();
}
// POST: api/Customers
// To protect from overposting attacks, please enable the specific properties you want to bind to, for
// more details see https://aka.ms/RazorPagesCRUD.
[HttpPost]
public async Task<ActionResult<Customer>> PostCustomer(Customer customer)
{
_context.Customer.Add(customer);
await _context.SaveChangesAsync();
return CreatedAtAction("GetCustomer", new { id = customer.CustomerId }, customer);
}
// DELETE: api/Customers/5
[HttpDelete("{id}")]
public async Task<ActionResult<Customer>> DeleteCustomer(int id)
{
var customer = await _context.Customer.FindAsync(id);
if (customer == null)
{
return NotFound();
}
_context.Customer.Remove(customer);
await _context.SaveChangesAsync();
return customer;
}
private bool CustomerExists(int id)
{
return _context.Customer.Any(e => e.CustomerId == id);
}
}
}

Answer 1

Perhaps you should update your endpoint to append customer ID?
const customerApi = 'https://localhost:44387/api/Customers/' + custId;