Cannot Load Inline json to list box

Question

Cannot Load Inline JSON to list box, it is giving error in console.

@page "/"

@page "/"
@inject HttpClient Http
@using Microsoft.AspNetCore.Components.Forms

@using System.Text.Json

<PageTitle>Activity Dropdown</PageTitle>

<h3>Activity</h3>

<EditForm Model="@submitActivity" OnSubmit="@Submit">
    <div>
        <InputSelect @bind-Value="submitActivity.CD">
            @if (submitActivity != null)
            {
                <option value="">--Select--</option>
                @foreach (var activity in ActivityList)
                {
                    <option value="@activity.CD">@activity.DESC</option>
                }
            }
        </InputSelect>
    </div>
    <br />
    <div class="row">
        <div class="col-md-3">
            <p>Weight (in kgs)</p>
        </div>
        <div class="col-md-4">
            <input placeholder="Weight (in kgs)" @bind="@weight" />
        </div>
    </div>

    <br />
    <div class="row">
        <div class="col-md-3">
            <p>Time  (in minutes)</p>
        </div>
        <div class="col-md-4">
            <input placeholder="Time in minutes" @bind="@minutes" />
        </div>
    </div>
    <div>
        <button type="submit">Submit</button>
    </div>
</EditForm>

<div>
    <div>@finalresult</div>
</div>

@code {
    private List<ACTIVITY> ActivityList = new();
    private ACTIVITY submitActivity { get; set; } = new();
    private string dataResourceText;
    private int weight;
    private int minutes;
    private string finalresult = string.Empty;
    private decimal hours;
    private string skip = "";

    string jsonString = @"[{

      {
        ""CD"": ""1003"",
        ""METS"": ""14"",
        ""CATEGORY"": ""bicycling"",
        ""DESC"": ""bicycling, mountain, uphill, vigorous""
      },
      {
        ""CD"": ""1004"",
        ""METS"": ""16"",
        ""CATEGORY"": ""bicycling"",
        ""DESC"": ""bicycling, mountain, competitive, racing""
      } 
 

}]
";


    protected override void OnInitialized()
    {
        List<ACTIVITY> ActivityList = JsonSerializer.Deserialize<List<ACTIVITY>>(jsonString);

    }

    private void Submit()
    {
        //Debug - View the CD

        skip = "N";
        if (weight <= 21)
        {
            skip = "Y";
            finalresult = "Invalid Weight";
        }
        if (weight >= 150)
        {
            skip = "Y";

            finalresult = "Invalid Weight";
        }
        if (minutes <= 5)
        {
            skip = "Y";

            finalresult = "Invalid Time";
        }

        if (minutes >= 200)
        {
            skip = "Y";

            finalresult = "Invalid Time";
        }
        //use the CD to get the and display the description
        ACTIVITY model = ActivityList.FirstOrDefault(a => a.CD == submitActivity.CD);

        hours = (decimal)minutes / 60;
        if (skip == "N")
        { finalresult = (weight * model.METS * hours).ToString(); }


    }

    public override bool Equals(object obj)
    {
        return obj is Index index &&
               jsonString == index.jsonString;
    }


    //View Model
    public class Rootobject
    {
        public Burned burned { get; set; }
    }

    public class Burned
    {
        public List<ACTIVITY> ACTIVITY { get; set; }
    }

    public class ACTIVITY
    {
        public string CD { get; set; }
        public decimal METS { get; set; }
        public string CATEGORY { get; set; }
        public string DESC { get; set; }
    }
}

https://github.com/KalyanAllam/BlazorAppBurned

Answer 1

Hi @Kalyan A,

Firstly, your razor contains duplicated @page "/" in Index.razor.

Then, the issue with the provided JSON string is that there is an extra set of curly braces {} inside the array. Besides, the decimal type data surrounded with "" is invalid, you need remove it.

The correct json should be:

string jsonString = @"[
      {
        ""CD"": ""1003"",
        ""METS"": 14,    //remove the """"
        ""CATEGORY"": ""bicycling"",
        ""DESC"": ""bicycling, mountain, uphill, vigorous""
      },
      {
        ""CD"": ""1004"",
        ""METS"": 16,     //remove the """"
        ""CATEGORY"": ""bicycling"",
        ""DESC"": ""bicycling, mountain, competitive, racing""
      } 
]
";

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,
Rena

Answer 2

The ActivityList is a OnInitializedAsync() local variable. Its scope is within the OnInitializedAsync() method.

    protected override async Task OnInitializedAsync()
    {
        List<ACTIVITY> ActivityList = JsonSerializer.Deserialize<List<ACTIVITY>>(jsonString1);
    }

Change the code to populate the ActivityList defined at the component level.

protected override async Task OnInitializedAsync()
{
    ActivityList = JsonSerializer.Deserialize<List<ACTIVITY>>(jsonString1);
}

As recommended in your recent threads, you really need to learn basic C# as well as the framework you decide to use.

fyi I want to move json file inline if it works I want to move the below code to maui

Every user will have a copy of the same data in their Maui Application? This approach is not logical unless this is an academic exercise for learning.

Answer 3

that is because its not valid json. it invalid in the first couple chars "[{{" is not valid.