Blazor读取本地JSON文件报无法转换为Job数组异常如何解决

错误根因 #

你遇到的JsonException核心有三个问题：

1. 原始JSON本身存在语法错误，且结构与你期望反序列化的List<Job>类型不匹配
2. 可能存在JSON文件放置位置/静态资源配置问题，导致请求返回的不是合法JSON内容
3. Razor页面的表格渲染逻辑存在结构错误

解决方案 #

方案1：直接修正JSON文件（最推荐）

直接将job.json修改为纯Job数组结构，完全去掉外层无用包裹，修改后内容如下：

[
  {
    "Key": "Are you alive?",
    "Value": "true"
  },
  {
    "Key": "Is it working?",
    "Value": "true"
  },
  {
    "Key": "Working ?",
    "Value": "false"
  },
  {
    "Key": "can you tell me what are yu doing",
    "Value": "true"
  },
  {
    "Key": "can you tell me what ...?",
    "Value": "false"
  }
]

同时做两项配置检查：

• 确保job.json放置在Blazor WASM项目的wwwroot/sample-data/目录下
• 右键JSON文件打开属性面板，将「复制到输出目录」设置为「如果较新则复制」

方案2：保留原始JSON结构，调整反序列化逻辑

如果需要保留现有外层JSON结构，首先修正原始JSON的语法错误，给ArrayOfDataManager下的数组增加键名：

{
  "ArrayOfDataManager": {
    "-xmlns:xsd": "http://www.w3.org/2001/XMLSchema",
    "-xmlns:xsi": "http://www.w3.org/2001/XMLSchema-instance",
    "Jobs": [
      {
        "Key": "Are you alive?",
        "Value": "true"
      },
      {
        "Key": "Is it working?",
        "Value": "true"
      },
      {
        "Key": "Working ?",
        "Value": "false"
      },
      {
        "Key": "can you tell me what are yu doing",
        "Value": "true"
      },
      {
        "Key": "can you tell me what ...?",
        "Value": "false"
      }
    ]
  }
}

然后在Shared项目中新增匹配的根模型：

public class JobRoot
{
    public ArrayOfDataManager ArrayOfDataManager { get; set; }
}

public class ArrayOfDataManager
{
    public List<Job> Jobs { get; set; }
}

最后修改Razor页面的反序列化逻辑：

@code {
    private List<Job> Jobs;
    protected override async Task OnInitializedAsync()
    {
        var root = await Http.GetFromJsonAsync<JobRoot>("sample-data/job.json");
        Jobs = root.ArrayOfDataManager.Jobs;
    }
}

方案3：新增调试逻辑定位问题

如果修改后仍报错，先增加代码查看实际请求到的内容，排除404、资源路径错误等问题：

protected override async Task OnInitializedAsync()
{
    // 先获取原始返回字符串
    var rawJson = await Http.GetStringAsync("sample-data/job.json");
    // 打开浏览器F12控制台即可查看返回的实际内容
    Console.WriteLine(rawJson);
    // 再执行反序列化
    Jobs = System.Text.Json.JsonSerializer.Deserialize<List<Job>>(rawJson);
}

表格渲染修复 #

你当前的Razor页面表格逻辑存在结构错误，foreach循环写在了<tr>标签内，会导致所有数据挤在同一行，修改为如下结构即可：

<tbody>
    @foreach (Job job in Jobs)
    {
        <tr>
            <td>@job.Key</td>
            <td>@job.Value</td>
        </tr>
    }
</tbody>

内容的提问来源于stack exchange，提问作者Martine Pirlet