How to use thymeleaf to update a table dynamically?

Question

I have a html code which includes the following part:


                
                    
                        edit
                        remove
                    
                    
                        
                            
                                
                                IBIS RESTAURANT
                            
                            
                                
                                14/01/1991
                            
                        
                        
                            
                                
                                Nice
                            
                            
                                
                                Family Friendly
                            
                            
                                
                                Good
                                                  
                        
                    
                
                
                    
                        edit
                        remove
                    
                    
                        
                            
                                
                                IBIS RESTAURANT2
                            
                            
                                
                                14/01/1992
                            
                        
                        
                            
                                
                                Nice2
                            
                            
                                
                                Family Friendly2
                            
                            
                                
                                Good2

which creates a table like page. As default, I have some information in the table (as you see). On this page, there is also a button which is supposed to update the table. This button triggers an ajax function like the following:

$.ajax({
    type : "POST",
    url : "/findUserReviews", 
    dataType : "JSON",
    success : function(data) {

        console.log("hiasdfdf");
    }
});

As you can see, a springcontroller method is called which do some searches and finally set the following model object:

@RequestMapping(value = "/findUserReviews")
public @ResponseBody List findUserReviews(Model model) {

    ModelAndView modelAndView = new ModelAndView();
    
    List resultReviews = reviewRepository.findByUser(user);
    List allUserReviews = new ArrayList(resultReviews);

    modelAndView.addObject("myReviewList", allUserReviews);

    return allUserReviews;
}

Now, what I want to do is to update the table that I have with the information that I get using the above controller using thymeleaf. For example, I would like to have myReviewList[0].date instead of 14/01/1991 when I click on the update button but I don't know how I can do it.

Any help would be appreciated.

PS 1: I'm new to the whole topic of spring boot, thymeleaf and ajax. If I am totally wrong and there is a better or simpler way, I am open to new ways :).

PS 2: I want to have my table in the existing format and for some reason don't want to use table tag.

Update 1: Here is the sample data:

    [
  {
    "id": "5fb69a6bc8a2bf2620fb6d29",
    "first_point": "first_point",
    "second_point": "",
    "third_point": "",
    "fourth_point": "",
    "fifth_point": "",
    "sixth_point": "",
    "seventh_point": "",
    "place": {
      "place_name": "Ibis Budget Essen Nord, Am Lichtbogen 1, 45141 Essen, Germany",
      "id": "5fb69a6bc8a2bf2620fb6d28",
      "longitude": 6.98807,
      "latitude": 51.47436,
      "municipalitySubdivision": "Altenessen-Süd",
      "municipality": "Essen",
      "countrySecondarySubdivision": "Essen",
      "countryTertiarySubdivision": "undefined",
      "countrySubdivision": "North Rhine-Westphalia",
      "country": "Germany",
      "place_category": "HOTEL_MOTEL"
    },
    "user": {
      "id": "5fad89730923613ac83edb27",
      "email": "test2@test.com",
      "password": "$2a$10$7g.DHMvBaC2dsafaerwerweefscweVB2k5R6jaQkTpx/gPHy",
      "fullname": null,
      "enabled": true,
      "roles": [
        {
          "id": "5e5aa2db383ba54434092e8b",
          "role": "ADMIN"
        }
      ],
      "firstname": "test2-new",
      "lastname": "test2"
    },
    "date": "Thu Nov 19 17:16:43 CET 2020",
    "textScore": 0
  }
]

Update 2: The information that I need from the above data object is:

That is, the html code that you see right now, is a sample one filled in with some sample values. In reallity, the content of the table will come from the data object (i.e. from place_name, date, first_point,first_point,..., seventh_point elements).

Swati · Accepted Answer

You can create html structure inside your ajax success function .First you need to loop through JSON Array then get values using value.keyname and append these htmls using += to some variable.Lastly , use .append method of jquery to append divs inside your ui-table div.

Demo Code :

var data = [{
  "id": "5fb69a6bc8a2bf2620fb6d29",
  "first_point": "first_point",
  "second_point": "Okay",
  "third_point": "Goods",
  "fourth_point": "",
  "fifth_point": "",
  "sixth_point": "",
  "seventh_point": "",
  "place": {
    "place_name": "Ibis Budget Essen Nord, Am Lichtbogen 1, 45141 Essen, Germany",
    "id": "5fb69a6bc8a2bf2620fb6d28",
    "longitude": 6.98807,
    "latitude": 51.47436,
    "municipalitySubdivision": "Altenessen-Süd",
    "municipality": "Essen",
    "countrySecondarySubdivision": "Essen",
    "countryTertiarySubdivision": "undefined",
    "countrySubdivision": "North Rhine-Westphalia",
    "country": "Germany",
    "place_category": "HOTEL_MOTEL"
  },
  "date": "Thu Nov 19 17:16:43 CET 2020",
  "textScore": 0
}, {
  "id": "5fb69a6bc8a2bf2620fb6d29",
  "first_point": "first_point",
  "second_point": "Okay",
  "third_point": "Goods",
  "fourth_point": "",
  "fifth_point": "",
  "sixth_point": "",
  "seventh_point": "",
  "place": {
    "place_name": "Soemthingsss",
    "id": "5fb69a6bc8a2bf2620fb6d28",
    "longitude": 6.98807,
    "latitude": 51.47436,
    "municipalitySubdivision": "Altenessen-Süd",
    "municipality": "Essen",
    "countrySecondarySubdivision": "Essen",
    "countryTertiarySubdivision": "undefined",
    "countrySubdivision": "North Rhine-Westphalia",
    "country": "Germany",
    "place_category": "HOTEL_MOTEL"
  },
  "date": "Thu Nov 29 17:16:43 CET 2020",
  "textScore": 0
}];
/*$.ajax({
    type : "POST",
    url : "/findUserReviews", 
    dataType : "JSON",
    success : function(data) {*/

var html = "";
//loop through json datas
$(data).each(function(index, value) {
  //generate htmls and append same to variable `html`
  html += ' edit remove '

  html += ' Place
' + value.place.place_name + ''

  html += '' + value.date + '
  ' + value.first_point + ' 
  ' + value.second_point + '
' + value.third_point + ''

  //same for all point i.e : value.fourth_poin..etc
})
$(".ui-table").append(html) //append datas inside your div
/*  }
});*/

.remove {
  background-color: red;
}

.edit {
  background-color: blue;
}

How to use thymeleaf to update a table dynamically?

Answers (1)

Related Questions