Έχω ένα αντικείμενο JavaScript ως εξής:
var data = {items: [
{id: "1", name: "Snatch", type: "crime"},
{id: "2", name: "Witches of Eastwick", type: "comedy"},
{id: "3", name: "X-Men", type: "action"},
{id: "4", name: "Ordinary People", type: "drama"},
{id: "5", name: "Billy Elliot", type: "drama"},
{id: "6", name: "Toy Story", type: "children"}
]};
Αν ήθελα να προσθέσω/αφαιρέσω αντικείμενα σε αυτή τη λίστα, πώς θα το έκανα χρησιμοποιώντας την jQuery; Ο πελάτης θέλει αυτή η λίστα να είναι δυναμικά τροποποιήσιμη.
Πρώτον, ο κώδικας που παραθέτετε δεν είναι όχι JSON. Ο κώδικάς σας είναι JavaScript object literal notation. Το JSON είναι ένα υποσύνολο αυτής της μορφής που έχει σχεδιαστεί για ευκολότερη ανάλυση.
Ο κώδικάς σας ορίζει ένα αντικείμενο (data
) που περιέχει έναν πίνακα (items
) αντικειμένων (το καθένα με id
, name
και type
).
Δεν χρειάζεστε ούτε θέλετε την jQuery γι' αυτό, μόνο την JavaScript.
Προσθήκη αντικειμένου:
data.items.push(
{id: "7", name: "Douglas Adams", type: "comedy"}
);
Αυτό προστίθεται στο τέλος. Δείτε παρακάτω για την προσθήκη στη μέση.
Αφαίρεση αντικειμένου:
Υπάρχουν διάφοροι τρόποι. Η μέθοδος splice
είναι η πιο ευέλικτη:
data.items.splice(1, 3); // Removes three items starting with the 2nd,
// ("Witches of Eastwick", "X-Men", "Ordinary People")
Η splice
τροποποιεί τον αρχικό πίνακα και επιστρέφει έναν πίνακα με τα στοιχεία που αφαιρέσατε.
Προσθέτοντας στη μέση:
Η splice
στην πραγματικότητα κάνει και προσθήκη και αφαίρεση. Η υπογραφή της μεθόδου splice
είναι:
removed_items = arrayObject.splice(index, num_to_remove[, add1[, add2[, ...]]]);
index
- ο δείκτης από τον οποίο θα ξεκινήσουν οι αλλαγέςnum_to_remove
- ξεκινώντας από αυτό το δείκτη, αφαιρέστε τόσες εγγραφέςaddN
- ...και στη συνέχεια εισάγετε αυτά τα στοιχείαΈτσι μπορώ να προσθέσω ένα στοιχείο στην 3η θέση ως εξής:
data.items.splice(2, 0,
{id: "7", name: "Douglas Adams", type: "comedy"}
);
Αυτό που λέει είναι: Ξεκινώντας από τον δείκτη 2, αφαιρέστε μηδέν στοιχεία και στη συνέχεια εισάγετε το ακόλουθο στοιχείο. Το αποτέλεσμα μοιάζει με αυτό:
var data = {items: [
{id: "1", name: "Snatch", type: "crime"},
{id: "2", name: "Witches of Eastwick", type: "comedy"},
{id: "7", name: "Douglas Adams", type: "comedy"}, // <== The new item
{id: "3", name: "X-Men", type: "action"},
{id: "4", name: "Ordinary People", type: "drama"},
{id: "5", name: "Billy Elliot", type: "drama"},
{id: "6", name: "Toy Story", type: "children"}
]};
Μπορείτε να αφαιρέσετε κάποια και να προσθέσετε κάποια ταυτόχρονα:
data.items.splice(1, 3,
{id: "7", name: "Douglas Adams", type: "comedy"},
{id: "8", name: "Dick Francis", type: "mystery"}
);
...που σημαίνει: Ξεκινώντας από τον δείκτη 1, αφαιρέστε τρεις καταχωρήσεις και στη συνέχεια προσθέστε αυτές τις δύο καταχωρήσεις. Το οποίο έχει ως αποτέλεσμα:
var data = {items: [
{id: "1", name: "Snatch", type: "crime"},
{id: "7", name: "Douglas Adams", type: "comedy"},
{id: "8", name: "Dick Francis", type: "mystery"},
{id: "4", name: "Ordinary People", type: "drama"},
{id: "5", name: "Billy Elliot", type: "drama"},
{id: "6", name: "Toy Story", type: "children"}
]};
Αυτό δεν είναι καθόλου JSON, είναι απλά αντικείμενα Javascript. Το JSON είναι μια αναπαράσταση δεδομένων σε κείμενο, που χρησιμοποιεί ένα υποσύνολο του συντακτικού της Javascript.
Ο λόγος για τον οποίο δεν μπορείτε'να βρείτε καμία πληροφορία σχετικά με τον χειρισμό του JSON χρησιμοποιώντας την jQuery είναι επειδή η jQuery δεν έχει τίποτα που να μπορεί να το κάνει αυτό, και γενικά δεν'γίνεται καθόλου. Χειρίζεστε τα δεδομένα με τη μορφή αντικειμένων Javascript και στη συνέχεια τα μετατρέπετε σε συμβολοσειρά JSON, αν αυτό είναι που χρειάζεστε. (Η jQuery διαθέτει όμως μεθόδους για τη μετατροπή).
Αυτό που έχετε είναι απλώς ένα αντικείμενο που περιέχει έναν πίνακα, οπότε μπορείτε να χρησιμοποιήσετε όλη τη γνώση που ήδη έχετε. Απλά χρησιμοποιήστε το data.items
για να αποκτήσετε πρόσβαση στον πίνακα.
Για παράδειγμα, για να προσθέσετε ένα άλλο στοιχείο στον πίνακα χρησιμοποιώντας δυναμικές τιμές:
// The values to put in the item
var id = 7;
var name = "The usual suspects";
var type = "crime";
// Create the item using the values
var item = { id: id, name: name, type: type };
// Add the item to the array
data.items.push(item);
Λοιπόν, είναι απλά ένα αντικείμενο javascript, οπότε μπορείτε να χειριστείτε το data.items
όπως θα κάνατε με έναν συνηθισμένο πίνακα. Αν το κάνετε:
data.items.pop();
ο πίνακας items
θα είναι κατά 1 στοιχείο μικρότερος.