如何在javascript中迭代地图数组列表？答案

【问题标题】：How to iterate a map arraylist in javascript?如何在javascript中迭代地图数组列表？
【发布时间】：2014-03-23 23:35:06
【问题描述】：

我有以下示例地图数组列表。首先，我如何使用 javascript 从纯 html 中访问这个数组列表？其次，我如何遍历这个列表？

<%@page import="org.json.simple.JSONObject"%>
<%@page import="org.json.simple.JSONArray"%>
<%
JSONObject json = new JSONObject();
JSONArray  list = new JSONArray();
JSONObject course1,course2,course3,course4,course5;

course1 = new JSONObject();
course1.put("code", "ME101");
course1.put("desc", "Marine Engineering 101");
course1.put("sched", "June 1 - August 30, 2014");
course1.put("rsvd", "56");
course1.put("crssched", "cme101s1");
list.add(course1);
course2 = new JSONObject();
course2.put("code", "ME102");
course2.put("desc", "Marine Engineering 102");
course2.put("sched", "September 1 - November 31, 2014");
course2.put("rsvd", "25");
course2.put("crssched", "cme102s1");
list.add(course2);
course3 = new JSONObject();
course3.put("code", "CS101");
course3.put("desc", "Certificate on Seamanship 101");
course3.put("sched", "June 1 - June 30, 2014");
course3.put("rsvd", "36");
course3.put("crssched", "ccs101s1");
list.add(course3);
course4 = new JSONObject();
course4.put("code", "ME201");
course4.put("desc", "Marine Engineering 201");
course4.put("sched", "June 15 - July 16, 2014");
course4.put("rsvd", "65");
course4.put("crssched", "cme201s1");
list.add(course4);
course5 = new JSONObject();
course5.put("code", "ME202");
course5.put("desc", "Marine Engineering 202");
course5.put("sched", "July 1 - August 30, 2014");
course5.put("rsvd", "15");
course5.put("crssched", "cme202s1");
list.add(course5);

json.put("Courses", list);
response.setContentType("application/json");
response.getWriter().write(json.toString());

场景是我在网络服务器中有纯 html 文件，我从另一台服务器上的 jsp 文件获取数据，我需要使用 javascript 或 jquery 在表格中显示到 html 文件。

有什么想法吗？

编辑

根据 user13500 的建议，我查看了 JSON 并更新了上面的示例数据。测试它写在页面上，它确实打印出键值对。

我现在如何“公开” json 对象并从另一个 html 页面访问它？

【问题讨论】：

List<Map<String, String>> list 不是 Javascript。
不，不是。这是来自 jsp 的“样本”数据。
@JNewbie：还请注意，从您更新的代码中，该代码将服务于一个对象，该对象包含一个包含对象的数组，而不是一个包含对象的数组。并且：当您发送“application/json”标头时，ajax 请求的返回将不是是一个字符串，而是一个对象。（所以 Javascript 中没有 JSON.parse(reply)。）
如果你想要数组说list.toString()而不是json.put("Courses", list); and json.toString()
在javascript中你可以添加if (typeof responseData === "string") { responseData = JSON.parse(responseData); }

标签： javascript jquery html jsp arraylist

【解决方案1】：

看起来您可能想查看JSON。

Creating a json object in jsp and using it with JQuery
- （如果您不使用 jQuery，请查看 JSP 部分。）
Returning JSON response from Servlet to Javascript/JSP page

实际上是从 JSP 传递这样的东西（没有格式化）：

...
}, {
  "code"     : "ME201",
  "desc"     : "Marine Engineering 201",
  "sched"    : "June 1 - June 30, 2014",
  "rsvd"     : "65",
  "crssched" : "cme201s1"
} , {
  "code"     : "ME202",
  "desc"     : "Marine Engineering 202",
  "sched"    : "June 1 - June 30, 2014",
  "rsvd"     : "65",
  "crssched" : "cme202s1"
}
...

在 Javascript 中，您可以执行 JSON.parse() 并通过迭代等方式访问数组对象。

var i, obj, objArray = JSON.parse(json_from_JSP);

