Editor Downcodes akan menunjukkan kepada Anda beberapa cara untuk mengubah data JSON menjadi array di JavaScript front-end. Dalam pengembangan front-end, seringkali data JSON yang diperoleh dari server perlu diubah menjadi array JavaScript untuk diproses. Artikel ini akan memperkenalkan secara detail tiga metode yang umum digunakan: JSON.parse(), Object.keys() dan Object.entries(), serta menggunakan kode contoh untuk menjelaskan cara menggunakan metode ini untuk mengonversi data JSON menjadi array secara efisien, dan caranya untuk menggunakan metode array untuk pemrosesan data selanjutnya. Selain itu, artikel ini juga menyediakan FAQ yang relevan untuk membantu Anda lebih memahami dan menerapkan metode ini.
Dalam proyek JavaScript front-end, mengubah data JSON menjadi array adalah operasi yang sangat umum dan berharga. Hal ini dapat dicapai dengan menggunakan metode JSON.parse(), menggunakan metode Object.keys(), dan memanfaatkan metode ES6 Object.entries(). Metode ini dapat dengan mudah dan efisien mengubah JSON menjadi bentuk array untuk memfasilitasi pemrosesan dan operasi data selanjutnya. Menggunakan metode JSON.parse() adalah metode yang paling langsung dan umum digunakan. Meng Xuewu menguraikannya. Melalui JSON.parse(), kita dapat mengurai string berformat JSON menjadi objek atau array JavaScript. Ini merupakan sarana penting untuk memproses data yang dikembalikan oleh server dan mewujudkan konversi struktur data yang kompleks.
Metode JSON.parse() dapat mengurai string berformat JSON menjadi objek atau larik JavaScript. Hal ini sangat penting untuk pengembangan front-end, karena data yang diperoleh dari server biasanya dalam bentuk string JSON, dan front-end perlu mengubah data ini menjadi objek atau array yang dapat digunakan oleh JavaScript. Pertama, cukup panggil JSON.parse() dan teruskan string JSON sebagai argumen untuk mendapatkan array atau objek JavaScript.
Langkah-langkah spesifiknya mencakup memperoleh string berformat JSON dari server dan kemudian menguraikannya menggunakan JSON.parse(). Misalnya, jika Anda memiliki representasi string JSON dari daftar pengguna, Anda dapat meneruskan string ini ke JSON.parse(), sehingga menghasilkan array JavaScript yang setiap elemen arraynya adalah objek Pengguna.
const jsonString = '[{nama: John Doe, umur: 30}, {nama: Jane Doe, umur: 25}]';
const jsonArray = JSON.parse(jsonString);
konsol.log(jsonArray);
// Keluaran: [ { nama: 'John Doe', umur: 30 }, { nama: 'Jane Doe', umur: 25 } ]
Metode Object.keys() sangat berguna ketika Anda memiliki objek JSON dan ingin mengubah kunci atau nilainya menjadi array. Metode ini mengembalikan array yang berisi nama semua properti enumerable dari objek itu sendiri.
Operasi detailnya adalah pertama-tama menggunakan Object.keys() untuk mendapatkan semua kunci objek, lalu mendapatkan nilai yang sesuai dengan memetakan kunci-kunci ini, dan akhirnya membentuk array baru. Teknik ini berguna untuk mengubah data objek JSON ke dalam format array sehingga dapat dimanipulasi menggunakan berbagai metode array.
const objek pengguna = { 1: John Doe, 2: Jane Doe };
const keyArray = Objek.kunci(objek pengguna);
konsol.log(keysArray);
// Keluaran: ['1', '2']
const valueArray = keyArray.map(kunci => objek pengguna[kunci]);
konsol.log(valuesArray);
// Keluaran: ['John Doe', 'Jane Doe']
ES6 memperkenalkan metode Object.entries(), yang menyediakan cara mudah lain untuk mengonversi objek JSON menjadi array. Ia mengembalikan sebuah array, setiap elemen dalam array adalah array lain yang berisi dua elemen, elemen pertama adalah kunci objek, dan elemen kedua adalah nilai yang sesuai.
Anda bisa langsung mendapatkan array dua dimensi menggunakan metode Object.entries(), yang sangat cocok untuk skenario yang memerlukan manipulasi kunci dan nilai secara bersamaan.
const objek pengguna = { 1: John Doe, 2: Jane Doe };
const entryArray = Objek.entries(userObject);
konsol.log(entriesArray);
// Keluaran: [ ['1', 'John Doe'], ['2', 'Jane Doe'] ]
Setelah data JSON diubah menjadi array, data tersebut dapat diproses lebih lanjut menggunakan metode kaya yang disediakan oleh array JavaScript. Misalnya, gunakan fungsi tingkat tinggi seperti map(), filter(), dan pengurangan() untuk melintasi, memfilter, dan mengakumulasikan array.
Berbagai metode operasi array dapat mengimplementasikan logika pemrosesan data yang kompleks. Metode map() dapat digunakan untuk mengonversi setiap elemen array, metode filter() dapat memfilter elemen dalam array yang memenuhi kondisi sesuai dengan kondisi, dan metode pengurangan() dapat memproses elemen secara kumulatif array untuk mewujudkan transformasi dari array ke Konversi nilai tunggal tertentu.
const jsonArray = [{'id': 1, 'skor': 90}, {'id': 2, 'skor': 80}, {'id': 3, 'skor': 85}];
// Gunakan map() untuk meningkatkan skor
const peningkatanScores = jsonArray.map(pengguna => ({ ...pengguna, skor: pengguna.skor + 10 }));
console.log(increasedScores);
// Keluaran: [{id: 1, skor: 100}, {id: 2, skor: 90}, {id: 3, skor: 95}]
// Gunakan filter() untuk memfilter pengguna yang skornya melebihi 85
const highScores = peningkatanScores.filter(pengguna => skor pengguna > 85);
console.log(skor tinggi);
// Keluaran: [{id: 1, skor: 100}, {id: 3, skor: 95}]
// Gunakan pengurangan() untuk menghitung skor total
const totalScore = peningkatanScores.reduce((total, pengguna) => total + skor pengguna., 0);
konsol.log(totalScore);
// Keluaran: 285
Melalui metode di atas, dari JSON.parse() hingga pemrosesan metode array, Anda dapat mencapai pemrosesan mendalam dari data JSON ke array, lalu ke array, sehingga membangun proses pemrosesan data yang kuat. Ini bukan hanya masalah teknis untuk pengembangan front-end, tetapi juga solusi yang dapat meningkatkan fleksibilitas dan efisiensi operasional data.
T: Bagaimana cara mengonversi data JSON di proyek JavaScript front-end menjadi array?
J: Dalam proyek JavaScript front-end, Anda dapat menggunakan metode JSON.parse() untuk mengonversi data JSON menjadi array. Metode ini mem-parsing string JSON menjadi objek atau larik JavaScript, yang kemudian dapat Anda gunakan sebagai larik untuk operasi lebih lanjut. Misalnya, Anda dapat menggunakan kode berikut untuk mengonversi data JSON menjadi array:
const jsonStr = '[1, 2, 3, 4, 5]'; // String data JSON const jsonArray = JSON.parse(jsonStr); // Ubah data JSON menjadi array console.log(jsonArray); hasil keluarannya adalah: [1, 2, 3, 4, 5]T: Bagaimana cara mengakses elemen array JSON yang dikonversi dalam JavaScript?
J: Dalam JavaScript, elemen array JSON yang dikonversi dapat diakses berdasarkan indeks. Indeks dimulai dari 0, yang mewakili elemen pertama dalam array. Misalnya, Anda memiliki array JSON yang dikonversi sebagai berikut:
const jsonArray = [1, 2, 3, 4, 5];Anda dapat mengakses elemen pada posisi tertentu dalam array menggunakan sintaks berikut:
console.log(jsonArray[0]); // Hasil keluarannya adalah: 1console.log(jsonArray[2]); // Hasil keluarannya adalah: 3console.log(jsonArray[4]); : 5T: Bagaimana cara menangani konversi array bersarang di JSON?
J: Jika data JSON berisi array bersarang, maka dapat diproses secara rekursif. Pertama, Anda perlu mengurai data JSON menjadi objek JavaScript. Kemudian, gunakan fungsi rekursif untuk melakukan iterasi pada objek dan elemen dalam array, mengubah array bersarang menjadi array JavaScript normal. Berikut ini contoh kodenya:
const jsonData = '{nama: John, usia: 30, minat: [coding, membaca, musik]}'; const jsonObject = JSON.parse(jsonData); // Mengurai data JSON ke dalam objek JavaScript function convertNestedArray(obj) { untuk (biarkan memasukkan obj) { if (Array.isArray(obj[key])) { obj[key] = Array.from(obj[key]); Ubah array bersarang menjadi array biasa} else if (typeof obj[key] === 'object') { convertNestedArray(obj[key]); // Memproses objek bersarang secara rekursif} }}convertNestedArray(jsonObject); //Konversi array bersarang array console.log(jsonObject.interests); //Hasil keluarannya adalah: [coding, membaca, musik]Saya harap artikel ini dapat membantu Anda lebih memahami dan menerapkan metode ini serta meningkatkan efisiensi pengembangan front-end Anda! Jika Anda memiliki pertanyaan, silakan tinggalkan pesan di kolom komentar.