Wie zum Durchlaufen einer Karte arraylist in javascript?

Habe ich unten Beispiel anzeigen arraylist. Erstens, wie kann ich Zugriff auf diese arraylist von innen reines html mit javascript? Zweitens, wie kann ich die Iteration über diese Liste?

<%@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());

Szenario ist, dass ich html-Dateien in den webserver und ich bekomme Daten von jsp-Dateien auf einem anderen server die ich brauche, um die Anzeige in einer Tabelle in die html-Dateien mit javascript-oder jquery.

Irgendwelche Ideen?

BEARBEITEN

Basierend auf user13500 Vorschlag, ich habe mir in JSON und aktualisiert die sample-Daten vor. Es getestet zu schreiben auf der Seite und es tut drucken Sie die Schlüssel-Wert-Paare.

Wie kann ich jetzt "expose" das json-Objekt und greifen Sie von einer anderen html-Seite?

  • List<Map<String, String>> list ist nicht Javascript.
  • Nein ist es nicht. Es ist ein "sample" - Daten von jsp.
  • Beachten Sie auch, dass aus der aktualisierten code, der dazu dienen würde, die ein Objekt halten ein array holding-Objekte, und nicht ein array holding-Objekte. Und: wie Sie senden Sie die "application/json" - header sowie die Rückkehr auf die ajax-Anfrage wird nicht ein string sein, sondern das Objekt. (Also keine JSON.parse(reply) im Javascript).
  • Wenn Sie möchten, dass das array sagen list.toString() statt json.put("Courses", list); and json.toString()
  • In javascript könnte man hinzufügen, eine if (typeof responseData === "string") { responseData = JSON.parse(responseData); }
  • Wenn ich entfernen json.put("Courses",list); und json.toString() und stattdessen list.toString() es tut, drucken Sie ein array mit den Daten. Aber wie kann ich jetzt beziehen sich auf jedes array-Element? Mit der vorherigen Methode, ich kann beziehen sich auf jedes Element als json.Kurse[0].code, und so weiter.
  • Wenn du meinst in das Javascript, das wäre json[0].code, und so weiter.
  • Oh wait. Ich vermisste, dass ein Teil in deinem Beispiel. Okay, ich glaube, ich habe es jetzt.
  • Sie könnten versuchen, diese: Client Seite: pastebin.com/raw.php?i=VpUvu37q
  • Und, natürlich, Wenn Sie wollen, um weitere Daten zu senden Objekte, zum Beispiel Kurse und einigen anderen Objekt-man konnte die Methode wie im Skript z.B. json.put("courses", courses); ... json.put("users", users); ... und in Javascript könnte man dann Lesen responseData.courses und responseData.users als zwei verschiedene Objekte.

InformationsquelleAutor JNewbie | 2014-02-22
  1. 0

    Sieht aus wie du Aussehen willst, in JSON.

    In Wirkung liefern etwas wie dieses von JSP (Ohne Formatierung):

    ...
}, {
  "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"
}
...

    In Javascript könnte man dann tun JSON.parse() und den Zugriff auf das array Objekte durch iteration etc.

    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.
}

    In Ihr HTML-Dokument über JSON-Skript, wenn Ihre Zielgruppe ist breit und könnte nicht die JSON-Unterstützung in Ihrem browser, direkt bilden Sie einen eigenen server oder durch die Verknüpfung von beispielsweise cdnjs. (Suche "json" – json2 sollte ausreichen.)

    Bearbeiten wie pro Ihren Kommentar und update:

    Bekommen die Daten vom server. Sie entweder die Ausgabe direkt in das Dokument durch ein Skript einbetten, in der Regel:

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

    In diesem Fall, wie Sie möchten, um die Daten durch die Anfrage auf eine bereits gerenderte Seite, die Sie verwenden Ajax-request. Wie Sie jQuery verwenden ein einfaches Beispiel wäre:

    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
        });
    });
});

    Ein bisschen mehr lesbar dump:

    Können Sie auch einen pretty-print-Funktion, während Sie spielen Sie mit diesem, Beispiel:

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

    Blick auf ajax Anfragen. Entweder mit jQuery oder in reinem Javascript. Sie können auch verlängern Sie enthalten POST und GET Daten an, die weitere Prozess auf dem server. In der Regel gezielte Anfragen filtern Sie heraus, was Sie dafür wollen.

    Beispiel-Ausgabe:

    Mit den oben genannten + pretty_print() Ihre Ausgabe sollte etwas wie:

    +------------+
|  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
    • Danke! Ich sah in JSON und aktualisiert haben, die sample-Daten vor. Wie mache ich was "entlarven" Sie werden in der Lage, Zugriff über javascript aus einer anderen html Seite?
    • Lese ich dich richtig, wenn ich sage, Ihre JSP-Skript ist nicht Teil des Codes dienen der HTML -, sondern ein backend-Skript, das Sie wollen, um zu "anrufen", um die JSON-Daten/map array?
    • Ja, Sie sind richtig. Ich muss rufen Sie eine jsp-Datei (Zeitpläne.jsp), die enthalten würde, diese JSON-Karte array, aus dem inneren einer html-Datei (viewschedules.html).
    • Ich Schätze Sie die Zeit nehmen, mir zu helfen, mit diesem problem. Ich habe es jetzt funktioniert, weil die Lösung, die Sie zur Verfügung gestellt. Ich gebe dir +1 wenn ich könnte, aber ich kann es immer noch nicht. Ich danke Ihnen sehr!
    • Sie sind sehr willkommen. Sie zeigen auch auf, Anstrengungen zu reagieren und Ihr Interesse, das ist ein großes plus. Der Einsatz von AJAX + JSON, in Kombination mit server-Sprache und Javascript ist sehr mächtig und macht für einige ziemlich raffinierte Möglichkeiten, wenn es um dynamische Inhalte. Es gibt viele gute Q/A ' s hier auf SO auf das Thema. Schauen Sie sich auch das stackoverflow.com/tags/javascript/info tag-Seite, esp. JavaScript Lernen - Abschnitt (wenn Sie neu in Javascript.) Lesen/überfliegen den ECMA-standard, wenn Sie sehr interessiert sind. Ich habe auch das hier empfehlen: webplatform.org
    • Danke für webplatform.org ich habe Lesezeichen für später zu Lesen. Übrigens, entdeckte ich über jQuery.getJSON() und JSON-Vorlage, die ich denke, macht meine Aufgabe sehr viel einfacher. Aber ich konnte nicht gewusst haben über, ohne Ihre Hilfe und verweist mich auf die JSON verwenden.
    • Gut. Ich dachte daran, zu erwähnen, jQuery JSON als gut, aber dann rutschte aus irgendwie. Beachten Sie nur eins: mit jQuery eine Menge Fehler bekommen stummgeschaltet; als solche debugging / abfangen von Fehlern kann schwieriger geworden, in einer Entwicklungsphase. Das ist mit jQuery im Allgemeinen.

    InformationsquelleAutor user13500
Schreibe einen Kommentar