So Basically what im trying to do is have my for each function for firebase database append a new line to a json variable, and it does it successfully but when i try to init the auto complete box with that data, it doesnt work, its just a normal typing box, i have logged my json variable, and it comes out correct, but it doesnt init properly Heres All My Code:

Index.html

        <div class="input-field col s12">
          <i class="material-icons prefix">person</i>
          <input type="text" id="autocomplete-input" class="autocomplete">
          <label for="autocomplete-input">Autocomplete Test</label>
        </div>

index.js

          var autocompletejson
          const database = firebase.database()
          database.ref('FLSocial/Accounts/')
            .once('value', function (snapshot) { // <-- consider Promise API instead
              const sortedChildren = [];
              snapshot.forEach(childSnapshot => { sortedChildren.unshift(childSnapshot) }); // reverses the order
      
              sortedChildren.forEach(childSnapshot => {
                const childKey = childSnapshot.key;
                const childData = childSnapshot.val();
                
                /* rest of the code */
                autocompletejson += `
                "${childKey}": null,`;
                
                
      
                
                
                
              })
              setTimeout(test_autofill, 3000)
              //3 Seconds Later it runs the function grabbing the global variable and trying to init the auto complete with the data
            });

function test_autofill() {
  console.log(autocompletejson)
  $('input.autocomplete').autocomplete({
    data: {autocompletejson},
  });
}

Example They Gave On The MaterializeCSS website:

  $(document).ready(function(){
    $('input.autocomplete').autocomplete({
      data: {
        "Apple": null,
        "Microsoft": null,
        "Google": 'https://placehold.it/250x250'
      },
    });
  });