C# Web API：迭代数组并附加到 HTML table

Question

我正在尝试创建一个 POST 端点，如果成功，它将发送一封包含 POST 数据的 HTML 电子邮件。我正在努力尝试迭代 JSON 对象数组并将该数据附加到 HTML table.

JSON数据：

{
   "Submitter":[
      {
         "Obj1":[
            "test",
            "test2"
         ]
      },
      {
         "Obj2":[
            "test3",
            "test4"
         ]
      }
   ]
}

测试控制器：

    public class Testing2Controller : ControllerBase
    {
        public class Submitter
        {
            public List<string> Obj1 { get; set; }
            public List<string> Obj2 { get; set; }
        }

        public class MyData
        {
            public List<Submitter> Submitter { get; set; }
        }

        public string POST([FromBody] MyData data)
        {

            string composeTableObj1 = @"";
            string composeTableObj2 = @"";


            foreach (var item in data.Submitter)
            {
                composeTableObj1 += $"<tr>"; //start row tag
            //Column 1 Obj1 data
            if (item.Obj1 != null)
                {
                    foreach (var objItem in item.Obj1)
                    {
                        composeTableObj1 += $"<td>{objItem}</td>";
                    }
                }

                //Column 2 Obj2 data
                if (item.Obj2 != null)
                {

                    foreach (var objItem in item.Obj2)
                    {
                        composeTableObj1 += $"<td>{objItem}</td>";
                    }
                }
                composeTableObj1 += $"</tr>"; //end row tag


        }

            string body = @$"<table>
<thead>
<tr>
    <th>Object 1</th>
    <th>Object 2</th>
</tr>
</thead>
<tbody>
{composeTableObj1}
</tbody>
</table>
";

            return body;
        }
    }

上面的代码给了我以下不想要的结果：

| Object 1 | Object 2 |
|----------|----------|
| test     | test2    |
| test3    | test4    |

这是我想要的结果：

| Object 1 | Object 2 |
|----------|----------|
| test     | test3    |
| test2    | test4    |

在这上面卡了好久，TIA！

Answer 1

看起来你的 HTML 有点不对劲 - 像这样写 HTML 会很乏味。我猜测基于 HTML 中的硬编码 table header 和 Submitter class 的结构，你将只有两个 Objn 项在您的 JSON 中。如果这是真的，您可以放弃 foreach 循环而使用 for 循环，并使用循环迭代器从 data.Submitter[n] 中获取值：

public string Post([FromBody] MyData data)
{
    string composeTableObj = ""; 

    for (int i = 0; i < data.Submitter.Count(); i++)
    {
        composeTableObj += $"<tr>"; //start row tag
        composeTableObj += $"<td>{data.Submitter[0].Obj1[i]}</td>";
        composeTableObj += $"<td>{data.Submitter[1].Obj2[i]}</td>";
        composeTableObj += $"</tr>"; //end row tag
    }

    return @$"<table><thead><tr><th>Object 1</th><th>Object 2</th></tr></thead><tbody>{composeTableObj}</tbody></table>";
}

渲染：

返回 HTML:

<table><thead><tr><th>Object 1</th><th>Object 2</th></tr></thead><tbody><tr><td>test</td><td>test3</td></tr><tr><td>test2</td><td>test4</td></tr></tbody></table>

显然，这不是很动态。如果您发现需要更多 Objn，则需要更新 Submitter class，并且必须在循环内添加代码（并添加另一个 header 为了你的 HTML).

如果 Obj 数组中有更多项目，您可以执行以下操作：

public string Post([FromBody] MyData data)
{
    string composeTableObj = "";

    int obj1Count = data.Submitter[0].Obj1.Count;
    int obj2Count = data.Submitter[1].Obj2.Count;

    int loopCount = obj1Count >= obj2Count ? obj1Count : obj2Count;

    for (int i = 0; i < loopCount; i++)
    {
        string obj1String = obj1Count <= i ? " " : data.Submitter[0].Obj1[i];
        string obj2String = obj2Count <= i ? " " : data.Submitter[1].Obj2[i];

        composeTableObj += $"<tr>"; //start row tag
        composeTableObj += $"<td>{obj1String}</td>";
        composeTableObj += $"<td>{obj2String}</td>";
        composeTableObj += $"</tr>"; //end row tag
    }

    return  @$"<table><thead><tr><th>Object 1</th><th>Object 2</th></tr></thead><tbody>{composeTableObj}</tbody></table>";
}

这首先获取 Obj 列表之间的两个 .Count 中的较大者以设置循环条件，然后执行索引边界检查。如果 objnCount 小于或等于 i，则将其设置为 space，否则为其各自的 Obj 列表取值。 Obj2 中有 6 个项目，Obj1 中只有 2 个项目，HTML 看起来像这样：

返回 HTML:

<table><thead><tr><th>Object 1</th><th>Object 2</th></tr></thead><tbody><tr><td>test</td><td>test3</td></tr><tr><td>test2</td><td>test4</td></tr><tr><td> </td><td>test5</td></tr><tr><td> </td><td>test6</td></tr><tr><td> </td><td>test7</td></tr><tr><td> </td><td>test8</td></tr></tbody></table>

C# Web API：迭代数组并附加到 HTML table

C# Web API: Iterating Array and Append to HTML table

c#

json

asp.net-web-api