programming

Javascript: Ανάγνωση και ανάλυση JSON με jQuery και εμφάνιση σε πίνακα HTML

nc
Δημοσίευση: • Share Article:

@Το JSON είναι μια μορφή ανταλλαγής δεδομένων που λαμβάνονται από διάφορα API τρίτων. Έχοντας αυτό υπόψη, έχουμε συζητήσει σχετικά με την ανάλυση των δεδομένων json χρησιμοποιώντας το σενάριο php κάποτε πριν. Το jQuery παρέχει πολλές μεθόδους JSON όπως "getJSON", "parseJSON", "stringify". Εδώ θα επιλέξουμε και θα χρησιμοποιήσουμε τη μέθοδο "parseJSON" , η οποία αναλύει το json και επιστρέφει ένα αντικείμενο javascript.

JSON.parseJSON(JSON STRING)

Η συνάρτηση parseJSON() λαμβάνει την παράμετρο της συμβολοσειράς και επιστρέφει String, Number, Object, Array ή Boolean. Χρησιμοποιώντας αυτήν τη μέθοδο μπορούμε εύκολα να μετατρέψουμε τη συμβολοσειρά json σε αντικείμενο και να την εμφανίσουμε σε έναν πίνακα. Ας δούμε πώς:

Βήμα-1: Πρώτα δημιουργήστε ένα μπλοκ div για τον πίνακα html.

<div id="datalist"></div>

Βήμα-2: Στη συνέχεια, προσθέστε κάποια μορφοποίηση CSS.

<style type="text/css">
    table {
        border: 1px solid #777;
        border-collapse: collapse;
    } 

    table tr th,
    table tr td {
        border: 1px solid #777;
    }
</style>

Βήμα-3: προσθέστε το jquery

<script src="/path/to/jquery-1.10.2.min.js"></script>

Βήμα-4: Στη συνέχεια, προσθέστε τη μέθοδο jquery για να αναλύσετε μια συμβολοσειρά json για να την εμφανίσετε ως λίστα σε ένα στοιχείο πίνακα html.

<script>
$(document).ready(function() {
    var data = '[{ "firstName": "John", "lastName": "Smith" }, { "firstName": "Peter", "lastName": "Jason" }, { "firstName": "Alice", "lastName": "Ray" }]';
    var table = '<table><thead><th>First Name</th><th>Last Name</th></thead><tbody>';
    var obj = $.parseJSON(data);
    $.each(obj, function() {
        table += '<tr><td>' + this['firstName'] + '</td><td>' + this['lastName'] + '</td></tr>';
    });
    table += '</tbody></table>';
    document.getElementById("datalist").innerHTML = table;
});
</script>

Η μεταβλητή "data" περιέχει μια έγκυρη συμβολοσειρά JSON με ονόματα και επώνυμα για τρία διαφορετικά άτομα και η συνάρτηση jquery "$.parseJSON(data)" μετατρέπει αυτήν τη συμβολοσειρά json σε αντικείμενο javascript. Χρησιμοποιώντας τη μέθοδο $.each() του jQuery επαναλαμβάνουμε τη διαδικασία για κάθε item του collection και την εμφάνιση σε ένα πίνακα.

Ανοίξτε τώρα το αρχείο στο πρόγραμμα περιήγησης και θα λάβετε τη λίστα με τα ονόματα που εμφανίζονται τακτοποιημένα στον πίνακα html.

Ολοκληρωμένος κώδικας

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Read and Parse JSON String in jQuery | Example</title>
    <style type="text/css">
    table {
        border: 1px solid #777;
        border-collapse: collapse;
    } 

    table tr th,
    table tr td {
        border: 1px solid #777;
    }
    </style>
</head>
<body>
    <div id="datalist"></div>

    <script src="/path/to/js/jquery-1.10.2.min.js"></script>
    <script>
    $(document).ready(function() {
        var data = '[{ "firstName": "John", "lastName": "Smith" }, { "firstName": "Peter", "lastName": "Jason" }, { "firstName": "Alice", "lastName": "Ray" }]';
        var table = '<table><thead><th>First Name</th><th>Last Name</th></thead><tbody>';
        var obj = $.parseJSON(data);
        $.each(obj, function() {
            table += '<tr><td>' + this['firstName'] + '</td><td>' + this['lastName'] + '</td></tr>';
        });
        table += '</tbody></table>';
        document.getElementById("datalist").innerHTML = table;
    });
    </script>
</body>
</html>

Foreach programming

Εγγραφείτε για να βλέπετε τα εξειδικευμένα άρθρα.