title: How to use Choicesjs ajax?
body: <p>I am using Choicesjs:</p>
  
  <p>In their documentation they say that in order to pre-fill the input with values, we have to use their ajax function: </p>
  
  <p><a href="https://github.com/jshjohnson/Choices#ajaxfn" rel="nofollow noreferrer">https://github.com/jshjohnson/Choices#ajaxfn</a></p>
  
  <pre><code>var example = new Choices(element);
  
  example.ajax(function(callback) {
    fetch(url)
      .then(function(response) {
        response.json().then(function(data) {
          callback(data, 'value', 'label');
        });
      })
      .catch(function(error) {
        console.log(error);
      });
  });
  </code></pre>
  
  <p>But i dont understand, in this line: `response.json().then(function(data)``</p>
  
  <p>How should the data be? In my database the genres, which is the data in this case, is just an array of srings like: <code>['rock','pop','rap']</code></p>
  
  <p>But the callback say: <code>callback(data, 'value', 'label');</code></p>
  
  <p>how im i supposed to use this callback?</p>
  
  <p>Should my genres instead of being an array should be an object with a key value, a key label, and then data, would be that object?</p>
  
  <p>UPDATE</p>
  
  <p>I have tried changing the callback to be an array of objects.. but now d
  oesnt throw an error.. but it also does not populate the field with the data...</p>
  
  <p>code: </p>
  
  <pre><code>  await genresMultiOptions.ajax(function(callback) {
      fetch(`/api/users/${loggedInUser.username.slug}`)
        .then(function(response) {
          response.json().then(function(data) {
            const d = data.genres.map(x =&gt; ({'value': x, 'label': x}))
            console.log(d)
            callback(d, 'value', 'label');
          });
        })
        .catch(function(error) {
          console.log(error);
        });
    });
  </code></pre>
  
  <p>Any idea.. on how to get this working, i mean , pre populate the filed with data from the backend?</p>
  
  <p>Thanks!</p>