发送 Java arraylist 作为 JavaScript 参数

Question

Problem

I send an array from StarConroller.java to Star.jsp page by model.addAttribute

StarConroller.java

List<SBook> books = booksService.findAll();
model.addAttribute("books ", books);

I want to send this array of books to Star.js by clicking the "Show books" button in Star.jsp

Star.jsp

<button type="button" onclick="show(`${books}`)">Show books</button>

Star.js

function show(books) {
    console.log(books);
}

When I click the "Show books" button I get the following in console

[SBook{SBookId=1, version=null, title='null', description='null'}, 
 SBook{SBookId=2, version=null, title='null', description='null'}, 
 SBookId{clauseId=3, version=null, title='null', description='null'}]

Issue

But I need a json array

update 1

SBook class

public class SBook{

    private Integer sBookId;
    private Integer version;
    private String title;
    private String description;

    public SBook() {
    }

    public SBook(Integer sBookId, Integer version, String title, String description) {
        this.sBookId= sBookId;
        this.version = version;
        this.title = title;
        this.description = description;
    }

    //Getter & Setters

    @Override
    public String toString() {
        return "SBook{" +
                "sBookId=" + sBookId+
                ", version=" + version +
                ", title='" + title + '\'' +
                ", description='" + description + '\'' +
                '}';
    }
}

Answer 1

You are adding a list of objects to the HTTP response, the HTTP template engine will convert it to a string using the toString method of SBook object. The converted string is not a valid JSON.

First, you need to convert list of objects to JSON format using parsing library (I'm using Jackson library in the below code):

List<SBook> books = booksService.findAll();
ObjectMapper mapper = new ObjectMapper();
String jsonString = mapper.writeValueAsString(List.of(sBook));
model.addAttribute("books ", books);

Then you need to parse this JSON string back to javascript object using JSON.parse :

function show(books) {
    let parsed = JSON.parse(books);
    console.log(parsed);
}