I was trying to find on similar posts solution, but mine attempts dont work.

Idea: Simply I have Services and ServiceTypes. I packed it in my MVC controller method like this:

public class SimpleGroupedService
{
    public int ServiceTypeId { get; set; }
    public string ServiceTypeName { get; set; }
    public List<SimpleServiceDTO> GroupedServices { get; set; }
}

Im passing to my js the whole object as services. So the object services contains also GroupedServices object which is a list.

Problem: In my html I'm trying foreach within foreach loop, and first level of services is ok, it shows serviceTypeName correctly, however, second foreach is broken.

<section class="list-container">
    <div>
        <!-- ko foreach: services -->
        <header>
            <i class="icon-employee"></i>
            <span data-bind="text: $root.shell.substring(ServiceTypeName, 200)"></span>
        </header>
        <ul>
            <li><a href="" data-bind="text: $root.GroupedServices"></a></li>
        </ul>
        <!-- /ko -->
    </div>
</section>

Error shown: I dont have any errors in my console log unless I put something like this data-bind="text: $root.GroupedServices.Name"

then I have an error:

knockout-3.2.0.js?v=1.7.2:63 Uncaught TypeError: Unable to process binding "text: function(){return $parent.GroupedServices.Name }"
Message: Cannot read properties of undefined (reading 'Name')
    at text (eval at parseBindingsString (knockout-3.2.0.js?v=1.7.2:59), <anonymous>:3:88)
    at update (knockout-3.2.0.js?v=1.7.2:88)
    at a.j.o (knockout-3.2.0.js?v=1.7.2:63)
    at k (knockout-3.2.0.js?v=1.7.2:42)
    at Object.a.s.a.j (knockout-3.2.0.js?v=1.7.2:45)
    at knockout-3.2.0.js?v=1.7.2:63
    at Object.u (knockout-3.2.0.js?v=1.7.2:10)
    at f (knockout-3.2.0.js?v=1.7.2:62)
    at h (knockout-3.2.0.js?v=1.7.2:60)
    at g (knockout-3.2.0.js?v=1.7.2:60)