Всем, привет. Пока еще только изучаю JS.
Есть задача, сделать динамичное меню на странице. Написал файл json, но не могу осилить, как его воткнуть в код JS и сделать автозаполнение в опредленную структуру.
Вот файл код JSON:
{
"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
}
]
}
]
},
]
}
А вот структура, которая должна создаваться и в нее подставляться данные (ul id="menu", остальное все динамично создается):
<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>
Буду очень признателен за помощь.
