Почему не создается таблица из массива данных из «LocalStorage»?

187
07 сентября 2018, 22:30

Я хочу создать таблицу из данных, находящихся в localStorage. Для этого реализован метод добавления: addToBook (). и метод удаления: removeContact (e) , из которого я отправляю данные в localStorage. Но я получаю две ошибки:

  • Первая: "Uncaught TypeError: Can not set property 'innerHTML' of indefinite"

  • Вторая: "Uncaught ReferenceError: LocalStorage is not defined"

Нужно, чтобы данные были правильно добавлены / удалены в массив и localStorage. И что бы эти данные, были созданы или удалены в таблице при манипуляциях с DOM, что я пытаюсь сделать в методе: drowTable (). Помогите решить эту проблему

class Contacts { 
    constructor() { 
        // Storage Array 
        this.contacts = []; 
    } 
 
    addToBook() { 
        let isNull = forms.name.value != '' && forms.phone.value != '' &&  
forms.email.value != ''; 
        if (isNull) { 
            // format the input into a valid JSON structure 
            let obj = new LocalStorage(forms.name.value, forms.phone.value,  
forms.email.value); 
            this.contacts.push(obj); 
            localStorage["addbook"] = JSON.stringify(this.contacts); 
            table.show(); 
        } 
        console.log(this.contacts); 
    } 
 
    removeContact(e) { 
        // Remove an entry from the addressbook 
        if (e.target.classList.contains('delete')) { 
            let remID = e.target.getAttribute('data-id'); 
            this.contacts.splice(remID, 1); 
            localStorage['addbook'] = JSON.stringify(this.contacts); 
            table.show(); 
        } 
    } 
} 
let data = new Contacts(); 
class Forms { 
    constructor() { 
        // Blocks 
        this.BookDiv = document.querySelector('.addbook'); 
        // Forms 
        this.fields = document.forms[0].elements; 
        this.name = this.fields[0].value; 
        this.phone = this.fields[1].value; 
        this.email = this.fields[2].value; 
        // Buttons 
        this.addBtn = document.getElementById("Add"); 
        this.addBtn.addEventListener("click", data.addToBook.bind(data)); 
        this.BookDiv.addEventListener("click", data.removeContact.bind(data)) 
 
    } 
} 
class ShowAddressBook { 
    constructor() { 
    }; 
 
    drowTable() { 
        if (localStorage['addbook'] === undefined) { 
            localStorage['addbook'] = ''; 
        } else { 
            data.contacts = JSON.parse(localStorage['addbook']); 
            // Loop over the array addressBook and insert into the page 
            data.BookDiv.innerHTML = ''; 
            const rows = document.querySelectorAll("#book .data"); 
            for (let i = rows.length - 1; i >= 0; i--) { 
                const e = rows.item(i); 
                e.parentNode.removeChild(e); 
            } 
            const table = document.getElementById("shop"); 
 
            for (let i = 0; i < data.contacts.length; i++) { 
                //create table 
                table.innerHTML += `<tbody><tr class="data"> 
                    <td class="checkBox"><input type="checkbox"></td> 
                    <td>${data.contacts[i].name}</td> 
                    <td>${data.contacts[i].phone}</td> 
                    <td>${data.contacts[i].email}</td> 
                    <td ><i class="far fa-trash-alt delete" data-id="' + i + '"></i></td> 
                </tr></tbody>`; 
            } 
 
        } 
        this.drowTable(); 
        console.log(data.contacts); 
    } 
} 
let table = new ShowAddressBook(); 
let forms = new Forms(); 
table.drowTable(); 
 
class LocalStorage { 
    constructor(name, phone, email) { 
        this.name = name; 
        this.phone = phone; 
        this.email = email; 
    } 
}
<div class="AddNewContact"> 
        <i class="fas fa-search "></i> 
    </div> 
    <div class="addNewContact-form"> 
        <form name="register"> 
        <label for="name">Name</label><input type="text" id="name" class="formFields"> 
        <label for="phone">Phone</label><input type="text" id="phone" class="formFields"> 
        <label for="email">E-Mail</label><input type="text" id="email" class="formFields"> 
        <br><br> 
        <button id="Add" type="button">Add Now</button><button id="Cancel" type="button">Cancel</button> 
        </form> 
    </div> 
    <div class="addbook"> 
             <table id="book"> 
                 <thead> 
                 <tr> 
                     <th class="check"></th> 
                     <th class="name">Name: <i class="fas fa-arrows-alt-v"></i></th> 
                     <th class="phone">Phone: <i class="fas fa-arrows-alt-v"></i></th> 
                     <th class="email">E-mail: <i class="fas fa-arrows-alt-v"></i></th> 
                     <th class="del"></th> 
                 </tr> 
                 </thead> 
             </table> 
    </div>

Answer 1

Ну и подход к ООП у Вас...
Но тем не менее...
1. Вы создали глобально let data = new Contacts(); и пытаетесь взять свойство data.BookDiv, но его там нет, т.к вы описали его в классе Forms.
2. Класс LocalStorage на момент его использования еще не был описан, попробуйте объявить его в начале файла

READ ALSO
Как вывести данные json?

Как вывести данные json?

Доброй ночиУважаемые знатоки, подскажите, как прочесть данные типа json:

196
Бесконечная загрузка страницы

Бесконечная загрузка страницы

Подгружаю html с помощью js так:

197
Vue не реагирует на изменения объекта

Vue не реагирует на изменения объекта

Я тут учу vue и пишу простенький магазин для практикиИ не могу понять почему не обновляется корзина, то есть обновляется объект cart, но в разметке...

182