Poor man display errors–part 3–Display
In part 2 I have exposed the errors via the API to the world. Now I should show in a Blazor/ Razor page . It is enough to read with an HTTP call and display data.
Display data in a table
Because
– the API that gives error can change , however it will be an array of objects
– I do not want to use a custom grid
I took the decision to create the display of errors as a table that has dynamic columns based on the array .
This is the code for javascript to create a table from an array ( it assumes that a div with id = mytable exists)
var table= null;
function displayData(a){
console.log(a);
arrayToTable(JSON.parse(a));
};
function removeTableCreated(){
var parent =document.getElementById("myTable");
while (parent.lastChild) {
parent.removeChild(parent.lastChild);
}
}
function arrayToTable(data) {
removeTableCreated();
if((!Array.isArray(data)) || data.length == 0){
window.alert(‘ no data ‘);
return;
}
// Create table element
table = document.createElement(‘table’);
table.border = ‘1’;
// Create table header row
const headerRow = document.createElement(‘tr’);
Object.keys(data[0]).forEach(key => {
const th = document.createElement(‘th’);
th.textContent = key;
headerRow.appendChild(th);
});
table.appendChild(headerRow);
// Create table rows
data.forEach(item => {
const row = document.createElement(‘tr’);
Object.values(item).forEach(value => {
const td = document.createElement(‘td’);
td.textContent = value;
row.appendChild(td);
});
table.appendChild(row);
});
// Append table to the body (or any other container)
//document.body.appendChild(table);
document.getElementById("myTable").appendChild(table);
}
Obtain Data
Now the blazor razor page is simple
<h3>PoorManErrors</h3> <FluentButton Appearance="Appearance.Accent" @onclick="async()=> await GenerateError()">Generate Error</FluentButton> <FluentButton Appearance="Appearance.Accent" @onclick="async()=> await SeeErrors()">Refresh</FluentButton> <FluentButton Appearance="Appearance.Accent" @onclick="async()=> await ClearErrors()">Clear</FluentButton> <div id="myTable"></div>
And the code for retrieving
[Inject(Key = Program.apiNameConfig)]
private HttpClient? httpClient { get; set; }
[Inject]
private IJSRuntime? JSRuntimeData { get; set; }
private async Task GenerateError()
{
ArgumentNullException.ThrowIfNull(httpClient);
var r = new ReadFromAPI(httpClient);
var res = await r.ReadDataGet("api/usefull/error/WithILogger");
await SeeErrors();
StateHasChanged();
}
protected override async Task OnInitializedAsync()
{
await SeeErrors();
}
private async Task ClearErrors()
{
ArgumentNullException.ThrowIfNull(httpClient);
var r = new ReadFromAPI(httpClient);
var res = await r.ReadDataGet("nlog/Memory/stringData/clear");
await SeeErrors();
}
private async Task SeeErrors()
{
ArgumentNullException.ThrowIfNull(httpClient);
var r = new ReadFromAPI(httpClient);
var res = await r.ReadDataGet("nlog/Memory/stringData/list");
if (string.IsNullOrEmpty(res))
{
return;
}
;
if (res != null)
{
ArgumentNullException.ThrowIfNull(JSRuntimeData);
await JSRuntimeData.InvokeVoidAsync("displayData", res);
}
}
Side note 1 : the button GenerateErrors take advantage of package NetCoreUsefullEndpoints that registers an endpoint that logs an error.
Side note 2: See MainLayout for tag ErrorContent . You may wanto to modify this one too, to go to the error page
Side note 3: You may want to add a “copy to clipboard” button or “send email”
That’s all, folks!