Working with nested <template for:each /> tag in LWC

In LWC we will always be working with JSON objects.

And one the tag that we use the most and that deals with JSON string is <template for:each /> tag in LWC.

This tag will only work with Array and not Objects. Don't do the mistake of trying to iterating through an object.

For that matter, the only reason we have to flatten our object when we get a nested object as a part of inner query in SOQL is because we can only use an Array with <template for:each /> tag.

In this example am gonna iterate through Array's with in an Array. If you are curious as to how the nested Array is going to look like, here is the JS file.

Now I will be iterating this Array in our template file. This is how the template file is going to look it.

Here's the playground link in case you are interested.

Interested in learning LWC Development with me? Subscribe to my course (use this if you are out of India).