Spring WebFlux - 在视图中使用 REST 填充新实体的 ID

Question

My question is somewhat related to this question (but I am using WebFlux) - spring entity : return id of created record

My Entity:

    @Table
    public class Todo {
        @Id
        private Long id;
        private String text;
        private boolean completed;
        ...Getters Setters...
    }

My Repository (Reactive):

public interface TodoRepository extends ReactiveCrudRepository<Todo, Long> {

    Flux<Todo> findAll();
    
    Flux<Todo> findByText(String text);
    
}

I have a Spring WebFlux's RestController like below:

@RestController
@RequestMapping("/api")
class TodoController { 
private TodoRepository repository;
......   
@PostMapping("/todo")
        Mono<Todo> addTodo(@RequestBody Todo todo) {
            logger.info("Creating New Todo...");
            return repository.save(todo).log();
            //return repository.save(todo);
        }
}

On the view in JS (responsible for POSTing), I have the following:

    function insertNewRecord(formData) {
    fetch('/api/todo', {
        method: 'POST',
        headers: {
            'Accept': 'application/json, text/plain, */*',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ id: formData.todoid, text: formData.todotext, completed: formData.todocompleted })
    }).then((response) => {
        if (response.status >= 400 && response.status < 600) {
            throw new Error("Bad response from server");
        }
        if (response.status === 200) {
            alert('Entry Successful.. ! \nTable will be reloaded now.!');
            //reloadRecords();
            var table = document.getElementById("dataTable").getElementsByTagName('tbody')[0];
            var newRow = table.insertRow(table.length);
            
            // WHAT SHOULD I DO IN PLACE OF BELOW TWO LINES TO GET ID OF NEW ENTITY?

            cell1 = newRow.insertCell(0);
            cell1.innerHTML = formData.todoid;

            cell2 = newRow.insertCell(1);
            cell2.innerHTML = formData.todotext;
            cell3 = newRow.insertCell(2);
            cell3.innerHTML = formData.todocompleted;
            cell4 = newRow.insertCell(3);
            cell4.innerHTML = `<a class="btn btn-sm btn-warning mr-3" onClick="onEdit(this)">Edit</a>
                       <a class="btn btn-sm btn-danger" onClick="onDelete(this)">X</a>`;



        }
        // alert(response.status);
    })
        .catch((error) => {
            // Your error is here!
            alert(error)
        });
}

Using above post request from JS ( here , line # 20-56), the new entry is saved in the backend successfully. No issues here at all till this point.

My Form and table on the Thymeleaf template:

<form onsubmit="event.preventDefault();onFormSubmit();"
            autocomplete="off">
            <div class="row mb-2">
                <div class="col-md-2 text-right font-weight-bold">
                    <label for="todoid" class="form-label">Id</label>
                </div>
                <div class="col-md-2">
                    <div class="input-group">
                        <input type="text" class="form-control form-control-sm"
                            name="todoid" id="todoid" readonly>
                    </div>
                </div>
            </div>


            <div class="row mb-2">
                <div class="col-md-2 text-right font-weight-bold">
                    <label for="todotext" class="form-label">Description</label>
                </div>
                <div class="col-md-6">
                    <div class="input-group">
                        <input type="text" class="form-control form-control-sm"
                            name="todotext" id="todotext">
                    </div>
                </div>
            </div>

            <div class="row mb-2">
                <div class="col-md-2 text-right font-weight-bold">
                    <label for="todocompleted" class="form-label">Completed?</label>
                </div>
                <div class="col-md-2">
                    <div class="input-group">
                        <select class="form-select form-control-sm" name="todocompleted"
                            id="todocompleted">
                            <option value="true">True</option>
                            <option selected value="false">False</option>
                        </select>
                    </div>
                </div>
            </div>


            <div class="row mt-3 mb-3">
                <div class="col-md-2 font-weight-bold"></div>
                <div class="col-md-9">
                    <input type="submit" value="Submit"
                        class="btn btn-sm btn-primary btn-block">
                </div>
            </div>

        </form>
    <div class="row mt-3 mb-3">
        <div class="col-md-2 font-weight-bold"></div>
        <div class="col-md-9">
            <table class="table table-sm table-striped" id="dataTable">
                <thead>
                    <tr>
                        <th>Id</th>
                        <th>Description</th>
                        <th>Completed?</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody id="appDataTable2"></tbody>
            </table>
        </div>
    </div>

Now, the html table is populated without the Id of the new entity/entry like this:

But this is what I expect to happen. ie populate the newly generated id too with the same request. Ie without reloading the entire list/table or refreshing the page:

I am lost here. Any relevant example's link or clue on this will be greatly appreciated.

Answer 1

your problem is quite simple you are using the object formData to populate your table, which is the data that is input in your html-form.

You have to use the returned data from the backend.

So this line doesnt work cell1.innerHTML = formData.todoid; , there is no value in the id field, because that data is set by the backend.

fetch('https://foobar.com', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(someData),
})
.then(response => response.json()) // extract json from response
.then(data => {
  
   ...

   cell1.innerHTML = data.id;   // use the returned data

   ...
})

This is the reason we need to see the entire codebase. Because this part of code was never posted by you in the first place.