c# - C# Web API：迭代数组并追加到 HTML 表

Question

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

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！

标签： c#jsonasp.net-web-api

Answer 1

看起来您的 HTML 有点偏离 - 编写这样的 HTML 可能很乏味。我猜测基于 HTML 中的硬编码表头和Submitter类的结构，你的 JSON 中只会有两个Objn项目。如果这是真的，你可以放弃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类，并且必须在循环中添加代码（并为您的 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>";
}

这首先获取列表.Count之间的两个 s中较大的一个Obj来设置循环条件，然后执行索引边界检查。如果objnCount小于或等于i，则将其设置为空格，否则取其各自Obj列表的值。有 6 个项目Obj2，只有 2 个项目Obj1，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>