Data not showing from web api to React in front-end - javascript

I'm trying to fetch data from webapi to display in react js tables, everything seems to work fine only text is not being displayed in these table the look empty[!
What might be the problem here, because I can't figure it out for days.
Image of Table
this is the error Im getting in console
This is my Department.js file
import React,{Component} from 'react';
import { Table } from 'react-bootstrap';
import { ModalBody, ModalTitle } from 'react-bootstrap';
import { variables } from './variables';
export class Department extends Component{
constructor(props){
super(props);
this.state={
departments:[],
modalTitle:"",
DepartmentName:"",
DepartmentId:0,
DepartmentIdFilter:"",
DepartmentNameFilter:"",
departmentsWithoutFilter:[]
}
}
FilterFn(){
var DepartmentIdFilter=this.state.DepartmentIdFilter;
var DepartmentNameFilter = this.state.DepartmentNameFilter;
var filteredData=this.state.departmentsWithoutFilter.filter(
function(el){
return el.DepartmentId.toString().toLowerCase().includes(
DepartmentIdFilter.toString().trim().toLowerCase()
)&&
el.DepartmentName.toString().toLowerCase().includes(
DepartmentNameFilter.toString().trim().toLowerCase()
)
}
);
this.setState({departments:filteredData});
}
sortResult(prop,asc){
var sortedData=this.state.departmentsWithoutFilter.sort(function(a,b){
if(asc){
return (a[prop]>b[prop])?1:((a[prop]<b[prop])?-1:0);
}
else{
return (b[prop]>a[prop])?1:((b[prop]<a[prop])?-1:0);
}
});
this.setState({departments:sortedData});
}
changeDepartmentIdFilter = (e)=>{
this.state.DepartmentIdFilter=e.target.value;
this.FilterFn();
}
changeDepartmentNameFilter = (e)=>{
this.state.DepartmentNameFilter=e.target.value;
this.FilterFn();
}
refreshList(){
fetch(variables.API_URL+'departments')
.then(response=>response.json())
.then(data=>{
this.setState({departments:data,departmentsWithoutFilter:data});
});
}
componentDidMount(){
this.refreshList();
}
changeDepartmentName =(e)=>{
this.setState({DepartmentName:e.target.value});
}
addClick(){
this.setState({
modalTitle:"Add Department",
DepartmentId:0,
DepartmentName:""
});
}
editClick(dep){
this.setState({
modalTitle:"Edit Department",
DepartmentId:dep.DepartmentId,
DepartmentName:dep.DepartmentName
});
}
createClick(){
fetch(variables.API_URL+'departments',{
method:'POST',
headers:{
'Accept':'application/json',
'Content-Type':'application/json'
},
body:JSON.stringify({
DepartmentName:this.state.DepartmentName
})
})
.then(res=>res.json())
.then((result)=>{
alert(result);
this.refreshList();
},(error)=>{
alert('Failed');
})
}
updateClick(){
fetch(variables.API_URL+'departments',{
method:'PUT',
headers:{
'Accept':'application/json',
'Content-Type':'application/json'
},
body:JSON.stringify({
DepartmentId:this.state.DepartmentId,
DepartmentName:this.state.DepartmentName
})
})
.then(res=>res.json())
.then((result)=>{
alert(result);
this.refreshList();
},(error)=>{
alert('Failed');
})
}
deleteClick(id){
if(window.confirm('Are you sure?')){
fetch(variables.API_URL+'departments/'+ id,{
mode:'no-cors',
method:'DELETE',
headers:{
'Accept':'application/json',
'Content-Type':'application/json'
}
})
.then(res=>res.json())
.then((result)=>{
alert(result);
this.refreshList();
},(error)=>{
alert('Failed');
})
}
}
render(){
const {
departments,
modalTitle,
DepartmentId,
DepartmentName
}=this.state;
return(
<div>
<button type="button"
className="btn btn-primary m-2 float-end"
data-bs-toggle="modal"
data-bs-target="#exampleModal"
onClick={()=>this.addClick()}>
Add Department
</button>
<table className="table table-striped">
<thead>
<tr key={Department.id}>
<th>
<div className="d-flex flex-row">
<input className="form-control m-2"
onChange={this.changeDepartmentIdFilter}
placeholder="Filter"/>
<button type="button" className="btn btn-light"
onClick={()=>this.sortResult('DepartmentId',true)}>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-arrow-down-square-fill" viewBox="0 0 16 16">
<path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L7.5 10.293V4.5a.5.5 0 0 1 1 0z"/>
</svg>
</button>
<button type="button" className="btn btn-light"
onClick={()=>this.sortResult('DepartmentId',false)}>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-arrow-up-square-fill" viewBox="0 0 16 16">
<path d="M2 16a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2zm6.5-4.5V5.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 5.707V11.5a.5.5 0 0 0 1 0z"/>
</svg>
</button>
</div>
DepartmentId
</th>
<th>
<div className="d-flex flex-row">
<input className="form-control m-2"
onChange={this.changeDepartmentNameFilter}
placeholder="Filter"/>
<button type="button" className="btn btn-light"
onClick={()=>this.sortResult('DepartmentName',true)}>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-arrow-down-square-fill" viewBox="0 0 16 16">
<path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L7.5 10.293V4.5a.5.5 0 0 1 1 0z"/>
</svg>
</button>
<button type="button" className="btn btn-light"
onClick={()=>this.sortResult('DepartmentName',false)}>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-arrow-up-square-fill" viewBox="0 0 16 16">
<path d="M2 16a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2zm6.5-4.5V5.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 5.707V11.5a.5.5 0 0 0 1 0z"/>
</svg>
</button>
</div>
DepartmentName
</th>
<th>
Options
</th>
</tr>
</thead>
<tbody>
{departments.map(dep=>
<tr key={dep.DepartmentId}>
<td>{dep.DepartmentId}</td>
<td>{dep.DepartmentName}</td>
<td>
<button type="button"
className="btn btn-light mr-1"
data-bs-toggle="modal"
data-bs-target="#exampleModal"
onClick={()=>this.editClick(dep)}>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-pencil-square" viewBox="0 0 16 16">
<path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"/>
<path fillRule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z"/>
</svg>
</button>
<button type="button"
className="btn btn-light mr-1"
onClick={()=>this.deleteClick(dep.DepartmentId)}>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-trash-fill" viewBox="0 0 16 16">
<path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z"/>
</svg>
</button>
</td>
</tr>
)}
</tbody>
</table>
<div className="modal fade" id="exampleModal" tabIndex="-1" aria-hidden="true">
<div className="modal-dialog modal-lg modal-dialog-centered">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title">{modalTitle}</h5>
<button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"
></button>
</div>
<div className="modal-body">
<div className="input-group mb-3">
<span className="input-group-text">DepartmentName</span>
<input type="text" className="form-control"
value={DepartmentName}
onChange={this.changeDepartmentName}/>
</div>
{DepartmentId===0?
<button type="button"
className="btn btn-primary float-start"
onClick={()=>this.createClick()}
>Create</button>
:null}
{DepartmentId!==0?
<button type="button"
className="btn btn-primary float-start"
onClick={()=>this.updateClick()}
>Update</button>
:null}
</div>
</div>
</div>
</div>
</div>
)
}
}```
This is my Program.cs
using Microsoft.EntityFrameworkCore;
using WebApp.Data;
var myAllowSpecificOrigins = "_myAllowSpecificOrigins";
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddControllers();
// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();
builder.Services.AddDbContext<DataContext>(options =>
{
options.UseSqlServer(builder.Configuration.GetConnectionString("DefaultConnection"));
});
//Enable CORS
builder.Services.AddCors(options =>
{
options.AddPolicy(name: myAllowSpecificOrigins,
builder =>
{
builder.WithOrigins("http://localhost:3000")
.AllowAnyMethod()
.AllowAnyHeader();
});
});
var app = builder.Build();
// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
app.UseSwagger();
app.UseSwaggerUI();
}
app.UseHttpsRedirection();
app.UseCors(myAllowSpecificOrigins);
app.UseAuthorization();
app.MapControllers();
app.Run();
What might be the problem here, because I can't figure it out for days.
Does anyone had the same issue?
It looks like I have done something wrong in react js file

Related

How to print a div that has a canvas using JavaScript and html?

Hi I wanted to print a specific div that has a canvas consisting of a chart. I had written a script to print the specific div in my HTML body tag but it returns everything except the graph.
This is what I want:
This is what I get:
How can I achieve the results shown in image 1? Thanks in advance.
This is my code for the script:
<script>
//Print specific div
function printFunc() {
var tagname = $('#div-report').prop("tagName").toLowerCase();
var attributes = "";
var attrs = document.getElementById("div-report").attributes;
$.each(attrs, function(i, elem) {
attributes += " " + elem.name + " ='" + elem.value + "' ";
})
var divToPrint = $('#div-report').html();
var head = "<html><head>" + $("head").html() + "</head>";
var allcontent = head + "<body onload='window.print()' >" + "<" + tagname + attributes + ">" + divToPrint + "</" + tagname + ">" + "</body></html>";
var newWin = window.open('', 'Print-Window');
newWin.document.open();
newWin.document.write(allcontent);
newWin.document.close();
};
</script>
This is my code for the front-end HTML(in case you need it):
<body class="d-flex flex-column">
<div class="container p-2 pb-0 mt-5 pt-3" id="admin-dashboard">
<h2 class="pt-3 pb-5 display-6">Report Summary</h2>
<div class="row g-2 mb-5 justify-content-md-end">
<div class="col-auto">
<button type="button" onclick="printFunc()" class="btn btn-outline-primary" style="--bs-btn-padding-y: .5rem; --bs-btn-padding-x: 1rem; --bs-btn-font-size: .75rem;">Print</button>
</div>
</div>
</div>
<div class="container pb-0" id="div-report">
<div ALIGN=CENTER>
<b>
<h6>Report Summary Generated on DD/MM/YYYY
</b>
</div>
<br />
<div ALIGN=CENTER>
<p>
Demo
</p>
</div>
<a class=" nav nav-item text-decoration-none text-muted" href="cstaff-report-generation.php">
<i class="bi bi-arrow-left-square me-2"></i>Go back</a>
<div class="row row-cols-2 row-cols-md-3 g-3 py-3">
<div class="col">
<div class="card border-info">
<div class="card-body">
<h6 class="card-title">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-cash" viewBox="0 0 16 16">
<path d="M8 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" />
<path d="M0 4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V4zm3 0a2 2 0 0 1-2 2v4a2 2 0 0 1 2 2h10a2 2 0 0 1 2-2V6a2 2 0 0 1-2-2H3z" />
</svg>
Total Sales Revenue
</h6>
<p class="card-text my-2">
Demo
</p>
</div>
</div>
</div>
<div class="col">
<div class="card border-info">
<div class="card-body">
<h6 class="card-title">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-receipt" viewBox="0 0 16 16">
<path d="M1.92.506a.5.5 0 0 1 .434.14L3 1.293l.646-.647a.5.5 0 0 1 .708 0L5 1.293l.646-.647a.5.5 0 0 1 .708 0L7 1.293l.646-.647a.5.5 0 0 1 .708 0L9 1.293l.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .801.13l.5 1A.5.5 0 0 1 15 2v12a.5.5 0 0 1-.053.224l-.5 1a.5.5 0 0 1-.8.13L13 14.707l-.646.647a.5.5 0 0 1-.708 0L11 14.707l-.646.647a.5.5 0 0 1-.708 0L9 14.707l-.646.647a.5.5 0 0 1-.708 0L7 14.707l-.646.647a.5.5 0 0 1-.708 0L5 14.707l-.646.647a.5.5 0 0 1-.708 0L3 14.707l-.646.647a.5.5 0 0 1-.801-.13l-.5-1A.5.5 0 0 1 1 14V2a.5.5 0 0 1 .053-.224l.5-1a.5.5 0 0 1 .367-.27zm.217 1.338L2 2.118v11.764l.137.274.51-.51a.5.5 0 0 1 .707 0l.646.647.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.509.509.137-.274V2.118l-.137-.274-.51.51a.5.5 0 0 1-.707 0L12 1.707l-.646.647a.5.5 0 0 1-.708 0L10 1.707l-.646.647a.5.5 0 0 1-.708 0L8 1.707l-.646.647a.5.5 0 0 1-.708 0L6 1.707l-.646.647a.5.5 0 0 1-.708 0L4 1.707l-.646.647a.5.5 0 0 1-.708 0l-.509-.51z" />
<path d="M3 4.5a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zm8-6a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5z" />
</svg>
Total Number of Order Placed
</h6>
<p class="card-text my-2">
Demo
</p>
</div>
</div>
</div>
<div class="col">
<div class="card border-info">
<div class="card-body">
<h6 class="card-title">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-person-check" viewBox="0 0 16 16">
<path d="M6 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H1s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C9.516 10.68 8.289 10 6 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z" />
<path fill-rule="evenodd" d="M15.854 5.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L12.5 7.793l2.646-2.647a.5.5 0 0 1 .708 0z" />
</svg>
Total Number of Customer Visited
</h6>
<p class="card-text my-2">
Demo
</p>
</div>
</div>
</div>
<div class="col">
<div class="card border-info">
<div class="card-body">
<h6 class="card-title">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-diagram-2" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M6 3.5A1.5 1.5 0 0 1 7.5 2h1A1.5 1.5 0 0 1 10 3.5v1A1.5 1.5 0 0 1 8.5 6v1H11a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0V8h-5v.5a.5.5 0 0 1-1 0v-1A.5.5 0 0 1 5 7h2.5V6A1.5 1.5 0 0 1 6 4.5v-1zM8.5 5a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1zM3 11.5A1.5 1.5 0 0 1 4.5 10h1A1.5 1.5 0 0 1 7 11.5v1A1.5 1.5 0 0 1 5.5 14h-1A1.5 1.5 0 0 1 3 12.5v-1zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1zm4.5.5a1.5 1.5 0 0 1 1.5-1.5h1a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1-1.5 1.5h-1A1.5 1.5 0 0 1 9 12.5v-1zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1z" />
</svg>
Best-Selling Menu Item
</h6>
<p class="card-text my-2">
Demo
</p>
</div>
</div>
</div>
<div class="col">
<div class="card border-info">
<div class="card-body">
<h6 class="card-title">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-hourglass-split" viewBox="0 0 16 16">
<path d="M2.5 15a.5.5 0 1 1 0-1h1v-1a4.5 4.5 0 0 1 2.557-4.06c.29-.139.443-.377.443-.59v-.7c0-.213-.154-.451-.443-.59A4.5 4.5 0 0 1 3.5 3V2h-1a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-1v1a4.5 4.5 0 0 1-2.557 4.06c-.29.139-.443.377-.443.59v.7c0 .213.154.451.443.59A4.5 4.5 0 0 1 12.5 13v1h1a.5.5 0 0 1 0 1h-11zm2-13v1c0 .537.12 1.045.337 1.5h6.326c.216-.455.337-.963.337-1.5V2h-7zm3 6.35c0 .701-.478 1.236-1.011 1.492A3.5 3.5 0 0 0 4.5 13s.866-1.299 3-1.48V8.35zm1 0v3.17c2.134.181 3 1.48 3 1.48a3.5 3.5 0 0 0-1.989-3.158C8.978 9.586 8.5 9.052 8.5 8.351z" />
</svg>
Peak Hour
</h6>
<p class="card-text my-2">
Demo
</p>
</div>
</div>
</div>
</div>
<br />
<h4 class="border-top fw-light pt-3 mt-2">Menu Performance</h4>
<div class="container p-2 pb-0 mt-2 mb-5 pt-3" style="text-align: center;">
<canvas id="mpChart"></canvas>
</div>
</div>

How can I make this React code shorter? I feel like I'm repeating myself

Hi I know there is a way to make this code shorter. I'm repeating myself and it's practically the same. It's supposed to be the profile page where I show my picture, and social media:
const Profile = () => {
return (
<div className="profile">
<div className="img-profile">
<img src="https://avatars.githubusercontent.com/u/65257680?v=4" alt="" class="img-fluid"></img>
</div>
<div className="flexbox-perfil">
<a href="https://www.linkedin.com/in/paulasierra7/" className="me-3">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" className="bi bi-linkedin" viewBox="0 0 16 16">
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z"/>
</svg>
</a>
<a href="https://github.com/paulasierra7/proyecto_react" className="me-3">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" className="bi bi-github" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
</svg>
</a>
<a href="https://www.instagram.com/paulasierra7/">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" className="bi bi-instagram" viewBox="0 0 16 16">
<path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"/>
</svg>
</a>
</div>
</div>
)
}
export default Profile
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
Thanks!!

You can make a component that has an anchor element on top of an svg, since you have repeated this multiple times. Make a component like this:
const ClickableSvg = ({link, svg}) => {
return (
<>
<a href={link.url}>{link.text}</a>
{svg}
</>)
}
Then you could do something like this:
const Profile = () => {
const data = [...] //this contains objects with a link and svg.
return (
<div className="profile">
<div className="img-profile">
<img src="https://avatars.githubusercontent.com/u/65257680?v=4" alt="" class="img-fluid"></img>
</div>
<div className="flexbox-perfil">
{data.map((d)=> <ClickableSvg link={d.link} svg={d.svg} />)}
</div>
</div>
)
}
export default Profile
Where data in the code above is an array of objects that contain a link and svg property.

Filter table rows with vuejs

Hi i want to filter and sor a table in vue js. I do this but when i text in the textbox the letter that i want to search the table is empty. I want to filter the rows and display the ones that matches whatever is in this input.
I hope I am making sense. I do not know how to proceed from here. Cookies and a big thank you to anyone who helps!
<script>
import axios from 'axios'
export default {
name: 'Utenti',
data() {
return {
utenti: [],
modalTitle: '',
UtenteTessera: 0,
UtenteNome: '',
UtenteCognome: '',
UtenteEmail: '',
UtenteTelefono: '',
UtenteNomeFilter: '',
UtenteTesseraFilter: '',
utentiWithoutFilter: [],
}
},
methods: {
refreshData() {
axios.post('https://localhost:7285/Utenti/GetDati').then((response) => {
this.utenti = response.data.prova
this.utentiWithoutFilter = response.data.prova
})
},
FilterFn() {
const UtenteTesseraFilter = this.UtenteTesseraFilter
const UtenteNomeFilter = this.UtenteNomeFilter
this.utenti = this.utentiWithoutFilter.filter(function (el) {
return (
el.UtenteTessera.toString()
.toLowerCase()
.includes(UtenteTesseraFilter.toString().trim().toLowerCase()) &&
el.UtenteNome.toString()
.toLowerCase()
.includes(UtenteNomeFilter.toString().trim().toLowerCase())
)
})
},
sortResult(prop, asc) {
this.utenti = this.utentiWithoutFilter.sort(function (a, b) {
if (asc) {
return a[prop] > b[prop] ? 1 : a[prop] < b[prop] ? -1 : 0
} else {
return b[prop] > a[prop] ? 1 : b[prop] < a[prop] ? -1 : 0
}
})
},
},
}
</script>
<template>
<div>
<table class="table table-striped">
<thead>
<tr>
<th>
<div class="d-flex flex-row">
<input
v-model="UtenteTesseraFilter"
class="form-control m-2"
placeholder="Filter"
#keyup="FilterFn()"
/>
<button
type="button"
class="btn btn-light"
#click="sortResult('UtenteTessera', true)"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-arrow-down-square-fill"
viewBox="0 0 16 16"
>
<path
d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L7.5 10.293V4.5a.5.5 0 0 1 1 0z"
/>
</svg>
</button>
<button
type="button"
class="btn btn-light"
#click="sortResult('UtenteTessera', false)"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-arrow-up-square-fill"
viewBox="0 0 16 16"
>
<path
d="M2 16a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2zm6.5-4.5V5.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 5.707V11.5a.5.5 0 0 0 1 0z"
/>
</svg>
</button>
</div>
Tessera
</th>
<th>
<div class="d-flex flex-row">
<input
v-model="UtenteNomeFilter"
class="form-control m-2"
placeholder="Filter"
#keyup="FilterFn()"
/>
<button
type="button"
class="btn btn-light"
#click="sortResult('UtenteNome', true)"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-arrow-down-square-fill"
viewBox="0 0 16 16"
>
<path
d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L7.5 10.293V4.5a.5.5 0 0 1 1 0z"
/>
</svg>
</button>
<button
type="button"
class="btn btn-light"
#click="sortResult('UtenteNome', false)"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-arrow-up-square-fill"
viewBox="0 0 16 16"
>
<path
d="M2 16a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2zm6.5-4.5V5.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 5.707V11.5a.5.5 0 0 0 1 0z"
/>
</svg>
</button>
</div>
UtenteNome
</th>
<th>Options</th>
</tr>
</thead>
</table>
<table class="table table-striped" style="z-index: 1">
<thead>
<tr>
<th>Tessera</th>
<th>Nome</th>
<th>Cognome</th>
<th>Email</th>
<th>Telefono</th>
</tr>
</thead>
<tbody>
<!--<tr v-for="info in info" :key="index">-->
<tr v-for="utente in utenti" :key="title">
<td>{{ utente.tessera }}</td>
<td>{{ utente.nome }}</td>
<td>{{ utente.cognome }}</td>
<td>{{ utente.email }}</td>
<td>{{ utente.telefono }}</td>
</tr>
</tbody>
</table>
</div>
</template>

You treat "filter" and "sort" as two different operations but those are two operations that need to be applied at the same time (so that sorting does not overwrite filtering result and vice versa). Also you are not using Vue reactivity at all. This is perfect use case for computed
This computed has 3 inputs:
unfiltered and no sorted original array
active filter
active sort
<script>
import axios from 'axios'
export default {
name: 'Utenti',
data() {
return {
utenti: [],
modalTitle: '',
UtenteTessera: 0,
UtenteNome: '',
UtenteCognome: '',
UtenteEmail: '',
UtenteTelefono: '',
UtenteNomeFilter: '',
UtenteTesseraFilter: '',
// NEW
sort: {
prop: undefined,
asc: true
}
}
},
computed: {
utentiToDisplay() {
// filter first - this creates new array
const result = this.utenti.filter(el =>
el.UtenteTessera.toString()
.toLowerCase()
.includes(
this.UtenteTesseraFilter.toString().trim().toLowerCase()
)
&&
el.UtenteNome.toString()
.toLowerCase()
.includes(
this.UtenteNomeFilter.toString().trim().toLowerCase()
)
)
// now sort the results in-place if needed
if(this.sort.prop) {
result.sort((a, b) => {
if (this.sort.asc) {
return a[prop] > b[prop] ? 1 : a[prop] < b[prop] ? -1 : 0
} else {
return b[prop] > a[prop] ? 1 : b[prop] < a[prop] ? -1 : 0
}
})
}
return result
}
},
methods: {
refreshData() {
axios.post('https://localhost:7285/Utenti/GetDati').then((response) => { this.utenti = response.data.prova })
},
setSort(prop, asc) {
this.sort.prop = prop
this.sort.asc = asc
}
},
}
</script>
<div>
<table class="table table-striped">
<thead>
<tr>
<th>
<div class="d-flex flex-row">
<input
v-model="UtenteTesseraFilter"
class="form-control m-2"
placeholder="Filter"
/>
<button
type="button"
class="btn btn-light"
#click="setSort('UtenteTessera', true)"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-arrow-down-square-fill"
viewBox="0 0 16 16"
>
<path
d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L7.5 10.293V4.5a.5.5 0 0 1 1 0z"
/>
</svg>
</button>
<button
type="button"
class="btn btn-light"
#click="setSort('UtenteTessera', false)"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-arrow-up-square-fill"
viewBox="0 0 16 16"
>
<path
d="M2 16a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2zm6.5-4.5V5.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 5.707V11.5a.5.5 0 0 0 1 0z"
/>
</svg>
</button>
</div>
Tessera
</th>
<th>
<div class="d-flex flex-row">
<input
v-model="UtenteNomeFilter"
class="form-control m-2"
placeholder="Filter"
/>
<button
type="button"
class="btn btn-light"
#click="setSort('UtenteNome', true)"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-arrow-down-square-fill"
viewBox="0 0 16 16"
>
<path
d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L7.5 10.293V4.5a.5.5 0 0 1 1 0z"
/>
</svg>
</button>
<button
type="button"
class="btn btn-light"
#click="setSort('UtenteNome', false)"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-arrow-up-square-fill"
viewBox="0 0 16 16"
>
<path
d="M2 16a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2zm6.5-4.5V5.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 5.707V11.5a.5.5 0 0 0 1 0z"
/>
</svg>
</button>
</div>
UtenteNome
</th>
<th>Options</th>
</tr>
</thead>
</table>
<table class="table table-striped" style="z-index: 1">
<thead>
<tr>
<th>Tessera</th>
<th>Nome</th>
<th>Cognome</th>
<th>Email</th>
<th>Telefono</th>
</tr>
</thead>
<tbody>
<!--<tr v-for="info in info" :key="index">-->
<tr v-for="utente in utentiToDisplay" :key="title">
<td>{{ utente.tessera }}</td>
<td>{{ utente.nome }}</td>
<td>{{ utente.cognome }}</td>
<td>{{ utente.email }}</td>
<td>{{ utente.telefono }}</td>
</tr>
</tbody>
</table>
</div>
</template>

I've solved it.
<script>
import axios from "axios"
export default {
name: "Utenti",
data() {
return {
utenti: [],
modalTitle: "",
UtenteTessera: 0,
UtenteNome: "",
UtenteCognome: "",
UtenteEmail: "",
UtenteTelefono: "",
UtenteNomeFilter: "",
UtenteTesseraFilter: "",
sortKey: 'nome',
reverse:false
}
},
computed: {
utentiToDisplay() {
return this.utenti.filter(this.filterByName)
.filter(this.filterByTessera)
.sort(this.orderBy);
}
},
methods: {
filterByName: function (utente) {
if (this.UtenteNomeFilter.length === 0) {
return true;
}
return (utente.nome.toLowerCase().indexOf(this.UtenteNomeFilter.toLowerCase()) > -1);
},
filterByTessera: function (utente) {
if (this.UtenteTesseraFilter.length === 0) {
return true;
}
return (utente.tessera.toLowerCase().indexOf(this.UtenteTesseraFilter.toLowerCase()) > -1);
},
orderBy: function (utenteA, utenteB) {
let condition = (utenteA[this.sortKey] > utenteB[this.sortKey]);
if (this.reverse) {
return !condition;
}
else {
return condition;
}
}
}
And the template
<div>
<table class="table table-striped">
<thead>
<tr>
<th>
<div class="d-flex flex-row">
<input
v-model="UtenteTesseraFilter"
class="form-control m-2"
placeholder="Filter"
/>
<button
type="button"
class="btn btn-light"
#click="setSort('UtenteTessera', true)"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-arrow-down-square-fill"
viewBox="0 0 16 16"
>
<path
d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L7.5 10.293V4.5a.5.5 0 0 1 1 0z"
/>
</svg>
</button>
<button
type="button"
class="btn btn-light"
#click="setSort('UtenteTessera', false)"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-arrow-up-square-fill"
viewBox="0 0 16 16"
>
<path
d="M2 16a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2zm6.5-4.5V5.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 5.707V11.5a.5.5 0 0 0 1 0z"
/>
</svg>
</button>
</div>
Tessera
</th>
<th>
<div class="d-flex flex-row">
<input
v-model="UtenteNomeFilter"
class="form-control m-2"
placeholder="Filter"
/>
<button
type="button"
class="btn btn-light"
#click="setSort('UtenteNome', true)"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-arrow-down-square-fill"
viewBox="0 0 16 16"
>
<path
d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L7.5 10.293V4.5a.5.5 0 0 1 1 0z"
/>
</svg>
</button>
<button
type="button"
class="btn btn-light"
#click="setSort('UtenteNome', false)"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-arrow-up-square-fill"
viewBox="0 0 16 16"
>
<path
d="M2 16a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2zm6.5-4.5V5.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 5.707V11.5a.5.5 0 0 0 1 0z"
/>
</svg>
</button>
</div>
UtenteNome
</th>
<th>Options</th>
</tr>
</thead>
</table>
<table class="table table-striped" style="z-index: 1">
<thead>
<tr>
<th>Tessera</th>
<th>Nome</th>
<th>Cognome</th>
<th>Email</th>
<th>Telefono</th>
</tr>
</thead>
<tbody>
<!--<tr v-for="info in info" :key="index">-->
<tr v-for="utente in utentiToDisplay" :key="title">
<td>{{ utente.tessera }}</td>
<td>{{ utente.nome }}</td>
<td>{{ utente.cognome }}</td>
<td>{{ utente.email }}</td>
<td>{{ utente.telefono }}</td>
</tr>
</tbody>
</table>
</div>
</template>

woocommerce quantity field does not work properly

I am creating a shopping cart page and the quantity part, of all inputs only one of the inputs works and it's value changes
where am i doing wrong??
$('.minus').attr('id', 'minus');
$('.plus').attr('id', 'plus');
const minus = document.getElementById('minus')
const plus = document.getElementById('plus')
plus.addEventListener("click", () => {
var count = document.querySelector('[title="Qty"]').value;
count++;
document.querySelector('[title="Qty"]').value = count;
});
minus.addEventListener("click", () => {
var count = document.querySelector('[title="Qty"]').value;
if(count >1){
count--;
document.querySelector('[title="Qty"]').value = count;
}
});
<div class="padding-td">
<button class="btn border text-danger minus"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-dash" viewBox="0 0 16 16">
<path d="M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z"/>
</svg>
</button>
<input type="number" title="Qty" value="<?php echo $cart_item["quantity"]?>" min="1" class="form-control w-25 d-inline-block input">
<button class="btn border text-danger plus"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus" viewBox="0 0 16 16">
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
</svg>
</button>
</div>

fetching data from findAll and pass it to ejs file

I'm trying to fetch data from mysql and pass the data to ejs file. I want to display the passed data as a html datatable. but it seems to not work.
I'm using sequelize and node js and ejs.
Here is how i implemented findAll() method
router.get('/list', function (req,res, next) {
player.findAll()
.then( players => {
console.log(data);
var data = res.json(players);
res.render("list", {data:data})
});
});
And here is where i want the data to be displayed.
<table>
<thead>
<tr>
<th scope="col"></th>
<th scope="col">Name</th>
<th scope="col">Last follow up date</th>
<th scope="col"></th>
<th scope="col"></th>
<th scope="col"></th>
</tr>
</thead>
<tbody id="Table-data">
<%if (typeof data != 'undefined'){ %>
<% data.forEach(function(row){ %>
<tr>
<td> 1 </td>
<td> <%= row.name %> </td>
<td> 15 </td>
<td>
<a href="./chart">
<span class="title">
<svg
width="1em"
height="1em"
viewBox="0 0 16 16"
class="bi bi-bar-chart-line"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M11 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12h.5a.5.5 0 0 1 0 1H.5a.5.5 0 0 1 0-1H1v-3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3h1V7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7h1V2zm1 12h2V2h-2v12zm-3 0V7H7v7h2zm-5 0v-3H2v3h2z"
/>
</svg>
view
</span>
</a>
</td>
<td>
<a href="./edit">
<span class="title">
<svg
width="1em"
height="1em"
viewBox="0 0 16 16"
class="bi bi-pencil-square"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456l-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"
/>
<path
fill-rule="evenodd"
d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z"
/>
</svg>
edit
</span>
</a>
</td>
<td>
<a href="./addEnv">
<span class="title">
<svg
width="1em"
height="1em"
viewBox="0 0 16 16"
class="bi bi-plus-square"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M14 1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"
/>
<path
fill-rule="evenodd"
d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"
/>
</svg>
add enviroment
</span>
</a>
</td>
</tr>
<% })} else{ %>
<tr>
<td colspan="6">No Record Found</td>
</tr>
<% } %>
</tbody>
</table>
The output always like this
output
Thank you for helping in advance

Try passing players directly to the template
router.get('/list', function (req,res, next) {
player.findAll()
.then(players => {
res.render("list", {data: players})
});

Categories

Resources