for (i = 0; i < objArray,length; ++i) {
    obj = objArray[i];
    // Here you would have e.g. obj.code === "ME201"
    // or you can access it by obj["code"] 
    // or objArray[i]["code"] etc.
}

在您的 HTML 文档中，您可以包含 JSON 脚本，如果您的目标受众很广泛并且他们的浏览器可能不支持 JSON，则可以直接形成您自己的服务器或通过从例如cdnjs 链接。（搜索“json”——json2 就足够了。）

根据您的评论进行编辑和更新：

从服务器获取数据。您可以通过脚本嵌入将其直接输出到文档中，通常：

var jsonData = '<%= json.toString() %>';

在这种情况下，由于您想通过请求在已呈现的页面上获取数据，因此您使用 Ajax 请求。当你使用 jQuery 时，一个简单的例子是：

HTM：

<!DOCTYPE html>
<html>
<head>
<title>JSP Ajax test</title>
<meta charset="UTF-8" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button id="btn_data">Get data</button>
<pre id="dump"></pre>
</body>
</html>

Javascript：

// Function to process the data in response
function process_json(jsonString) {
    var i, obj, data = JSON.parse(jsonString);
        dump = $("#dump");

    // If you want to see what the data string looks like
    dump.html(jsonString + "\n");

    // Loop the array and do what you want with each object.
    for (i = 0; i < data.length; ++i) {
        $("#dump").append("CODE: " + data[i].code + "\n");
    }
}

$(document).ready(function () {
    $("#btn_data").click(function () {
        $.ajax({
            type    : "GET",
            url     : "schedules.jsp",
            async   : false,
            success: process_json // Function to process the data
        });
    });
});

更具可读性的转储：

你也可以在玩这个的时候有一个漂亮的打印功能，例如：

function pretty_print(jsonString) {
    var obj = JSON.parse(jsonString),
        str = JSON.stringify(obj, null, "    ");
    $("#dump").html(str + "\n--------------------------\n");
}

查看 ajax 请求。与 jQuery 或纯 Javascript 一起使用。您还可以扩展它以包含您将在服务器上进一步处理的 POST 和 GET 数据。通常使有针对性的请求过滤掉你想要的作为回报。

样本输出：

使用上面的 + pretty_print() 你的输出应该是这样的：

+------------+
|  Get data  |   <--- button ;-)
+------------+


[
    {
        "code": "ME201",
        "desc": "Marine Engineering 201",
        "sched": "June 1 - June 30, 2014",
        "rsvd": "65",
        "crssched": "cme201s1"
    },
    {
        "code": "ME202",
        "desc": "Marine Engineering 202",
        "sched": "June 1 - June 30, 2014",
        "rsvd": "65",
        "crssched": "cme202s1"
    }
]
--------------------------
CODE: ME201
CODE: ME202

【讨论】：

谢谢！我查看了 JSON 并更新了上面的示例数据。如何“公开”它以便能够通过 javascript 从另一个 html 页面访问它？
@JNewbie：如果我说您的 JSP 脚本不是服务于 HTML 的代码的一部分，而是您想要“调用”以获取 JSON 数据/映射的后端脚本，我是否正确地理解了您数组？
是的，你是对的。我需要从 html 文件 (viewschedules.html) 中调用包含此 JSON 映射数组的 jsp 文件 (schedules.jsp)。
非常感谢您抽出宝贵时间帮助我解决这个问题。由于您提供的解决方案，我现在可以使用它。如果我现在可以，我会给你 +1，但我仍然不能。非常感谢！
@JNewbie：不客气。您还表现出在回应和引起兴趣方面的努力，这是一个很大的优势。将 AJAX + JSON 与一些服务器语言和 Javascript 结合使用非常强大，并且在涉及动态内容时提供了一些相当不错的可能性。关于这个主题，这里有很多很好的 Q/A。另请查看stackoverflow.com/tags/javascript/info 标签页，尤其是。 学习 JavaScript 部分（如果您是 Javascript 新手。）如果您非常感兴趣，请阅读/浏览 ECMA 标准。我也推荐这个：webplatform.org