Блог

Я передаю ArrayList, но onclick передает параметру строку в функции javascript. Как я могу получить массив вместо строки

 <div class="card" th:data-work="${top.section}" onclick="showData(this.dataset.work)">
  

В окне консоли его печатная строка, но я передал массив, я не знаю, как его преобразовать в строку.

 const activityModal  = (work) => {
        console.log(typeof work) // string  
        console.log(work) //[com.example.working.Foobar@7r6r8e]
        console.log(work[0]) // [

    }
  

Содержимое data-work атрибута в div представляет собой строковое представление того, что возвращается ${top.section} . Итак, в вашем случае это выглядит так:

 <div class="card" 
     data-work="[com.example.working.Foobar@7r6r8e]" 
     onclick="showData(this.dataset.work)">some content</div>
  

Это [com.example.working.Foobar@7r6r8e] результат вызова toString() метода для каждого из ваших Foobar объектов в ArrayList, когда Thymeleaf обрабатывает шаблон.

Поэтому, чтобы получить полезные данные в div, вам необходимо переопределить toString() метод в вашем Foobar классе.

Кроме того, вам необходимо переопределить его таким образом, чтобы обеспечить удобное представление данных в каждом Foobar экземпляре.

В моем крошечном тестовом примере у меня есть только одно поле в моем тестовом классе, поэтому я сделал это:

 @Override
public String toString() {
    return "{ "amount":"   amount   "}";
}
  

Я решил отформатировать данные в формате JSON, чтобы их было легче обрабатывать с помощью JavaScript.

Теперь div выглядит примерно так (в моем случае):

 <div class="card" 
     data-work="[{ amp;quot;amountamp;quot;:123}, { amp;quot;amountamp;quot;:456}]" 
     onclick="showData(this.dataset.work)">click me!</div>
  

В showData функции на моей странице у меня есть это:

 function showData(work) {
    console.log(JSON.parse(work))
}
  

Это показывает, что мои данные были проанализированы из строки обратно в массив JavaScript, содержащий два объекта JS (потому что я поместил 2 объекта в свой ArrayList):

Будьте осторожны, как вы решите переопределить toString() — или если вы даже должны.

Возможно, вы предпочтете иметь отдельный метод, который генерирует строковое представление Foobar только для передачи в ваш шаблон. Возможно, вы не хотите, чтобы каноническое строковое представление вашего класса определялось потребностями вашей веб-страницы.

Они ( toString и ваш stringifier), вероятно, следует хранить в виде отдельных форматов, поскольку они служат совершенно разным целям.

(Также, если вы решите использовать JSON в качестве представления, которое вы передаете в Thymeleaf, используйте библиотеку для его создания — не ленитесь, как я в своей крошечной демонстрации: не используйте конкатенацию строк.)