Diffculty in sending json array from ajax to view spring mvc

Question

I've consumed a json response from controller with ajax which looks like this:

controller:

@GetMapping("/articles/json")
@ResponseBody
public List<Article>  viewArticle(Map<String, Object> viewBag) {
    Iterable<Article> articles = articleRepository.findAll(); 
    for (Article article:articles) {
        articles1.add(article);
    }
    return articles1;
 }
@GetMapping("/articles/ajax")
    public String  viewArticlesAjax(Map<String, Object> viewBag) {

        return  "articles/list-ajax";

    }

articles.js looks like this

(function () {
if($('.page-articles-ajax').length > 0){
    console.log("Yea Im working",$.get);
    $.get( "/articles/json", function( data ) {
        console.log('got data',data);
        if(data && data.length){
            for(var i = 0;i < data.length; i++){
                var article = data[i];
                console.log("article",article);
            }
        }
    });
}

})();

list-ajax.html looks like this:

<html xmlns:th="http://www.thymeleaf.org"
      th:replace="~{fragments/layout :: layout (~{::body},'owners')}">

<body>

<h1>Articles</h1>
<div class="page-articles-ajax">



</div>

</body>
</html>

in articles/json ,the json array is returned (here it is).I want to show the json response in a table format where the columns would be "title", "description" and "author". Being new to Spring and MVC I am facing difficulties.

Any help with this?

Can you maybe show the view code where you want to use the articles response? — Rentius2407
– Rentius2407, Commented Dec 20, 2018 at 8:18
@ProteetiProva Could you also explain what you are trying to achieve in layman's terms please? — Minar Mahmud
– Minar Mahmud, Commented Dec 20, 2018 at 10:12
@MinarMahmud with my novice knowledge I tried to simplify as much as I could. Edited the question — Proteeti Prova
– Proteeti Prova, Commented Dec 21, 2018 at 7:37

Minar Mahmud · Accepted Answer · 2018-12-21 09:51:02Z

1

I would suggest you to use jQuery plug-in named DataTables. This is a stable tool which I have experience of using in production.

You need to do something like this:

<div class="page-articles-ajax">
    <table id="articleTable">
    </table>
</div>

And in js:

$(function() {
    $('#articleTable').DataTable({
        ajax: '/articles/json'
    });
});

DataTables is a highly customizable plug-in. See it's ajax manual for more.

If you don't want to use this plug-in, you need to build the table with JavaScript after you have the response data from backend. You can use jQuery's strong API to achieve this easily.

Suggestions & Notes:

=> Change to

@GetMapping(value = "/articles/json", produces = MediaType.APPLICATION_JSON_VALUE)

=> produce and consume these terms are used from the perspective of API endpoint/backend.

answered Dec 21, 2018 at 9:51

Minar Mahmud

2,6636 gold badges22 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Diffculty in sending json array from ajax to view spring mvc

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related