JavaScript'te Nesne Dizisinden Tablo Nasıl Oluşturulur

Bir web sayfasında, hizalanmamış veriler okunabilirliği azaltabilir ve izleyiciler için sorun yaratabilir. Bu tür durumlarla başa çıkmak için verileri daha iyi bir şekilde sıralamak için tabloları kullanabilirsiniz. Tablolar, verileri hizalamak ve okunabilirliği ve görünürlüğü geliştirmek için harika bir biçim sağlar. Tablolar, JavaScript ile bağlanabilen Köprü Metni İşaretleme dili (HTML) kullanılarak oluşturulabilir.

Bu gönderi, JavaScript'te bir dizi nesne içeren bir tablo oluşturma prosedürünü açıklayacaktır.

JavaScript'te Nesne Dizisinden Tablo Nasıl Oluşturulur?

Bir dizi nesneden bir tablo oluşturmak için aşağıdaki yöntemleri kullanacağız:

HTML Tablosu dizesi
harita() yöntemi

Her yöntemi tek tek inceleyelim!

Yöntem 1: JavaScript'te HTML Tablo Dizesini Kullanarak Bir Nesne Dizisinden Tablo Oluşturma

JavaScript'te, bir ' sicim ” metin, sayılar veya özel sembolleri saklamak içindir. Dizeler, bir karakter veya karakter grubu çift veya tek tırnak içinde kapatılarak tanımlanır. Daha spesifik olarak, tablolar oluşturmak için de kullanılırlar.

Tablo dizesini kullanarak bir dizi nesneden tablo oluşturma hakkında net bir kavram elde etmek için bir örnek alalım.

Örnek

Örneğimizde, “

” kimliği olan etiket” konteyner ” ve HTML dosyamızın etiketinin içine yerleştirin:

< div kimliği = 'konteyner' > div >

Bir ilan edelim” dizi ” ve ona bazı değerler atayın:

diziydi = [ 'İşaret' , 'Serçe' , 'Balık' , 'Turuncu' ] ;

Bir değişkeni başlat ' Masa ” HTML tablo dizesini saklamak için:

var Tablo = '' ;

“Değerini ayarlayarak satır başına iki hücreyi belirtin. iki ” arasında” hücreler ” değişken:

her hücre = iki ;

Ardından, “ dizi.her biri için() ” işlevinden her dizi öğesini geçirme yöntemi. Ardından, “ {değer} 'bir tanımlayıcı ile' $ ' içinde ' ' etiket. Ardından, bir değişken tanımlayın “ a ” dizini artırmak için eklemek için” i ” ve bir “ belirtin eğer ” koşul, hücre değerlerinin geri kalanının ve oluşturulan değişkenin sıfıra eşit olması ve değerin “ a ” eşit dizinin uzunluğu değil, ardından tablonun bir sonraki satırına veya satırına bölün:

dizi. için Her biri ( ( değer, ben ) => {
Masa += ` < TD > $ { değer } TD > ` ;
var a = i + 1 ;
eğer ( a % hücreler == 0 && a != dizi. uzunluk ) {
Masa += '' ;
} } ) ;

Tablo kapanış etiketlerini “ değişkenine atayın. Masa ' kullanmak ' += ' Şebeke. Ardından, kapsayıcısını kullanarak Tablonun içeriğini oluşturulan kapsayıcıya bağlayın. Bunun için “ küçümseme() ” yöntemine girin ve kimliği ona iletin ve Tablo değişkenindeki değerleri ayarlamak için iç HTML'yi yerleştirin:

Masa += '' ;

belge. küçümseme ( 'konteyner' ) . iç HTML = Masa ;

CSS dosyamızda , tabloya ve veri hücrelerine bazı özellikler uygulayacağız. Bunu yapmak için, ' sınır ” değeri olan mülk” 1 piksel katı ” tablonun ve hücrelerinin etrafındaki kenarlığı ayarlamak için ve “ dolgu malzemesi ” değeri olan mülk” 3 piksel ” tanımlı sınıra göre eleman içeriği etrafında tanımlı boşluk oluşturmak için:

tablo, TD {

sınır : 1 piksel katı ;

dolgu malzemesi : 3 piksel ;

}

Verilen kodu kaydedin, HTML dosyanızı açın ve bir dizinin nesneleri tablonuzu görüntüleyin:

JavaScript'te bir dizi nesneden tablo oluşturmak için bir yöntem daha keşfedelim.

Yöntem 2: JavaScript'te map() yöntemini kullanarak Nesne Dizisinden Tablo Oluşturma

“ harita() ” yöntemi, dizinin her bir öğesine belirli bir işlev uygular ve karşılığında yeni bir dizi sağlar. Ancak, bu yöntem orijinal dizide herhangi bir değişiklik yapmaz. Bir dizi nesne içeren bir tablo oluşturmak için map() yöntemini de kullanabilirsiniz.

Örnek

“ kullanarak bir dizi oluşturalım. İzin Vermek ” anahtar kelimesi. Nesne özelliklerine veya anahtarlarına bazı değerler atayın:

diziye izin ver = [
{ 'İsim' : 'İşaret' , 'Yaş' : 'Yirmi (20)' } ,
{ 'İsim' : 'ne ben' , 'Yaş' : 'Otuz (30)' } ]

belittlement() yöntemini kullanarak önceden oluşturulmuş kapsayıcıya erişin ve “ insertAdjacentHTML() ” tablo etiketlerini ekleme yöntemi:

belge. küçümseme ( 'konteyner' ) . Ekle BitişikHTML ( 'sonradan' ,

` < masa >< tr >< inci >

Kullan ' Object.keys() Tanımlanan nesnenin anahtarlarına erişmek için ” yöntemi ve ardından “ katılmak() ” içinde başlıklar olarak yerleştirme yöntemi ' etiket:

$ { Nesne . anahtarlar ( dizi [ 0 ] ) . katılmak ( '' ) }

Table head kapanış etiketini ve tablo satırını ve data açılış etiketini ekledikten sonra “ harita() ” yöntemini çağırmak için Object.values() Nesne tuşlarının her değeri için yöntem işlevi, ardından ' katılmak() ” onları bir satıra yerleştirme ve bir sonrakine geçme yöntemi:

inci >< tr >< TD > $ { dizi. harita ( ve => Nesne . değerler ( ve )

. katılmak ( '' ) ) . katılmak ( '' ) } masa > ` )

Gördüğünüz gibi, tanımlanmış nesne dizisinden başarılı bir şekilde tablo oluşturduk:

JavaScript'te bir dizi nesneden tablo oluşturmanın etkili yollarını ele aldık.

Çözüm

JavaScript'te, bir dizi nesneden bir tablo oluşturmak için HTML “ masa ” dize veya “ harita() ” yöntemi kullanılabilir. Bunu yapmak için, kimliği olan bir div etiketi belirtin. Ardından, nesne dizisini her iki yöntemde de bildirin, tablo etiketlerini değişkenler içinde saklayın veya bunları doğrudan verilerle bağlantılı bir HTML öğesine döndürün. Bu gönderi, JavaScript kullanarak bir dizi nesneden tablo oluşturma yöntemini tartıştı.

JavaScript'te Nesne Dizisinden Tablo Nasıl Oluşturulur