D
D
doctor__232020-05-13 12:25:22
JavaScript
doctor__23, 2020-05-13 12:25:22

Can't write JS for JSON file?

Hello. I'm still learning JS.
There is a task to make a dynamic menu on the page. I wrote a json file, but I can't figure out how to insert it into the JS code and auto-complete into a specific structure.
Here is the JSON code file:

{
  "menu" : [
       {
         	"name": "Клиника",
         	"link": "link",
         	"sub" : 
         	[
             {
               "name": "На этом месте выпадающее меню",
               "link": "link",
           		"sub": 
           		[
                 {
                   "name": "На этом месте выпадающее меню",
                   "link": "link",
               		"sub": null
               	},
                 	{
                 "name": "А это второй пункт меню",
             		"link": "link",
             		"sub": null
             		},
                 {
                 "name": "И возможно третий",
             		"link": "link",
             		"sub": null
             		}
             	]
           	},
             	{
               "name": "А это второй пункт меню",
           		"link": "link",
           		"sub": 
       			[
                 {
                   "name": "На этом месте выпадающее меню",
                   "link": "link",
               		"sub": null
               	},
                 	{
                 "name": "А это второй пункт меню",
             		"link": "link",
             		"sub": null
             		},
                 {
                 "name": "И возможно третий",
             		"link": "link",
             		"sub": null
             		}
             	]
         		},
             {
               "name": "И возможно третий",
           		"link": "link",
           		"sub":  
       			[
                 {
                   "name": "На этом месте выпадающее меню",
                   "link": "link",
               		"sub": null
               	},
                 	{
                 "name": "А это второй пункт меню",
             		"link": "link",
             		"sub": null
             		},
                 {
                 "name": "И возможно третий",
             		"link": "link",
             		"sub": null
             		}
             	]
         		}
         	]
       	},
       	{
         	"name": "Процедура",
         	"link": "link",
         	"sub" : 
         	[
             {
               "name": "На этом месте выпадающее меню",
               "link": "link",
           		"sub": 
           		[
                 {
                   "name": "На этом месте выпадающее меню",
                   "link": "link",
               		"sub": null
               	},
                 	{
                 "name": "А это второй пункт меню",
             		"link": "link",
             		"sub": null
             		},
                 {
                 "name": "И возможно третий",
             		"link": "link",
             		"sub": null
             		}
             	]
           	},
             	{
               "name": "А это второй пункт меню",
           		"link": "link",
           		"sub": 
       			[
                 {
                   "name": "На этом месте выпадающее меню",
                   "link": "link",
               		"sub": null
               	},
                 	{
                 "name": "А это второй пункт меню",
             		"link": "link",
             		"sub": null
             		},
                 {
                 "name": "И возможно третий",
             		"link": "link",
             		"sub": null
             		}
             	]
         		},
             {
               "name": "И возможно третий",
           		"link": "link",
           		"sub":  
       			[
                 {
                   "name": "На этом месте выпадающее меню",
                   "link": "link",
               		"sub": null
               	},
                 	{
                 "name": "А это второй пункт меню",
             		"link": "link",
             		"sub": null
             		},
                 {
                 "name": "И возможно третий",
             		"link": "link",
             		"sub": null
             		}
             	]
         		}
         	]
       	},
       
  ]
}


And here is the structure that should be created and data inserted into it (ul id="menu", everything else is dynamically created):
<ul id="menu">
              <li class="menu__item">
                Клиника
                <ul class="submenu">
                  <li class="item__sub">На этом месте выпадающее меню
                    <ul class="submenu2">
                      <li class="item__sub">На этом месте выпадающее меню</li>
                      <li class="item__sub">А это второй пункт меню</li>
                      <li class="item__sub">И возможно третий</li>
                    </ul>
                  </li>
                  <li class="item__sub">А это второй пункт меню
                    <ul class="submenu2">
                      <li class="item__sub">На этом месте выпадающее меню</li>
                      <li class="item__sub">А это второй пункт меню</li>
                      <li class="item__sub">И возможно третий</li>
                    </ul>
                  </li>
                  <li class="item__sub">И возможно третий
                    <ul class="submenu2">
                      <li class="item__sub">На этом месте выпадающее меню</li>
                      <li class="item__sub">А это второй пункт меню</li>
                      <li class="item__sub">И возможно третий</li>
                    </ul>
                  </li>
                </ul>
              </li>
              <li class="menu__item">
                Процедура
                <ul class="submenu">
                  <li class="item__sub">На этом месте выпадающее меню
                    <ul class="submenu2">
                      <li class="item__sub">На этом месте выпадающее меню</li>
                      <li class="item__sub">А это второй пункт меню</li>
                      <li class="item__sub">И возможно третий</li>
                    </ul>
                  </li>
                  <li class="item__sub">А это второй пункт меню
                    <ul class="submenu2">
                      <li class="item__sub">На этом месте выпадающее меню</li>
                      <li class="item__sub">А это второй пункт меню</li>
                      <li class="item__sub">И возможно третий</li>
                    </ul>
                  </li>
                  <li class="item__sub">И возможно третий
                    <ul class="submenu2">
                      <li class="item__sub">На этом месте выпадающее меню</li>
                      <li class="item__sub">А это второй пункт меню</li>
                      <li class="item__sub">И возможно третий</li>
                    </ul>
                  </li>
                </ul>
              </li>
              
            </ul>


I would be very grateful for help.

Answer the question

In order to leave comments, you need to log in

2 answer(s)
D
drawnofmymind, 2020-05-13
@drawnofmymind

map method to help you)

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question