How to use json array in ajax ? (java)

Question

I have a servlet which returns json data like :

{"type1":"value1","type2":"value2"}{"type1":"value3","type2":"value4"}

and then I want get this data to draw a table inside html, using ajax:

function showTable() {

    $.ajax('../json', {
        method: 'GET',
        success: function (users) {
            var result = "<tr>" +
                "<th>type1</th>" +
                "<th>type2</th>" +
                "</tr>";
                for (var i = 0; i < users.length; i++) {
                result += "<tr>" +
                    "<td>"+users[i].type1+"</td>" +
                    "<td>"+users[i].type2+"</td>" +
                    "</tr>";
            }
            var table = document.getElementById("showtable");
            table.innerHTML(result);
        }
    });
}

But nothing happens.

Servlet:

public class JsonController extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/json");
        PrintWriter writer = new PrintWriter(resp.getOutputStream());
        for (Object j : DBController.getController().getUsersInJSON()) {
            writer.append(j.toString());
            writer.flush();
        }
    }

This is how getUsersInJson() looks like. It takes data from some ArrayList<User> array and returns JSONArray :

public JSONArray getUsersInJSON() {
        JSONArray array = new JSONArray();
        for (User user : DBController.getController().get()) {
            JSONObject jUser = new JSONObject();
            jUser.put("name", user.getName());
            jUser.put("login", user.getLogin());
            jUser.put("email", user.getEmail());
            jUser.put("role", user.getRole().getName());
            jUser.put("country", user.getCountry());
            jUser.put("city", user.getCity());
            array.put(jUser);
        }
        return array;
    }

That is going wrong?

`"" + "+users[i].type1+" + "+users[i].type2+" + "";` you forget to quote. — MD Ruhul Amin, Jul 25 '17 at 13:46

score 2 · Answer 1 · answered Jul 25 '17 at 13:37

2

You are doing wrong, you have included the variable in quotes so value is not substituted. Do it this way:

$.ajax('../json', {
        method: 'GET',
        success: function (users) {
            var result = "<tr>" +
                "<th>type1</th>" +
                "<th>type2</th>" +
                "</tr>";
                for (var i = 0; i < users.length; i++) {
                result += "<tr>" +
                    "<td>"+users[i].type1+"</td>" +
                    "<td>"+users[i].type2+"</td>" +
                    "</tr>";
            }
            var table = document.getElementById("showtable");
            table.innerHTML(result);
        }
    });

answered Jul 25 '17 at 13:37

Kamesh

1,122
9
12

Fixed that. Still nothing works. – anya-tg Jul 25 '17 at 14:07
Try console.log(users) if you are able to see the output in your script function. – Kamesh Jul 25 '17 at 14:11
I've tried console.log(users), console.log(users.length), nothing happens, output is empty. But console.log('1') typed "1". – anya-tg Jul 25 '17 at 14:19
Than this might have something to do with your java code. Try printing your array in Java before returning it, if it prints the contents – Kamesh Jul 25 '17 at 14:26
It prints the content like `{"type1":"value1","type2":"value2"}{"type1":"value3","type2":"value4"}` – anya-tg Jul 25 '17 at 14:50
This is not proper json array. It should print something like [{"type1":"value1","type2":"value2"}, {"type1":"value3","type2":"value4"}] – Kamesh Jul 25 '17 at 14:55

score 0 · Answer 2 · answered Jul 25 '17 at 13:44

Try

 $.ajax('../json', {
    method: 'GET',
    success: function (users) {
        var users = $.parseJSON(users);
        var result = "<tr>" +
            "<th>type1</th>" +
            "<th>type2</th>" +
            "</tr>";
            for (var i = 0; i < users.length; i++) {
                result += "<tr>" +
                  "<td>"+users[i].type1+"</td>" +
                  "<td>"+users[i].type2+"</td>" +
                  "</tr>";
             }
        var table = document.getElementById("showtable");
        table.innerHTML(result);
    }
});

How to use json array in ajax ? (java)

2 Answers2