Search thru json and return matching record

My razor page: Fetches data from json and displays result as expected

@if (todos != null)
{
    <table>
        <thead>
            <tr>
                <th>User</th>
                <th>ID</th>
                <th>Title</th>
                <th>Completed</th>          
            </tr>
        </thead>
        <tbody>
            @foreach (var todo in todos)
            {
              <tr>
                  <td>@todo.userId</td>
                  <td>@todo.id</td>
                  <td>@todo.title</td>
                  <td>@todo.completed</td>
              </tr>
            }
        </tbody>
    </table>
}

@code {
  private Todo[] todos;
  string baseUrl = "https://jsonplaceholder.typicode.com/todos";
  protected override async Task OnInitializedAsync()
  {
      todos = await httpClient.GetFromJsonAsync<Todo[]>($"{baseUrl}");
  }
  public class Todo
  {
      public int userId { get; set; }
      public int id { get; set; }
      public string title { get; set; }
      public bool completed { get; set; }
  }
}

Now, I do not have access to backend. Cannot have a separate search API. I need to loop thru todos array that I got from json and find matches when searched.

Assuming 'todos' holds data from api. Below is how I would do in JavaScript.

var results = [];
var len = todos.length
var searchField = "title";
var searchVal = "delectus aut autem";
for (var i = 0; i < len; i  ) {
    if (todos[i][searchField] == searchVal) {
        results.push(todos[i]);
    }
}

Above returns all record that matches the title "delectus aut autem". How do I incorporate the same search functionality in razor page here.

Edited Code:

I have added input textbox and search button. Not able to succesfully pass the typed 'searchVal' to the SearchClicked method. May I know where I am going wrong.

<input type="text" @bind="searchVal" @bind:event="oninput" placeholder="Enter Search Value" />
<button @OnClick="SearchClicked">Search</button>
<p>Typed Value: @searchVal</p> // works here, but not getting passed to the query

@code {
private Todo[] result;
string searchVal;
private async Task SearchClicked()
{
    todos = await httpClient.GetFromJsonAsync<Todo[]>($"{baseUrl}");
    result = todos.Where(todo => todo.title == @searchVal).ToArray();
 }
}

Thank you.

CodePudding user response：

In the new code, your main problem is

<button @OnClick="SearchClicked">Search</button>

which should be

<button @onclick="SearchClicked">Search</button>

CodePudding user response：

Add the System.Linq namespace on top of your razor page.

@using System.Linq;

And in your @code block block you use it like this:

var result = todos.Where(todo => todo.title == searchVal).ToArray();

To be able to display it on the razor page you need do declare a result array outside of the search method. Like the todos variable. And then use the result array in the display loop that creates the table.