C# | Use DataGridView to display JSON array

C# | Use DataGridView to display JSON array

foreword

Do you want to display a complex JSON array data? But you don't know how to show it, do you? No problem, because this article was born to solve that problem! Use DataGridView to easily present JSON array data in the form of a table, so that you can understand and process the data more clearly.

Let's explore together how to achieve it!

---

Realization principle

1. Defines a JSON-formatted string.
2. Use the JsonConvert.DeserializeObject method of the Newtonsoft.Json library to deserialize the JSON into a List<Dictionary<string, object>> list of objects.
3. Iterates through the list of objects, with each object's properties as a column in the DataGridView and the object's property values ​​as a row in the DataGridView.
4. Display the DataGridView on the UI interface.

---

Implementation process

The first step is to clear all columns and rows in the DataGridView.

dataGridView1.Columns.Clear();
dataGridView1.Rows.Clear();

In the second step, use the JsonConvert.DeserializeObject method of the Newtonsoft.Json library to deserialize the JSON into a List<Dictionary<string, object>> object list.

string json = "[{ \"Name\": \"Alice\", \"Age\": 23 }, { \"Name\": \"Bob\", \"Age\": 25 }, { \"Name\": \"Charlie\", \"Age\": 27 }]";
List<Dictionary<string, object>> data = JsonConvert.DeserializeObject<List<Dictionary<string, object>>>(json);

The third step is to traverse the list of objects and use the properties of each object as a column in the DataGridView.

foreach (var row in data)
{
    
    
    foreach (var column in row)
    {
    
    
        // 如果列不存在，添加列
        if (!dataGridView1.Columns.Contains(column.Key))
        {
    
    
            dataGridView1.Columns.Add(column.Key, column.Key);
        }
    }
}

The fourth step is to traverse the list of objects and use the property values ​​of the objects as a row in the DataGridView.

foreach (var row in data)
{
    
    
    int rowIndex = dataGridView1.Rows.Add();
    foreach (var column in row)
    {
    
    
        dataGridView1.Rows[rowIndex].Cells[column.Key].Value = column.Value;
    }
}

full source code

using Newtonsoft.Json;

// 清空 DataGridView 中的所有列和行
dataGridView1.Columns.Clear();
dataGridView1.Rows.Clear();

// JSON 格式的字符串
string json = "[{ \"Name\": \"Alice\", \"Age\": 23 }, { \"Name\": \"Bob\", \"Age\": 25 }, { \"Name\": \"Charlie\", \"Age\": 27 }]";

// 将 JSON 反序列化为对象列表
List<Dictionary<string, object>> data = JsonConvert.DeserializeObject<List<Dictionary<string, object>>>(json);

// 遍历对象列表，将每个对象的属性作为 DataGridView 中的一列
foreach (var row in data)
{
    
    
    foreach (var column in row)
    {
    
    
        // 如果列不存在，添加列
        if (!dataGridView1.Columns.Contains(column.Key))
        {
    
    
            dataGridView1.Columns.Add(column.Key, column.Key);
        }
    }
}

// 遍历对象列表，将对象的属性值作为 DataGridView 中的一行
foreach (var row in data)
{
    
    
    int rowIndex = dataGridView1.Rows.Add();
    foreach (var column in row)
    {
    
    
        dataGridView1.Rows[rowIndex].Cells[column.Key].Value = column.Value;
    }
}

The DataGridView dynamically generates columns each time the code is run.