J'utilise Choicesjs :

Dans leur documentation, ils disent que pour pré-remplir l'entrée avec des valeurs, nous devons utiliser leur fonction ajax :

https://github.com/jshjohnson/Choices#ajaxfn

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);
    });
});

Mais je ne comprends pas, dans cette ligne : `response.json().then(function(data)``

Comment doivent être les données ? Dans ma base de données, les genres, qui sont les données dans ce cas, ne sont qu'un tableau de chaînes comme : ['rock','pop','rap']

Mais le rappel dit : callback(data, 'value', 'label');

Comment je suis censé utiliser ce rappel ?

Est-ce que mes genres au lieu d'être un tableau devraient être un objet avec une valeur de clé, une étiquette de clé, puis des données, cet objet serait-il ?

MISE À JOUR

J'ai essayé de changer le rappel pour qu'il soit un tableau d'objets... mais maintenant, il ne génère pas d'erreur... mais il ne remplit pas non plus le champ avec les données...

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 => ({'value': x, 'label': x}))
          console.log(d)
          callback(d, 'value', 'label');
        });
      })
      .catch(function(error) {
        console.log(error);
      });
  });

Une idée .. sur la façon de faire fonctionner cela, je veux dire, pré-remplir le fichier avec les données du backend?

Merci!

0
user2643810 7 mars 2019 à 01:24

2 réponses

Meilleure réponse

J'ai corrigé mon problème qui consistait à définir les valeurs de l'entrée avec les valeurs de la base de données ...

Au lieu d'utiliser leur assistant ajax... ce qui était déroutant et n'a pas fonctionné pour moi... j'ai utilisé la méthode setValue sur les choix obj :

async function getUserData() {
  let loggedInUser
  try {
    await axios
      .get(`/api/user_data`)
      .then(res => {
        if (res.data) {
          loggedInUser = res.data
          return
        }
        // tell them nothing came back
        console.error('no users on the res to make ajax and populate choicesjs')
      })
      .catch(err => {
        console.error('no users found', err);
      });
  } catch (e) {
    console.error(e);
  }
  genresMultiOptions.setValue(loggedInUser.username.genres);
}
getUserData()
0
user2643810user2643810 7 mars 2019 à 17:04

Est-ce que mes genres au lieu d'être un tableau devraient être un objet avec une valeur de clé, une étiquette de clé, puis des données, cet objet serait-il ?

On dirait que oui. Dans l'exemple plus haut où il montre comment définir statiquement des choix, il a cette structure :

const example = new Choices(element, {
 choices: [
   {value: 'One', label: 'Label One'},
   {value: 'Two', label: 'Label Two', disabled: true},
   {value: 'Three', label: 'Label Three'},
  ],
 });

Il me semble que les arguments de chaîne fournissent les clés de chacun de ces champs

0
Thomas Prince 6 mars 2019 à 22:33