Temukan objek dalam javascript objek bersarang

JavaScript luar biasa, kita semua sudah tahu itu. Tetapi beberapa hal dalam JavaScript benar-benar aneh dan membuat kita sering menggaruk-garuk kepala. Salah satunya adalah konfrontasi dengan kesalahan ini saat Anda mencoba mengakses objek bersarang,

Tidak dapat membaca properti 'foo' dari undefined

Sering kali saat kita bekerja dengan JavaScript, kita akan berurusan dengan objek bersarang dan seringkali kita perlu mengakses nilai bersarang terdalam dengan aman

Mari ambil objek bersarang ini sebagai contoh

const user = {
id: 101,
email: '[email protected]',
personalInfo: {
name: 'Jack',
address: {
line1: 'westwish st',
line2: 'washmasher',
city: 'wallas',
state: 'WX'
}
}
}

Untuk mengakses nama pengguna kami, kami akan menulis

const name = user.personalInfo.name;
const userCity = user.personalInfo.address.city;
_

Ini mudah dan lurus ke depan

Tapi, entah kenapa, jika info pribadi pengguna kita tidak tersedia, struktur objeknya akan seperti ini,

const user = {
id: 101,
email: '[email protected]'
}

Sekarang jika Anda mencoba mengakses nama, Anda akan dilempar Tidak dapat membaca properti 'nama' yang tidak terdefinisi

const name = user.personalInfo.name; // Cannot read property 'name' of undefined

Ini karena kami mencoba mengakses kunci name dari objek yang tidak ada

Cara yang biasa digunakan oleh sebagian besar developer untuk menangani skenario ini adalah,

const name = user && user.personalInfo ? user.personalInfo.name : null;
// undefined error will NOT be thrown as we check for existence before access
_

Tidak apa-apa jika struktur bersarang Anda sederhana, tetapi jika data Anda bersarang sedalam 5 atau 6 level, maka kode Anda akan terlihat sangat berantakan seperti ini,

let city;
if (
data && data.user && data.user.personalInfo &&
data.user.personalInfo.addressDetails &&
data.user.personalInfo.addressDetails.primaryAddress
) {
city = data.user.personalInfo.addressDetails.primaryAddress;
}

Ada beberapa trik untuk mengatasi struktur objek yang berantakan ini

Pola Akses Objek Bersarang Oliver Steele

Ini adalah favorit pribadi saya karena membuat kode terlihat bersih dan sederhana. Saya memilih gaya ini dari stackoverflow beberapa waktu lalu dan cukup menarik setelah Anda memahami cara kerjanya

const name = ((user || {}).personalInfo || {}).name;
_

Dengan notasi ini, Anda tidak akan pernah mengalami Tidak dapat membaca properti 'nama' yang tidak terdefinisi. Anda pada dasarnya memeriksa apakah pengguna ada, jika tidak, Anda membuat objek kosong dengan cepat. Dengan cara ini, kunci level selanjutnya akan selalu diakses dari objek yang ada atau objek kosong, tetapi tidak pernah dari undefined

Sayangnya, Anda tidak dapat mengakses array bersarang dengan trik ini

Akses Objek Bersarang Menggunakan Pengurangan Array

Metode pengurangan array sangat kuat dan dapat digunakan untuk mengakses objek bersarang dengan aman

const getNestedObject = (nestedObj, pathArr) => {
return pathArr.reduce((obj, key) =>
(obj && obj[key] !== 'undefined') ? obj[key] : undefined, nestedObj);
}
// pass in your object structure as array elements
const name = getNestedObject(user, ['personalInfo', 'name']);
// to access nested array, just pass in array index as an element the path array.
const city = getNestedObject(user, ['personalInfo', 'addresses', 0, 'city']);
// this will return the city from the first address item.
Typy

Jika menurut Anda metode di atas terlalu umum, maka Anda harus mencoba pustaka Typy yang telah saya tulis. Selain mengakses objek bersarang dengan aman, ia melakukan banyak hal yang lebih mengagumkan. 🎉

Ini tersedia sebagai paket npm — Typy

