如何将Java中的JSON对象传递到JavaScript？

Question

我正在尝试将数据从Spring控制器传递到JavaScript，但没有成功。我该使用Ajax来处理吗？请您能否给我一些提示如何处理？最好的方法是什么？

在我的控制器中，我尝试传递数据：

@RequestMapping(value = "/map", method = RequestMethod.GET)
public String map(ModelMap model) {

...

model.addAttribute("trackpoints", json);


return "map";

}

其中json是一个Gson对象（JsonObject），包含以下内容：

{"trackpoints":[{"latitude":52.390556,"longitude":16.920295},
{"latitude":52.390606,"longitude":16.920262}]}

在我的JSP文件中，我有以下内容：

<script type="text/javascript">

var myJSON = {};

myJSON = ${trackpoints};

document.writeln(myJSON.trackpoints);

</script>

但是结果是：

[object Object],[object Object]

我会详细解释一下：

我想使用Google Maps API来显示地图，并从许多纬度和经度中绘制路径坐标。

我认为JSON比列表更好，但我可能错了。

我试图调整文档中的代码-在下面的代码中，我尝试用循环替换硬编码坐标，并使用JSON对象中的值。

<script type="text/javascript">
function initialize() {
    var myLatLng = new google.maps.LatLng(0, -180);
    var myOptions = {
        zoom : 3,
        center : myLatLng,
        mapTypeId : google.maps.MapTypeId.TERRAIN
    };

    var map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);
    var flightPlanCoordinates = [
            new google.maps.LatLng(37.772323, -122.214897),
            new google.maps.LatLng(21.291982, -157.821856),
            new google.maps.LatLng(-18.142599, 178.431),
            new google.maps.LatLng(-27.46758, 153.027892) ];
    var flightPath = new google.maps.Polyline({
        path : flightPlanCoordinates,
        strokeColor : "#FF0000",
        strokeOpacity : 1.0,
        strokeWeight : 2
    });

    flightPath.setMap(map);
}
</script>

我希望您现在更加清楚了：）

- user1199476

Answer 1

myJSON.trackpoints 是由两个对象组成的数组。如果你想将其写成 HTML，你可以这样做：

function writeCoordinates(coords) {
    document.writeln('<div>lat = ' + coords.latitude);
    document.writeln(', lon = ' + coords.longitude + '</div>');
}

int len = myJSON.trackpoints.length;
for (int i = 0; i < len; i++) {
    writeCoordinates(myJSON.trackpoints[i]);
}

顺便说一下：当您使用AJAX请求时，JSON非常有用，但对于“普通”请求，最好将纯Java对象放入模型中，例如：

Spring控制器：

List<Coordinate> trackpoints = ...
model.addAttribute("trackpoints", trackpoints);

JSP：

<c:forEach items="${trackpoints}" var="coord">
    <div>lat = ${coord.latitude}, lon = ${coord.longitude}</div>
</c:forEach>

假设 Coordinate 类具有方法 getLatitude() 和 getLongitude()。该方法在 Spring 控制器中甚至可以用于“正常”和 AJAX 请求，通过使用 JSON 编码器，例如 Jackson，以及 ContentNegotiatingViewResolver。

- jabu.10245

Answer 2

看一下：http://jsfiddle.net/AHue8/4/

我想这里的要点是你需要指定你想要的trackpoint对象中的哪个元素，并且你可以控制它们在浏览器中的显示方式。由于“trackPoint”不是原始数据类型（它是一个具有2个数据元素纬度和经度的对象），浏览器不知道如何解释它，因此你必须告诉它如何处理。

- Jeff Woodard

Answer 3

我有同样的需求：从Spring Boot控制器传递Java对象列表到Javascript代码（作为Json对象处理），我找到了一个解决方案：

在Java中，获取MyObject列表，将其转换为等效的文本Json表示，并将其附加到模型，结果类似于下面的内容：

import com.google.gson.Gson;

@Service
public class MyService {

    private static final Gson GSON = new Gson();
    
    
    public void getData(final Model model) {
        List<MyObject> myObjectList = getObjects...
        model.addAttribute("myObjectListAsJsonText", GSON.toJson(myObjectList));
    }
    
}

在 JSP/HTML 页面中（不是在单独的 JS 文件中）

添加一个脚本块以获取 MyObject 列表的 Json 表示，并将其转换为可以由 Javascript 处理的 Json 数组：

<title>MyApp | Main page</title>
<link rel="shortcut icon" href="resources/img/favicon.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script  th:inline="javascript">
    var myObjectListAsJson = '${myObjectListAsJsonText}';
    var myObjectJsonArray = JSON.parse(myObjectListAsJson);
</script>

在同一页面的任何分隔的Javascript文件中，可以访问全局变量myObjectJsonArray，该变量保存着MyObject项的Json数组，例如：

function processMyObjectJsonArray() {
    for (var index = 0; index < myObjectJsonArray.length; index++) {
        var myObjectJsonItem = myObjectJsonArray[index];
        console.log("Can access ID attribute of an item of MyObject array:" + myObjectJsonItem.id);
    }
}

- Shessuky