use a message from a json object in sweetalert2

Question

I use sweetalert2 and usually I use this code:

Swal.fire('my custom title','my custom message','info);

and this works fine. I want to parametrize the message picking up one message from a json. So I built the following:

var messages={
  margine: "Il margine è la somma del margine dei mesi precendenti e del margine per mese del mese attuale.", 
  margine_mese: "Il margine per mese è calcolato come differenza tra le entrate del mese e le uscite del mese stesso, senza tenere conto di quanto avvenuto in precedenza",
  radio_cassa: "Il budget per cassa calcola i movimenti nella data in cui creano un movimento di entrata o uscita. I movimenti della carta di credito sono considerati nel mese in cui il relativo saldo viene addebitato in banca", 
  radio_competenza: "Il budget per competenza calcola i movimenti nella data di esecuzione. I movimenti della carta di credito saranno considerati nel mese in cui sono effettuati"
}

and my code becomes:

var messages = {
  margine: "Il margine è la somma del margine dei mesi precendenti e del margine per mese del mese attuale.",
  margine_mese: "Il margine per mese è calcolato come differenza tra le entrate del mese e le uscite del mese stesso, senza tenere conto di quanto avvenuto in precedenza",
  radio_cassa: "Il budget per cassa calcola i movimenti nella data in cui creano un movimento di entrata o uscita. I movimenti della carta di credito sono considerati nel mese in cui il relativo saldo viene addebitato in banca",
  radio_competenza: "Il budget per competenza calcola i movimenti nella data di esecuzione. I movimenti della carta di credito saranno considerati nel mese in cui sono effettuati"
}

$('#myButton').click(function() {
  var what = $(this).data('value');
  console.log(what);
  Swal.fire('Info', messages.what, 'info');
  console.log(messages.what);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@10"></script>

<button id="myButton" data-value="message">Click me</button>

I identify correctly what message should I print but I cannot return the corresponding value and print it as message. What is wrong in my code?

Answer 1

To access the property of an object using a variable holding its name you need to use bracket notation.

Also note that the data attribute value of message doesn't match any property in the demo object. In the example I've corrected that error in your HTML.

var messages = {
  margine: "Il margine è la somma del margine dei mesi precendenti e del margine per mese del mese attuale.",
  margine_mese: "Il margine per mese è calcolato come differenza tra le entrate del mese e le uscite del mese stesso, senza tenere conto di quanto avvenuto in precedenza",
  radio_cassa: "Il budget per cassa calcola i movimenti nella data in cui creano un movimento di entrata o uscita. I movimenti della carta di credito sono considerati nel mese in cui il relativo saldo viene addebitato in banca",
  radio_competenza: "Il budget per competenza calcola i movimenti nella data di esecuzione. I movimenti della carta di credito saranno considerati nel mese in cui sono effettuati"
}

$('#myButton').click(function() {
  var what = $(this).data('value');
  Swal.fire('Info', messages[what], 'info');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@10"></script>
<button id="myButton" data-value="margine">Click me</button> <!-- eg. 'margine' not 'message' -->