Category: javascript

So I have 1 request that is app.get('/assignment/loans', (req, res) => { const id = req.query.bookID; and another that is this app.get('/assignment/loans', (req, res) => { const id = req.query.studentID; for some reason the studentID one does not work and it always goes to the bookID to search. I use this http://localhost:3000/assignment/loans?bookID=1 and it works as intended but if I use http://localhost:3000/assignment/loans?studentID=9653 I get which is an error that should only appear for the bookID. How can I differentiate the two? Thank you in advance.

I’m out of ideas. I try get for example genere from this code. List items are generated dynamicaly if item has no information about something then section does not exist. I tring to find div with text “genere” and try to get text from next in h3 element. I use JS, Playwright, XPath. Example code:

<div class="infoItem">
    <h3 class="header">director</h3>
    <div class="info">John Doe</div>
    <h3 class="header">country</h3>
    <div class="info">DE</div>
    <h3 class="header">screenwriting</h3>
    <div class="info">John Doe</div>

    <!--[...]-->
    
    <h3 class="header">genere</h3>
    <div class="info">Comedy</div>
    <h3 class="header">premiere</h3>
    <div class="info">2019-02-18</div>
 </div>

Intention:

• If the below div is in offset the sticky button should be visible.
  <div class="cmp-show-pinnedbutton" ></div>

• if the below div is in offset the sticky button should be hidden.
  <div class="cmp-show-pinnedbutton" ></div>

• In between the classes <div class="cmp-hide-pinnedbutton" ></div> <div class="cmp-show-pinnedbutton" ></div> the sticky button will be visible

Problem

• It works only on Single Instance. If I repeat the them it’s not working.

Working Scenario

<div class="cmp-show-pinnedbutton"></div>    
   <div class="cmp-show-pinnedbutton"></div>    
        <p>Some text here</p>// where sticky button visible   
    <div class="cmp-hide-pinnedbutton"></div>

Not working Scenario

   <div class="cmp-show-pinnedbutton"></div>    
       <div class="cmp-show-pinnedbutton"></div>    
             <p>Some text here</p>//sticky button visible    
        <div class="cmp-hide-pinnedbutton"></div>
          <p>Some text here</p>//sticky button not visible

        <div class="cmp-show-pinnedbutton"></div>    ***Not working where sticky button should  visible
             sticky button should visible    
        <div class="cmp-hide-pinnedbutton"></div>

Thoughts

• I have referred the below stack overflow Solution but somehow I
  coudn’t able to achieve it.
  jQuery – Treat multiple instances of the same class separately?

Codepen Link

let pinnedbutton = document.getElementsByClassName('cmp-pinned-button')[0];
let hide_component = document.getElementsByClassName('cmp-hide-pinnedbutton')[0],
show_component = document.getElementsByClassName('cmp-show-pinnedbutton')[0],
_screenWidth = window.innerWidth,
observe = parseInt(window.innerHeight) - (_screenWidth < 1279 ? 80 : 20);
console.log(window.innerHeight);
window.addEventListener('scroll', () => {
let hide = hide_component.getBoundingClientRect().y,
show = show_component.getBoundingClientRect().y,
submitMain = pinnedbutton; //submitMain: pinned button div
  if (show < observe || hide > observe) {
    submitMain.classList.add('pinned_visible');
  }
  if (hide < observe || show > observe) {
    submitMain.classList.remove('pinned_visible');
  }
  });        

.cmp-pinned-button {
    position: fixed;
    bottom: 0px;
    max-height: 65px;
    width: 100%;
    height: 100%;
    background-color: rgba(256,256,256,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: rem(20px 0);
    z-index: 999999;
    transform: scaleY(1);
    transform-origin: top;
    transition: all 0.05s ease;
    display: none;
    text-align: center;
    font-size: 25px;
    text-decoration: none;
}

.cmp-pinned-button.pinned_visible{
    display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cmp-pinned-button" data-component="pinnedbutton">
    <div class="button">
        <a class="cmp-button" href="#">
            <span class="cmp-button__text">MEET WITH AN EXPERT</span>
        </a>
    </div>
</div>
<p style="height: 500px; background-color: aqua;"></p>
<div class="cmp-show-pinnedbutton" ></div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<div class="cmp-hide-pinnedbutton"></div>
<p style="height: 500px; background-color: aqua;"></p>
<div class="cmp-show-pinnedbutton" ></div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<div class="cmp-hide-pinnedbutton"></div>

I have an dropdown list that gets it’s info from a Google Sheets doc. The thing is it takes a little while to fetch the data so rather than waiting for the dropdown to change, I want to show loading in the dropdown list.

Here’s my code:

function showMediaDropdownMenuOptions(el, arrayOfArrays, index) {
    var serviceTypeElement = document.getElementById("service-type").value;
    var currentlyAdded = []
    el.innerHTML = '';
    var filteredArray = arrayOfArrays.filter(function(r) {return r[17].includes(serviceTypeElement)})
    var result = filteredArray.flatMap(({ 0: key, 17: values }) => values
            .split(', ')
            .map(value => [key, value])
        );
        const mappedArray = result.map(item => item[0].toString().replace(/s*,s*/g, ",").split(',').sort())
        const sets = new Set([].concat(...mappedArray))
        const arrayValues = Array.from(sets)
    var option = document.createElement("option");
    arrayValues.forEach(function(r){
        var option = document.createElement("option");
        option.textContent = r;
        el.appendChild(option);
    });
  }

When I’m waiting for a whole page it’d use this at the end of a function.

document.getElementById("loading").remove();

With this html:

 <div id="loading" class="loading pt-40">
      <div class="d-flex justify-content-center">
        <div>
          <div class="spinner-border text-light" style="width:4em; height:4em;" role="status">
            <span class="sr-only">Loading...</span>
          </div>
          <div>Loading...</div>
        </div>
      </div>
    </div>

And this css:

.loading {
  background-color:black;
  width: 100vw;
  height: 100vh;
  position:fixed;
  top:0;
  left:0;
  z-index:10000;
}

I don’t know how to do it with a dropdown list especially as the contents come from an array?

I am trying to move a HTML element (a puzzle piece) back to its original position on the screen after a dragEnd event, if the element is not inside a specified target zone.

I using a javascript object to represent the puzzle piece. The object contains the starting x and y for the element as well as a reference to the element itself (along with some other information). The code is below.

function dragEnd(e) {

    if(selectedPiece.ele.id === "correctPiece" && selectedPiece.distanceVector < 30){
        window.alert("Game End");
    }
    else{

        console.log("returning piece: ", selectedPiece.ele.id);
        console.log("to point ", selectedPiece.startX, selectedPiece.startY);
        selectedPiece.ele.style.position = "absolute";
        selectedPiece.ele.style.left = selectedPiece.startX;
        selectedPiece.ele.style.top = selectedPiece.startY;
        
    }
    active = false;
}

Still when I drop the piece it stays wherever it was dropped.

When I look at the console it shows the element id and identifies the correct startX and startY properties. I have also tried appending “px” to the startX and startY with no luck.

Any help appreciated thanks 🙂

I want to implement a dropdown menu for mobile devices with animation so when the transition ends, it needs to be display:none. Here’s what I’ve done:

const menuButton = document.querySelector('.menuButton')
const navMenu = document.querySelector('.nav')

function menuToggle() {
    if (navMenu.classList.contains('navDisplay')) {
        navMenu.classList.remove('navShow')
        setTimeout(() => {
            navMenu.classList.remove('navDisplay')  
        }, 300)     
    } else {
        navMenu.classList.add('navDisplay') 
        setTimeout(() => {
            navMenu.classList.add('navShow')
        }, 0) 
    }
}

menuButton.addEventListener('click', menuToggle)

* {
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    color: #e8e8e8;
}

html, body {
    overflow-x: hidden;
    background-color: rgb(66, 66, 66);
}

h2 {
    margin: 15px 0;
}

a {
    transition: all.3s ease;
    -webkit-transition: all.3s ease;
    -moz-transition: all.3s ease;
    color: #e8e8e8;
    text-decoration: none;
}

a:hover {
    color: #777777;
}

/*--------------NAV BAR------------*/

header {
    background-color: rgba(24, 24, 24, 0.95);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 10;
}

.menuButton {
    display: none;
    position: fixed;
    right: 0;
    color: white;
    font-size: 1.5em;
    line-height: 65px;
    margin: 10 30px;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
}

.logo {
    color: white;
    font-size: 30px;
    font-weight: bold;
    font-family: 'Fredoka One', sans-serif;
    line-height: 65px;
}


    nav div ul {
        text-align: center;
        flex-direction: column;
        margin-top: 50px;
        overflow: hidden;
    }
    
    nav div ul li {
        margin: 20px 0;
    }
    
    nav {
        flex-direction: column;
    }

    .nav {
        display: none;
        box-sizing: border-box;
        width: 100%;
        overflow: hidden;
        height: 0;
        transition: height 300ms ease-in-out;
        -webkit-transition: height 300ms ease-in-out;
        -moz-transition: height 300ms ease-in-out;
    }

    .orderButton {
        padding: 20px;
    }
    
    .logo {
        text-align: center;
    }
    
    .menuButton {
        display: block;
    }

    .navShow {
        height: 100vh;
    }

    .navDisplay {
        display: block;
    }

<header>
<div class="menuButton">&#9776;</div>
      <nav>
        <a href="index.html"><p class="logo">LOGO</p></a>
        <div class="nav">
            <ul>
                <li><div class="orderButton">ELEMENT1</div></li>
                <li><a href="about.html">ELEMENT2</a></li>
                <li><a href="contact.html">ELM3</a></li>
            </ul>
        </div>
      </nav>
      </header>

So, the menu is display:none and height:0 by default. The click event listener triggers function that checks if menu is displayed or not and adds or removes respective classes (the display class removes after the transition ends with the help of timeout 400ms).

Is there any more beautiful or less code solutions?

I would like to click the button and make the value appear in <h3> inside the <div> and according to that value the background-color would change.

For example, when I typed a value (Your number) and clicked on Click Me!, h3 inside the div should show this typed value and the background-color would also change accordingly.

For example, if I typed 33 in Your number and then clicked, the value to appear would be 33 and the color would be orange. Thus:

My code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<form name="myform">
  Your number: 
  <input type="text" name="inputbox" id='textBox' value="" />
  <input type="button" name="button" class="member" value="Click me!" />
  <div class='box1' style='background-color:lime;width:33.33%;padding-left:15px;padding-right:15px;'>
    <h3>
    0
    </h3>
    <p>
    Valor
    </p>
  </div>
</form>
<script>
  $(function() {

    $('.member').click(function() {
      var answer = $("#textBox").val();
      if (answer <= 20) {
        $('.box1').css('background-color','red');
      } else if (answer <= 50) {
        $('.box1').css('background-color','orange');
      } else {
        $('.box1').css('background-color','steelblue');
      }
    });

  });

</script> 

So I wanted to select the h3 tag and change it with if else statement.

How is it possible to return php values to a .js file?
I can’t use echo.

Example php class:

return $_GET['q']['email'];

That should be returned to script.js

I realize I could work with echo. Unfortunately, this is not possible in a .js file.

I’d like to make a very simple online picture dictionary script where a child can type in a word (from a list of say ten words), and a picture pops up in an iframe. Example, type in “dog” and a dog picture pops up in the iframe. Type in “cat” and a cat picture pops up in the same iframe. For the code that I have, I’ve included three words and three pictures, dog, cat and bird. But only the third word, “bird”, works, the bird picture pops up. The first two words, dog, and cat are not working. I think it’s because we can’t have multiple document.getElementbyId, am I correct? If so, is there another workaround or alternative for this? A simple, shortest script if possible, that will be easy for me to add words to. I would like all the pictures to pop up in the same iframe box. Thanks in advance.

Here’s the code:

<head>

<script>
function answer1()
{
if(document.getElementById("DICTIONARY").value=="dog")
iframe.location.href="dog.png"
else
iframe.location.href="blank.png";
}
function answer2()
{
if(document.getElementById("DICTIONARY").value=="cat")
iframe.location.href="cat.png"
else
iframe.location.href="blank.png";
}
function answer3()
{
if(document.getElementById("DICTIONARY").value=="bird")
iframe.location.href="bird.png"
else
iframe.location.href="blank.png";
}
</script>
</head>

<input id="DICTIONARY" type="text" size="8" style="font-family: Verdana; font-size: 20pt"/>
<input type="button" value="GO" onclick="answer1();answer2();answer3();" style="font-family: Verdana; font-size: 15pt; font-weight: bold"/>
<br>

<br>
<iframe name="iframe" width="400" height="250"></iframe>
&nbsp;</td>



</body>

</html>

I’ve created long time ago a spreadsheet with several scripts using Google Scripts, one of the primary functions was related with onEdit() function, which worked perfectly until last week.

I’ve been reading some posts here to change the function from Simple trigger to Trigger, but didn’t work, as while Simple Trigger is considering the written code which only is enabled if a specific cell is enabled, but by modifying to Trigger, the options are onEdit or OnChange, and both are acting over any change in the entire spreadsheet.

My biggest issue here, is that this a highly costumed dynamic report, hence, this particular trigger is re-creating all the charts that are in the spreadsheet, so, every chart deleted or created is a trigger for this script under the Trigger option.

a fire base integration i want to send sms notification by using fire base but a something went wrong when i runnnig code

    <script type="module">
      // Import the functions you need from the SDKs you need
      import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.7/firebase-app.js";
      import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.6.7/firebase-analytics.js";
      // TODO: Add SDKs for Firebase products that you want to use
      // https://firebase.google.com/docs/web/setup#available-libraries
      // Your web app's Firebase configuration
      // For Firebase JS SDK v7.20.0 and later, measurementId is optional
      const firebaseConfig = {
           apiKey: "AIzaSyCasdW_wO9dXzW6ptdEipsMiK-Iq4KInZHb3Y",
           authDomain: "jksawoasdrktasdasdest.firebaseapp.com",
           projectId: "jksaasdworktasdasest",
           storageBucket: "jksaworktest.appspot.com",
           messagingSenderId: "584180342775",
           appId: "1:584180342775:web:acf2b53ddf0e3feb47228a",
           measurementId: "G-V670962YZC"
      };
      
      // Initialize Firebase
      const app = initializeApp(firebaseConfig);
      const analytics = getAnalytics(app);
      window.onload = () => render();
 function render() {
      window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier(
      "sign-in-button",
      {
           size: "invisible",
           callback: (response) => {
                // reCAPTCHA solved, allow signInWithPhoneNumber.
                onSignInSubmit();
           },
      }
 );
 
 window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier(
      "recaptcha-container"
 );

}

**whrn irun this code i have a meesage saying ** error message “auth/argument-error”

I’ve 6 images and i want to make a room literally a room with 4 walls, roof and floor, can this be done using JavaScript? I googled it and found nothing useful so far

The result I get now gives me blank when that character is not there:

Code

const categories = catSubSheet.getRange(2, 1, catSubSheet.getLastRow() - 1, 3).getValues();
let categories1 = categories.filter(e => e[0] != '').map(function (e) { return e[0] });

let sheetsToProcess = [];
  for (let a = 0; a < categories1.length; a++) {
    sheetNames = categories1[a].substring(0, categories1[a].indexOf(" ("));
    sheetsToProcess.push('BOQ ' + sheetNames)
  }

Data

[
 [GF HTG SHEET 1 (Drawing)],
 [GF HTG SHEET 2 (Drawing)],
 [GF DWS SHEET 1],
]

The result

Sheets to Process: BOQ GF HTG SHEET 1,BOQ GF HTG SHEET 2,BOQ

Expected Result

Sheets to Process: BOQ GF HTG SHEET 1,BOQ GF HTG SHEET 2,BOQ GF DWS SHEET 1

Apologies if there is already an answer for this, I’ve been unable to locate one that has worked for me.

I have defined a menu system for React where the information is stored in an array of objects. Each object has the posibility of having sub items (objects in another array) and I’m looking to filter the entire menu for values.

Menu Object

[
  {
    "key": "Dashboard",
    "icon": {
      "type": {},
      "key": null,
      "ref": null,
      "props": {},
      "_owner": null,
      "_store": {}
    },
    "title": "Dashboard",
    "component": {
      "type": {},
      "key": null,
      "ref": null,
      "props": {
        "to": "/admin/",
        "children": "Dashboard"
      },
      "_owner": null,
      "_store": {}
    }
  },
  {
    "key": "Clients",
    "icon": {
      "type": {},
      "key": null,
      "ref": null,
      "props": {},
      "_owner": null,
      "_store": {}
    },
    "isSubMenu": true,
    "title": "Clients",
    "submenus": [
      {
        "key": "Clients.Add",
        "title": "Create Client",
        "component": {
          "type": {},
          "key": null,
          "ref": null,
          "props": {
            "to": "/admin/Clients/create",
            "children": "Create Client"
          },
          "_owner": null,
          "_store": {}
        }
      },
      {
        "key": "Clients.List",
        "title": "List Clients",
        "component": {
          "type": {},
          "key": null,
          "ref": null,
          "props": {
            "to": "/admin/Clients/",
            "children": "List Clients"
          },
          "_owner": null,
          "_store": {}
        }
      },
      {
        "key": "Clients.Search",
        "title": "Search Clients",
        "component": {
          "type": {},
          "key": null,
          "ref": null,
          "props": {
            "to": "/admin/Clients/search",
            "children": "Search Clients"
          },
          "_owner": null,
          "_store": {}
        }
      }
    ]
  },
  {
    "key": "Contractors",
    "icon": {
      "type": {},
      "key": null,
      "ref": null,
      "props": {},
      "_owner": null,
      "_store": {}
    },
    "isSubMenu": true,
    "title": "Contractors",
    "submenus": [
      {
        "key": "Contractors.Add",
        "title": "Create Contractor",
        "component": {
          "type": {},
          "key": null,
          "ref": null,
          "props": {
            "to": "/admin/Contractors/create",
            "children": "Create Contractor"
          },
          "_owner": null,
          "_store": {}
        }
      },
      {
        "key": "Contractors.List",
        "title": "List Contractors",
        "component": {
          "type": {},
          "key": null,
          "ref": null,
          "props": {
            "to": "/admin/Contractors/",
            "children": "List Contractors"
          },
          "_owner": null,
          "_store": {}
        }
      },
      {
        "key": "Contractors.Search",
        "title": "Search Contractors",
        "component": {
          "type": {},
          "key": null,
          "ref": null,
          "props": {
            "to": "/admin/Contractors/search",
            "children": "Search Contractors"
          },
          "_owner": null,
          "_store": {}
        }
      }
    ]
  },
  {
    "key": "Jobs",
    "icon": {
      "type": {},
      "key": null,
      "ref": null,
      "props": {},
      "_owner": null,
      "_store": {}
    },
    "isSubMenu": true,
    "title": "Jobs",
    "submenus": [
      {
        "key": "Jobs.Add",
        "title": "Create Job",
        "component": {
          "type": {},
          "key": null,
          "ref": null,
          "props": {
            "to": "/admin/Jobs/create",
            "children": "Create Job"
          },
          "_owner": null,
          "_store": {}
        }
      },
      {
        "key": "Jobs.List",
        "title": "List Jobs",
        "component": {
          "type": {},
          "key": null,
          "ref": null,
          "props": {
            "to": "/admin/Jobs/",
            "children": "List Jobs"
          },
          "_owner": null,
          "_store": {}
        }
      },
      {
        "key": "Jobs.Search",
        "title": "Search Jobs",
        "component": {
          "type": {},
          "key": null,
          "ref": null,
          "props": {
            "to": "/admin/Jobs/search",
            "children": "Search Jobs"
          },
          "_owner": null,
          "_store": {}
        }
      }
    ]
  },
  {
    "isDivider": true
  },
  {
    "key": "Config",
    "icon": {
      "type": {},
      "key": null,
      "ref": null,
      "props": {},
      "_owner": null,
      "_store": {}
    },
    "isSubMenu": true,
    "title": "Configuration",
    "submenus": [
      {
        "key": "Config.Category.Add",
        "title": "Create Category",
        "component": {
          "type": {},
          "key": null,
          "ref": null,
          "props": {
            "to": "/admin/Config/Category/create",
            "children": "Create Category"
          },
          "_owner": null,
          "_store": {}
        }
      },
      {
        "key": "Config.Category.List",
        "title": "List Categories",
        "component": {
          "type": {},
          "key": null,
          "ref": null,
          "props": {
            "to": "/admin/Config/Category/",
            "children": "List Categories"
          },
          "_owner": null,
          "_store": {}
        }
      },
      {
        "key": "Config.Specialist.Add",
        "title": "Create Specialist",
        "component": {
          "type": {},
          "key": null,
          "ref": null,
          "props": {
            "to": "/admin/Config/Specialist/create",
            "children": "Create Specialist"
          },
          "_owner": null,
          "_store": {}
        }
      },
      {
        "key": "Config.Specialist.List",
        "title": "List Specialists",
        "component": {
          "type": {},
          "key": null,
          "ref": null,
          "props": {
            "to": "/admin/Config/Specialist/",
            "children": "List Specialists"
          },
          "_owner": null,
          "_store": {}
        }
      },
      {
        "key": "Config.Status.Add",
        "title": "Create Status",
        "component": {
          "type": {},
          "key": null,
          "ref": null,
          "props": {
            "to": "/admin/Config/Status/create",
            "children": "Create Status"
          },
          "_owner": null,
          "_store": {}
        }
      },
      {
        "key": "Config.Status.List",
        "title": "List Statuses",
        "component": {
          "type": {},
          "key": null,
          "ref": null,
          "props": {
            "to": "/admin/Config/Status/",
            "children": "List Statuses"
          },
          "_owner": null,
          "_store": {}
        }
      }
    ]
  },
  {
    "key": "UserManagement",
    "icon": {
      "type": {},
      "key": null,
      "ref": null,
      "props": {},
      "_owner": null,
      "_store": {}
    },
    "isSubMenu": true,
    "title": "User Management",
    "submenus": [
      {
        "key": "UserManagement.Add",
        "title": "Create User",
        "component": {
          "type": {},
          "key": null,
          "ref": null,
          "props": {
            "to": "/admin/UserManagement/create",
            "children": "Create User"
          },
          "_owner": null,
          "_store": {}
        }
      },
      {
        "key": "UserManagement.List",
        "title": "List Users",
        "component": {
          "type": {},
          "key": null,
          "ref": null,
          "props": {
            "to": "/admin/UserManagement/",
            "children": "List Users"
          },
          "_owner": null,
          "_store": {}
        }
      }
    ]
  },
  {
    "isDivider": true
  },
  {
    "key": "LockScreen",
    "icon": {
      "type": {},
      "key": null,
      "ref": null,
      "props": {},
      "_owner": null,
      "_store": {}
    },
    "title": "Lock Screen",
    "component": "Lock Screen"
  }
]

So if I were to filter this on title for the value “list” it should return back

[
  
  {
    "key": "Clients",
    "icon": {
      "type": {},
      "key": null,
      "ref": null,
      "props": {},
      "_owner": null,
      "_store": {}
    },
    "isSubMenu": true,
    "title": "Clients",
    "submenus": [
      {
        "key": "Clients.List",
        "title": "List Clients",
        "component": {
          "type": {},
          "key": null,
          "ref": null,
          "props": {
            "to": "/admin/Clients/",
            "children": "List Clients"
          },
          "_owner": null,
          "_store": {}
        }
      }
    ]
  },
  {
    "key": "Contractors",
    "icon": {
      "type": {},
      "key": null,
      "ref": null,
      "props": {},
      "_owner": null,
      "_store": {}
    },
    "isSubMenu": true,
    "title": "Contractors",
    "submenus": [      
      {
        "key": "Contractors.List",
        "title": "List Contractors",
        "component": {
          "type": {},
          "key": null,
          "ref": null,
          "props": {
            "to": "/admin/Contractors/",
            "children": "List Contractors"
          },
          "_owner": null,
          "_store": {}
        }
      },
    ]
  },
  {
    "key": "Jobs",
    "icon": {
      "type": {},
      "key": null,
      "ref": null,
      "props": {},
      "_owner": null,
      "_store": {}
    },
    "isSubMenu": true,
    "title": "Jobs",
    "submenus": [
      {
        "key": "Jobs.List",
        "title": "List Jobs",
        "component": {
          "type": {},
          "key": null,
          "ref": null,
          "props": {
            "to": "/admin/Jobs/",
            "children": "List Jobs"
          },
          "_owner": null,
          "_store": {}
        }
      },
      
    ]
  },  
  {
    "key": "Config",
    "icon": {
      "type": {},
      "key": null,
      "ref": null,
      "props": {},
      "_owner": null,
      "_store": {}
    },
    "isSubMenu": true,
    "title": "Configuration",
    "submenus": [
      {
        "key": "Config.Category.List",
        "title": "List Categories",
        "component": {
          "type": {},
          "key": null,
          "ref": null,
          "props": {
            "to": "/admin/Config/Category/",
            "children": "List Categories"
          },
          "_owner": null,
          "_store": {}
        }
      },
      {
        "key": "Config.Specialist.List",
        "title": "List Specialists",
        "component": {
          "type": {},
          "key": null,
          "ref": null,
          "props": {
            "to": "/admin/Config/Specialist/",
            "children": "List Specialists"
          },
          "_owner": null,
          "_store": {}
        }
      },
      {
        "key": "Config.Status.List",
        "title": "List Statuses",
        "component": {
          "type": {},
          "key": null,
          "ref": null,
          "props": {
            "to": "/admin/Config/Status/",
            "children": "List Statuses"
          },
          "_owner": null,
          "_store": {}
        }
      }
    ]
  },
  {
    "key": "UserManagement",
    "icon": {
      "type": {},
      "key": null,
      "ref": null,
      "props": {},
      "_owner": null,
      "_store": {}
    },
    "isSubMenu": true,
    "title": "User Management",
    "submenus": [
      {
        "key": "UserManagement.List",
        "title": "List Users",
        "component": {
          "type": {},
          "key": null,
          "ref": null,
          "props": {
            "to": "/admin/UserManagement/",
            "children": "List Users"
          },
          "_owner": null,
          "_store": {}
        }
      }
    ]
  }
]

Or it should return back

[
  

  {
    "key": "Clients.List",
    "title": "List Clients",
    "component": {
      "type": {},
      "key": null,
      "ref": null,
      "props": {
        "to": "/admin/Clients/",
        "children": "List Clients"
      },
      "_owner": null,
      "_store": {}
    }
  },
    
  {
    "key": "Contractors.List",
    "title": "List Contractors",
    "component": {
      "type": {},
      "key": null,
      "ref": null,
      "props": {
        "to": "/admin/Contractors/",
        "children": "List Contractors"
      },
      "_owner": null,
      "_store": {}
    }
  },

  {
    "key": "Jobs.List",
    "title": "List Jobs",
    "component": {
      "type": {},
      "key": null,
      "ref": null,
      "props": {
        "to": "/admin/Jobs/",
        "children": "List Jobs"
      },
      "_owner": null,
      "_store": {}
    }
  },
  
  {
    "key": "Config.Category.List",
    "title": "List Categories",
    "component": {
      "type": {},
      "key": null,
      "ref": null,
      "props": {
        "to": "/admin/Config/Category/",
        "children": "List Categories"
      },
      "_owner": null,
      "_store": {}
    }
  },
  {
    "key": "Config.Specialist.List",
    "title": "List Specialists",
    "component": {
      "type": {},
      "key": null,
      "ref": null,
      "props": {
        "to": "/admin/Config/Specialist/",
        "children": "List Specialists"
      },
      "_owner": null,
      "_store": {}
    }
  },
  {
    "key": "Config.Status.List",
    "title": "List Statuses",
    "component": {
      "type": {},
      "key": null,
      "ref": null,
      "props": {
        "to": "/admin/Config/Status/",
        "children": "List Statuses"
      },
      "_owner": null,
      "_store": {}
    }
  }, 
  {
    "key": "UserManagement.List",
    "title": "List Users",
    "component": {
      "type": {},
      "key": null,
      "ref": null,
      "props": {
        "to": "/admin/UserManagement/",
        "children": "List Users"
      },
      "_owner": null,
      "_store": {}
    }
  }
]

At present I have the following which works for the 1st level objects, but the sub menu’s all get returned:

const MenuSearch = (value) => {
        const SearchTerm = value.toLowerCase();
        console.log(SearchTerm, MenuItems);
        if (!value || value.length < 1){
            // show all menu items
            SetMenuItemsFiltered(MenuItems);   
        } else {
            let temp = [...MenuItems];

            SetMenuItemsFiltered(temp.filter((MenuItem) => {
                if (!MenuItem.isSubMenu && !MenuItem.isDivider){
                    return MenuItem.title.toLowerCase().includes(SearchTerm);
                } else if (MenuItem.isSubMenu){
                    return MenuItem.submenus.filter((SubMenuItem) => {
                        const SubMenuItemLabel = SubMenuItem.title.toLowerCase();
                        console.log(SubMenuItemLabel, SearchTerm, SubMenuItemLabel.includes(SearchTerm))
                        return SubMenuItemLabel.includes(SearchTerm.toLowerCase());
                    })
                }
            }));
        }
    }

I want G to stick to the bottom of it’s parent. (G to the bottom of the white background).

body {
  position: relative;
  background: #ccc;
  font-size: 2em;
  padding: 3em;
}

.staff {
  display: flex;
  padding: 1em;
  background: white;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 0;
}

.staff span {
  position: absolute;
  bottom: 0;
  font-size: 1.008em;
}

.clef {
background: pink;
  font-size: 0.25em;
  vertical-align: 'bottom';
}

<div class='staff'>
<span class='clef'>G</span>
</div>

I also tried display: flex; align-items: flex-end; but didn’t work