Jika Anda menggunakan Typy, kode Anda akan terlihat seperti ini,

import t from 'typy';const name = t(user, 'personalInfo.name').safeObject;
const city = t(user, 'personalInfo.addresses[0].city').safeObject;
// address is an array
_

Ada beberapa perpustakaan lain seperti Lodash dan Ramda yang bisa melakukan ini. Namun dalam proyek front-end yang ringan, terutama jika Anda hanya memerlukan satu atau dua metode dari lib tersebut, sebaiknya pilih lib ringan alternatif, atau lebih baik, tulis sendiri

JavaScript memungkinkan Anda menyimpan data sebagai pasangan nilai kunci yang disebut objek JS. Strukturnya mirip dengan JSON dan bahkan mendukung nesting, yaitu menggunakan satu objek ke objek lainnya. Terkadang Anda mungkin perlu mendapatkan kunci dari objek di JavaScript. Pada artikel ini, kita akan belajar cara mendapatkan kunci objek bersarang di JavaScript


Cara Mendapatkan Kunci Objek Bersarang di JavaScript

Katakanlah Anda memiliki objek bersarang berikut di JavaScript

let data = [
  {
    name: "Apple",
    id: 1,
    alt: [{ name: "fruit1", description: "tbd1" }]
  },
  {
    name: "Banana",
    id: 2,
    alt: [{ name: "fruit2", description: "tbd2" }]
  },
  {
    name: "Blueberry",
    id: 3,
    alt: [{ name: "fruit3", description: "tbd3" }]
  }
];
_

Setiap objek JS mendukung fungsi keys() yang mengembalikan array kunci yang ada di level pertama objek. Ini sintaksnya

let keys = Object.keys(yourObject);

Anda dapat mengakses objek bersarang menggunakan indeks 0, 1, 2, dll. Jadi data[0]. alt[0] akan mengakses objek bersarang alt pertama. Sekarang Anda dapat memanggil fungsi keys() yang disebutkan di atas untuk mendapatkan daftar kuncinya

Object.keys(data[0].alt[0])

Perintah di atas akan mengembalikan ['nama', 'deskripsi'] tidak harus dalam urutan yang sama

Jika Anda ingin mendapatkan nilai kunci tertentu, Anda bisa langsung merujuknya menggunakan nama kuncinya. Berikut adalah perintah untuk mendapatkan nilai deskripsi dari objek bersarang pertama

Bagaimana cara menemukan objek dari objek bersarang di JavaScript?

JavaScript Temukan Jalur Kunci di Objek atau Larik Bersarang Dalam .
Dapatkan Path ke Kunci Bersarang. Kode. const findPath = (ob, key) => { const path = []; . .
Dapatkan Path ke Kunci Bersarang Dengan Nilai yang Diberikan. Dengan sedikit modifikasi, kita dapat membuat kode di atas membandingkan nilai yang diberikan untuk kunci tersebut

Bagaimana Anda mengakses objek bersarang objek?

Kita dapat mengakses properti bersarang dari suatu objek atau objek bersarang menggunakan notasi titik (. ) atau notasi braket [] . Properti bersarang dari suatu objek dapat diakses dengan kunci rantai atau nama properti dalam urutan urutan yang benar.

Bagaimana cara mengakses array objek bersarang di JavaScript?

Nested Array di JavaScript didefinisikan sebagai Array (Array luar) di dalam larik lain (array dalam). Sebuah Array dapat memiliki satu atau lebih Array dalam. Larik bersarang ini (array dalam) berada di bawah cakupan larik luar artinya kita dapat mengakses elemen larik dalam ini berdasarkan nama objek larik luar .

Bagaimana cara mendapatkan nilai objek bersarang dinamis dalam JavaScript?

Anda dapat mengakses properti objek bersarang secara dinamis di JavaScript menggunakan tanda kurung siku . Anda perlu menggunakan beberapa tanda kurung siku untuk objek bersarang. Saya memiliki objek bersarang dengan properti nama yang juga merupakan objek. Properti nama berisi dua properti bersarang.