C# Web API: Looping over JSON Object Array

Question

I am building a C# Web API and once you POST data to the endpoint, it will generate a HTML email with the values posted.

Unfortunately I'm stuck on how to parse and loop over the JSON array that contains key/value pairs and ultimately generate a HTML table row as a result.

Sample JSON data im testing with:

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

Code:

    public class TestingController : ControllerBase
    {
        public object Submitter { get; set; }

        public string POST([FromBody] TestingController data)
        {
            var json = JsonConvert.SerializeObject(data.Submitter);
            var jsonObjects = JObject.Parse(json);
            var submitData = jsonObjects["Submitter"];

            string body = "";

            foreach (var item in submitData)
            {
                body += $"{item["Obj1"]}"; // Not working
            }

            return body;
        }
    }

Desired html render once being able to successfully loop the array:

body += $"<tr><td>{item["Obj1"]}</td><td>{item["Obj2"]}</td></tr>"

EDIT

I still struggling but slowly getting one step closer:

    public class TestingController : ControllerBase
    {
        public List<SubmitterObjects> Submitter { get; set; }

        public class SubmitterObjects
        {
            public List<string> Obj1 { get; set; }
            public List<string> Obj2 { get; set; }
        }

        public string POST([FromBody] TestingController data)
        {
            var json = JsonConvert.SerializeObject(data);
            dynamic myDeserializedClass = JsonConvert.DeserializeObject(json);

            string body = "";

            foreach (var item in myDeserializedClass.Submitter)
            {
                body += $"<tr><td>{item.Obj1}</td><td>{item.Obj2}</td></tr>";
            }

            return body;
        }
    }

Result (weird):

<tr><td>[
  "test",
  "test2"
]</td><td></td></tr><tr><td></td><td>[
  "test3",
  "test4"
]</td></tr>

Desired HTML table result:

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

It is not quite clear how Obj1and Obj2 should be represented in the resulting HTML. Could you please add the desired HTML output. Also consider using a StringBuilder instead of concatenating body += ... — Filburt
– Filburt, Commented Sep 24, 2021 at 6:22
body will contain a table which is why im trying to append Obj1 & Obj2 to it. Although what im really trying to achieve here is being able to successfully loop over the JSON array, the HTML generation part of it is easy and I will look into String Builder — yush
– yush, Commented Sep 24, 2021 at 6:29
You should be able to access the contents of your item by JArray.ChildrenTokens. — Filburt
– Filburt, Commented Sep 24, 2021 at 6:49
Hmm im looking into it but im not too sure how to implement it — yush
– yush, Commented Sep 24, 2021 at 6:57
@Filburt I just made an edit, seems like im able to loop the array but the html output is a bit weird... — yush
– yush, Commented Sep 24, 2021 at 7:08

Just Shadow · Accepted Answer · 2021-09-27 09:24:12Z

2

There are a few mistakes and bad practices in the code. I've commented them below:

    public class TestingController : ControllerBase
    {
        // Bad practice: Having an object with type "object". Using strict types is encouraged
        public object Submitter { get; set; }

        // Bad practice: The type of "data" is the same as the controller.
        public string POST([FromBody] TestingController data)
        {
            var json = JsonConvert.SerializeObject(data.Submitter);
            var jsonObjects = JObject.Parse(json);
            var submitData = jsonObjects["Submitter"];

            string body = "";

            foreach (var item in submitData)
            {
                // Here the item["Obj1"] is not a string, it's an array, so you get an error.
                // Bad practice: Returning an HTML right in the controller. 
                // If you have a separate frontend, then it would be better to just return
                // the results in an array or json, and format it in frontend instead
                body += $"{item["Obj1"]}"; // Not working
            }

            return body;
        }
    }

And here's the fixed version of the code.
First, have strongly typed classes:

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

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

Then modify the Post method like this to iterate over the items:

    public string POST([FromBody] MyData data) // Note: The type is changed to MyData
    {
        // Note: We don't need the deserializing logic anymore, as it's already automatically done by .net
        string body = "";
        foreach (var item in data.Submitter)
        {
            if (item.Obj1 != null) {
                body += "<tr>";
                // Note: You can use LINQ to simplify this loop...
                foreach (var objItem in item.Obj1) {
                    body += $"<td>{objItem}</td>";
                }
                body += "</tr>";
            }
            if (item.Obj2 != null) {
                body += "<tr>";
                foreach (var objItem in item.Obj2) {
                    body += $"<td>{objItem}</td>";
                }
                body += "</tr>";
            }
        }

        return body;
    }

Also please note that you're filling the table based on column data instead of row, so you'll need to do the small changes in the css like it's done in this answer.

edited Sep 27, 2021 at 9:24

answered Sep 24, 2021 at 7:09

Just Shadow

12.1k6 gold badges66 silver badges80 bronze badges

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

9 Comments

yush Over a year ago

Thanks so much for your response however im running into an error Object reference not set to an instance of an object when trying to loop over item.Obj1 as an example. Any ideas?

yush Over a year ago

System.NullReferenceException: Object reference not set to an instance of an object.    at APITesting.Controllers.Testing2Controller.POST(MyData data)

Just Shadow Over a year ago

That's because the items of the Submitter sometimes are type of Obj1 and sometimes type of Obj2. I've added a null check to fix that issue. Please take a look at the updated code.

yush Over a year ago

Thanks for that its working perfectly. The other thing im confused about is how I would be able to render body += $"<tr><td>{item["Obj1"]}</td><td>{item["Obj2"]}</td></tr>" within foreach so all items are being displayed on the same html table row

Just Shadow Over a year ago

Obj1 and Obj2 are arrays, so the line you wrote above will not work. Can you please provide the expected result that you want? It will help us to adjust the code accordingly.

|

Collectives™ on Stack Overflow

C# Web API: Looping over JSON Object Array

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related