Passing JSON string from jsp to js file

Question

So, I have a json string (used Gson) with information from my database in my jsp file and I need to pass that info to a js function.

JSP (consulta.jsp):

<%@ page language="java" import="java.sql.*" %>
<%@ page language="java" import="db.Conexao" %>
<%@ page language="java" import="java.util.ArrayList" %>
<%@ page language="java" import="com.google.gson.Gson" %>

<%
try {
//instancia classe de conexao
Conexao conexao = new Conexao("localhost", "app", "root", "diogo");
//conecta no banco
Connection connection = conexao.connect();

//cria o statment e realiza a consulta
Statement st = connection.createStatement();
String sql = "SELECT * FROM crimes";
ResultSet rs = st.executeQuery(sql);

final ArrayList<String> id= new ArrayList<String>();

while(rs.next()) {
    id.add("id");
    id.add(rs.getString("id"));
    id.add("latitude");
    id.add(rs.getString("latitude"));
    id.add("longitude");
    id.add(rs.getString("longitude"));
}

String[] array = new String[id.size()];
array = id.toArray(array);

Gson gson = new Gson();
String json = gson.toJson(array);
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(json);

//fecha a conexao com o banco
connection.close();
}
catch(Exception e) {
out.println(e.toString());
}

%>

JS function:

function carregarPontos() {

$.getJSON('consulta.jsp', function(pontos) {

    $.each(pontos, function(index, ponto) {

        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(LATITUDE VALUE HERE, LONGITUDE VALUE HERE),
            title: value,
            map: map,
            icon: 'arma2.png'
        });
    }
}

PS:. My json string is ["id","1","latitude","-23.4831104000","longitude","-46.6330227000","id","4","latitude","-23.5874328731","longitude","-46.6573598700"]. Is it right? Thank You

Your life would be a lot easier if you'd return an array of Map objects, with each map containing the lat/long values for a single point. — Pointy, Oct 24 '14 at 20:35
Can you explain me how to do that? Please mannnnn, I need this — diogoguidotte, Oct 24 '14 at 20:45

score 1 · Accepted Answer · answered Oct 24 '14 at 20:56

You'd be better off making a more useful data structure in the first place. Make a list of maps:

final ArrayList<HashMap<String, String>> id= new ArrayList<HashMap<String, String>>();

while(rs.next()) {
    HashMap<String, String> map = new HashMap<String, String>();
    map.put("id", rs.getString("id"));
    map.put("latitude", rs.getString("latitude"));
    map.put("longitude", rs.getString("longitude"));
    id.add(map);
}

I'm pretty sure that there's no need to convert that ArrayList to a plain array; Gson should be able to spit it out directly:

Gson gson = new Gson();
String json = gson.toJson(id);
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(json);

The JSON you'll get out will look like

[{"id": "1", "latitude": "-23.483", "longitude": "46.633"}, ... ]

thus your JavaScript code has a much easier time of it:

$.getJSON('consulta.jsp', function(pontos) {

    $.each(pontos, function(index, ponto) {

        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(ponto.latitude, ponto.longitude),
            title: value,
            map: map,
            icon: 'arma2.png'
        });
    }
});

Note that the Google Maps API may want your lat/long values as numbers, not strings:

$.getJSON('consulta.jsp', function(pontos) {

    $.each(pontos, function(index, ponto) {

        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(+ponto.latitude, +ponto.longitude),
            title: value,
            map: map,
            icon: 'arma2.png'
        });
    }
});

Thank you so much. IT WORKED. I think I love you – diogoguidotte Oct 24 '14 at 21:31 — diogoguidotte, Oct 24 '14 at 21:31

Passing JSON string from jsp to js file

1 Answers1