Can someone explain toastify to me

JavaScript
1

How could I have more different toast messages to appear?
Like in array.
Also, can I fetch messages that would appear as toast from outer source?

Also - can I have 3 of them fired with one button , at the same time?

2

Hi @diomed

How could I have more different toast messages to appear?

You can store the messages in an appropriate data structure(array) and access the message in the click event handler. Something like:

const messages = ["message 1", "message 2", "message 3"];
let idx = null;

// Displaying toast on manual action `Try`
document.querySelector("#new-toast")?.addEventListener("click", function () {
  if (idx === null || idx === messages.length - 1) {
    idx = 0;
  } else {
    idx++;
  }
  new Toastify(new ToastifyOption(messages[idx], 3000)).showToast();
});

Also, can I fetch messages that would appear as toast from outer source ?

Yes. You can fetch from an outer source. Of course it takes time for the data to be fetched, especially over the network. Therefore, you should display some kind of appropriate UI while the data is loading if you want to fetch after the user clicks the button.

Also - can I have 3 of them fired with one button , at the same time ?

Yes. You just need to create multiple instances of the ToastifyOption class like so:

 new Toastify(new ToastifyOption("Message 1", 3000)).showToast();
 new Toastify(new ToastifyOption("Message 2", 3000)).showToast();
 new Toastify(new ToastifyOption("Message 3", 3000)).showToast();

I hope that helps.

2 Likes
3

what idx= null means?

how would I have messages fetched from some api and then displayed all 3 at same time? I’m having serious trouble understanding that.

4

I am initializing the idx variable to null. You can initialize it to any value you want.

You can use the fetch API. In the example below, I am fetching data from the JSON placeholder API and displaying the todo using a toast.

document.querySelector("#new-toast")?.addEventListener("click", function () {
  fetch("https://jsonplaceholder.typicode.com/todos/1")
    .then((res) => res.json())
    .then((todo) => {
      new Toastify(new ToastifyOption(todo.title, 3000)).showToast();
    })
    .catch((err) => {
      new Toastify(new ToastifyOption("Error has occurred", 3000)).showToast();
    });
});
1 Like
5

you showed me how to fecth one to do . but how to fetch all of them, and display them one after another?

6

Well, you follow the same principle. In the example below, I’m fetching all the todos(about 200) and displaying the last five todos in the list.

document.querySelector("#new-toast")?.addEventListener("click", function () {
  fetch("https://jsonplaceholder.typicode.com/todos")
    .then((res) => res.json())
    .then((todos) => {
      todos.slice(-5).forEach((todo) => {
        new Toastify(new ToastifyOption(todo.title, 3000)).showToast();
      });
    })
    .catch((err) => {
      new Toastify(new ToastifyOption("Error has occurred", 3000)).showToast();
    });
});
1 Like
7

but how to go through all of them? whole list, not just last 5.
I tried like this but failed

    .then((todos) => {
      todos.forEach((todo) => {
        new Toastify(new ToastifyOption(todo.title, 3000)).showToast();
      });
    })
8

Failed how? The code seems to work as expected.

There obviously isn’t room for all the todos on the screen though.

9

I meant how to go through all of them one by one, like first it shows first, then on click it shows second, then on click shows third.

who wants to have all 200 items shown on screen as toasts in the same time? that’s insanity. :smiley:

10

Use the endpoint that returns a single todo by id and increment the id by one for each click.

Or fetch all the todos and save them then selected them by index (incrementing the index).

1 Like
11

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.