Refactoring method #init and render.

src/cg-dropdown.js

@@ -25,6 +25,27 @@ export class DropDown {
   }
 
   addItem(item) {
+    if (!item) {
+      return false;
+    }
+
+    const random = Math.random().toString(36).substring(2, 10);
+    const index = this.#items.length;
+
+    if (typeof item === 'object') {
+      item = {
+        id: item.id,
+        title: item.title,
+        value: item.value,
+      };
+    } else {
+      item = {
+        id: random,
+        title: item,
+        value: index,
+      };
+    }
+
     this.#items.push(item);
     this.#render();
   }
@@ -71,12 +92,38 @@ export class DropDown {
     this.#list = this.#element.querySelector('.list');
     this.#caret = this.#element.querySelector('.caret');
 
-    const { items, multiselect } = this.#options;
+    const { items, multiselect, url } = this.#options;
-    this.#items = items;
+    this.#items = [];
 
     if (multiselect) {
       this.#selectedItems = [];
     }
+
+    if (!items && url) {
+      this.#renderUrl();
+      return;
+    }
+
+    items.forEach((dataItem, index) => {
+      const random = Math.random().toString(36).substring(2, 10);
+      let item = {};
+
+      if (this.#checkItemStruct(dataItem)) {
+        item = {
+          id: dataItem.id,
+          title: dataItem.title,
+          value: index,
+        };
+      } else {
+        item = {
+          id: random,
+          title: dataItem,
+          value: index,
+        };
+      }
+
+      this.#items.push(item);
+    });
   }
 
   #initSelected(select) {
@@ -137,44 +184,30 @@ export class DropDown {
 
     if (!items && url) {
       this.#renderUrl();
-
       return;
     }
 
-    items.forEach((item, index) => {
+    this.#items.forEach((dataItem) => {
       const li = document.createElement('li');
-      let text = '';
-      let id = '';
 
       li.classList.add('list__item');
 
-      if (this.#checkItemStruct(item)) {
-        text = item.title;
-        id = item.id;
-      } else {
-        text = item;
-      }
-
       if (multiselect) {
         const checkBox = document.createElement('input');
         checkBox.type = 'checkbox';
 
         if (multiselectTag) {
-          if (this.#checkItemStruct(item)) {
+          checkBox.setAttribute('id', `chbox-${dataItem.id}`);
-            checkBox.setAttribute('id', `chbox-${item.id}`);
-          } else {
-            checkBox.setAttribute('id', `chbox-${index}`);
-          }
         }
-
         li.appendChild(checkBox);
       }
 
-      let textNode = document.createTextNode(text);
+      let textNode = document.createTextNode(dataItem.title);
 
       li.appendChild(textNode);
       ul.appendChild(li);
     });
+    console.log(this.#items);
 
     this.#addOptionsBehaviour();
   }
@@ -192,8 +225,7 @@ export class DropDown {
 
     const response = await fetch(url);
     const data = await response.json();
-
+    console.log(response);
-    this.#items = [];
 
     data.forEach((dataItem, index) => {
       const item = {

src/index.js

@@ -15,7 +15,8 @@ const dropdown = new DropDown({
 
 dropdown.addItem('ZAZ');
 dropdown.addItem('LADA');
-// dropdown.addItem('BMW');
+dropdown.addItem('Kamaz 258');
+dropdown.addItem('BMW');
 
 const dropdown2 = new DropDown({
   selector: '.cg-dropdown2',
@@ -24,34 +25,36 @@ const dropdown2 = new DropDown({
     {
       id: 'addaw21',
       title: 'BMW',
-      value: '1',
+      value: 1,
     },
     {
       id: '2414q',
       title: 'Opel',
-      value: '2',
+      value: 2,
     },
     {
       id: '24qwds',
       title: 'Kamaz 258',
-      value: '3',
+      value: 3,
     },
     {
       id: '28wds',
       title: 'MAN',
-      value: '4',
+      value: 4,
     },
     {
       id: '28qwds',
       title: 'BOOT',
-      value: '5',
+      value: 5,
     },
   ],
 
   multiselect: true,
-  multiselectTag: true,
+  // multiselectTag: true,
 });
 
+dropdown2.addItem('LADA');
+
 //ToDo: paste the desired url;
 
 const dropdown3 = new DropDown({