Dynamically populate menu items

[dushkin]

Hello all,

 

 I am using the W3.CSS animated drop-down (https://www.w3schools.com/w3css/w3css_dropdowns.asp).

 But I cannot figure out how can I populate the menu items dynamically according to a list of item names.

I guess some Javascript should be involved here, so I try in this forum 🙂

     <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

    <div class="w3-dropdown-click">
       <button onclick="showMenu()" class="w3-button">Team1</button>
       <div id="Demo" class="w3-dropdown-content w3-bar-block w3-animate-zoom">
           <a href="#" class="w3-bar-item w3-button">Link 1</a>
           <a href="#" class="w3-bar-item w3-button">Link 2</a>
           <a href="#" class="w3-bar-item w3-button">Link 3</a>
       </div>
    </div>

Thanks!

Edited October 27, 2020 by dushkin

[niche]

Why client side, w/ javascript and some kind of database, instead of server side, w/ something like PHP and MYSQL?

I'd go w/ PHP and MYSQL to dynamically populate a menu, but that's me.

Please confirm that you've thought about client side / server side and purposely chose client side.

 

 

 

 

Edited October 27, 2020 by niche

[dushkin]

Hi Niche. I am working on my first ever web project.

I am using a REST API call to get the list of menu items.

The last weeks I spent studying HTML, CSS, JavaScript and JQuery.

My server was built using Spring Boot which is also new for me.

I hope I would not need to study also PHP to get a solution for that 😄

 

[niche]

What are you basing your dynamic assignment on?  I don't see a string or array?

REST API is not a database.

 

https://medium.com/@marinithiago/guys-rest-apis-are-not-databases-60db4e1120e4

 

 

 

[dushkin]

I use REST API to get the values from a database into an object array (after parsing the JSON response):

async function showMenu() {
    try{
        (async () => {
            const response = await fetch('http://localhost:8088/teams') /*Get teams object from db*/
            var teamsArrObj = await response.json()
            console.log(teamsArrObj);

/* Meanwhile I return the array but actually I want to build the menu based on the returned values */

            return teamsArrObj;
        })()
    }catch{
        console.log("error"); /* Enhance error handling here! */
    }
}

Edited October 27, 2020 by dushkin

[niche]

What does teamsArrOb actually look like? 

[dushkin]

It is an array of objects with several string fields inside.

Something like this:

 

 

 

 

[niche]

4 sub arrays or 2?

[dushkin]

I already got help. You can view it here if you'd like to: https://stackoverflow.com/questions/64559370/html-css-javascript-how-can-i-build-a-menu-dynamically

Thank you very much for your attention!!!

[dsonesuk]

I would give each anchor link a data-id="n" where "n" will be the number of id passed by json, then loop through anchors if id from json and data-id match insert the remaining values for country,  name etc, if you can get url you can add that value all in one go.