Dynamically build the ojet menu with submenu using JSON input

Question

How to bind the option of oj-menu with submenu options from javascript in ojet

Answer 1

Using nested oj-bind-for-each solved the issue

 <oj-bind-for-each data="[[valueList]]">
    <template >
    <oj-option :id="[[$current.data.name]]" >
    <span>
    <oj-bind-text value="[[$current.data.label]]">
   </oj-bind-text>
    </span>
      <oj-menu>
         <oj-bind-for-each data="[[services]]">
           <template data-oj-as="services">
              <oj-bind-if test="[[valueList.data.value === services.data.serverId]]">
                 <oj-option :id="[[services.data.serviceValue]]" >
                   <span>
                     <oj-bind-text value="[[services.data.label]]"></oj-bind-text>
                   </span>
                 </oj-option>
              </oj-bind-if>
           </template>
      </oj-bind-for-each>
 </oj-menu> 
  </oj-option>
 </template>
    </oj-bind-for-each>