C# Web API: Loop POST Data Array and Render HTML

Question

I am trying to create a POST endpoint where on success, it will send a HTML email with the POST data.

JSON data that I am trying to iterate on:

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

TestingController:

    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)
            {
                if (item.Obj1 != null)
                {
                    foreach (var objItem in item.Obj1)
                    {
                        composeTableObj1 += $"<tr><td>{objItem}</td></tr>";
                    }
                }
                if (item.Obj2 != null)
                {
                    foreach (var objItem in item.Obj2)
                    {
                        composeTableObj2 += $"<tr><td>{objItem}</td></tr>";
                    }
                }
            }

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

            return body;
        }
    }

Result of the above:

| Object 1 | Object 2 |
|----------|----------|
| Test     |          |
| Test 2   |          |
| Test 3   |          |
| Test 4   |          |

Desired Result:

| Object 1 | Object 2 |
|----------|----------|
| Test     | Test 3   |
| Test 2   | Test 4   |

The HTML table will then be compiled into a bigger HTML body which will then be sent out as an email but im unsure how I can achieve the desired result above.

TIA

EDIT: Result from @Manti_Core's response

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

You are not creating two columns here in loop you should combine objitem of Obj1 and Obj2, so your row html should look like <tr><td>{objItem of Obj1}</td><td>{objItem of Obj2}</td></tr> — MDT
– MDT, Commented Sep 25, 2021 at 4:56

MDT · Accepted Answer · 2021-09-27 07:01:27Z

2

Currently you are just adding rows inside same columns inside your c# loop, you should do the following instead and using single variable you can achieve that and append html into a string. Also added a case where you may have no data at all so you can show the cell as empty data or whatever you like

  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>";
                }
            }
            else {
                composeTableObj1 += $"<td>Empty Data</td>";
            }

            //Column 2 Obj2 data
            if (item.Obj2 != null)
            {
               
                foreach (var objItem in item.Obj2)
                {
                    composeTableObj1 += $"<td>{objItem}</td>";
                }
            }
            else {
                composeTableObj1 += $"<td>Empty Data</td>";
            }
            composeTableObj1 += $"</tr>" //end row tag
        }

EDIT 2 : After deserializing your json string i found that you have two sets of Submitter with obj1 present and obj2 null, but for the second submitter it has obj1 null and obj2 present.

You seriously need to rethink on your response and model, very weird implementation.

Below i propose new solution, based on your jagged model response.

        var composeTableObj1 = "";

        var l1 = new List<string>();
        var l2 = new List<string>();

        foreach (var item in data.Submitter)
        {                
            //Column 1 Obj1 data
            if (item.Obj1 != null)
            {
                l1 = item.Obj1;
            }                

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

        int i = 0;
        foreach (var item in l1)
        {
            composeTableObj1 += "<tr>";

            composeTableObj1 += $"<td>{item}</td>";
            composeTableObj1 += $"<td>{l2[i]}</td>";

            composeTableObj1 += "</tr>";
            ++i;
        }

Result: <tr><td>test</td><td>test3</td></tr><tr><td>test2</td><td>test4</td></tr>

PS: I hope this is a POC/assignment thing and not in some production code. This way of implementation is way too weird and incorrect. Please try to decouple html from server side code, soon you have to add styling and this will require you too update both your client side and server side as well.

edited Sep 27, 2021 at 7:01

answered Sep 25, 2021 at 5:07

MDT

1,7054 gold badges20 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

yush Over a year ago

Thanks for your response however Im still not getting my desired output. I had to remove the else statements as it was generating Empty Data fields after the array has looped. Please see my Edit to my question on the result im getting from your code, its nearly there but Obj1 & Obj2 data needs to stay in their own respective column

MDT Over a year ago

@ayushlal please check the edited answer, i have based the solution on the type of json object you have provided in the query.

Collectives™ on Stack Overflow

C# Web API: Loop POST Data Array and Render HTML

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related