Почему в значениях инпута нету данных объекта?

Question

[kikosko]

При клике на <i class="far fa-edit" data-id="edit"> (я хочу редактировать контакт в модальном окне) не видны данные созданного контакта в значениях инпута и я получаю ошибу: "Uncaught TypeError: Cannot read property 'fname' of undefined". Помогите пожалуйста исправить

//  create table
    load() {
        let tBody = document.querySelector('tbody');

        tBody.innerHTML = '';

        for (let i = 0; i < this.items.length; i++) {
            let tr = document.createElement('tr');
            tr.innerHTML = `<tr class="data">
                                <th scope="row" class="checkBox"><input type="checkbox" class="form-check-input" bid ="${i}"></th>
                                <td>${this.items[i].fname}</td>
                                <td>${this.items[i].phone}</td>
                                <td>${this.items[i].email}</td>
                                <td ><i class="far fa-edit" data-id="edit"></i> | <i class="far fa-trash-alt"  data-id="rubbish"></i></td>
                            </tr>`;
            tBody.append(tr);
        }
// show data of choosen contact in modal 
    fullView(elem) {
        const d = document;
        const i = elem;
            d.querySelector('#Edname').value = this.items[i].fname;
            d.querySelector('#Edphone').value = this.items[i].phone;
            d.querySelector('#Edemail').value = this.items[i].email;
    }

d.addEventListener('click', (e) => {
    let elem = e.target.dataset.id;
    if (elem == "edit") {
        app.UserBook.fullView(elem);
        editModal.style.display = "block";
    }
}, false);

Answer 1

[0xD34F]

if (elem == "edit") {
    app.UserBook.fullView(elem);

Понятно, elem - это строка.

fullView(elem) {
    const d = document;
    const i = elem;
    d.querySelector('#Edname').value = this.items[i].fname;

И используя эту строку как ключ, вы пытаетесь что-то достать из this.items.

Из тех самых items, которые вроде бы массив:

for (let i = 0; i < this.items.length; i++) {

Как-то странно получается, не находите?

Comments

[kikosko]

Когда делаю цикл, отображаться только последний добавленный элемент

[0xD34F]

kikosko, и?

[kikosko]

то есть, нажимаю на первый элемент отображаются в модальном окне данные последнего.

[0xD34F]

kikosko, дальше-то что? Как я могу воспользоваться этой информацией для помощи вам, если мне неизвестно, что там у вас и как? Выложите код в песочницу, что ли.

[kikosko]

0xD34F, код : )

[0xD34F]

kikosko, создаёте элемент tr и в innerHTML пишете ему ещё tr? Умно, умно.

Можно вписывать индекс элемента в dataset так же, как вы это делаете с действием "edit" на кнопках, типа так. Лучше конечно какой-нибудь уникальный id, по которому затем искать нужный элемент, потому что после удаления какого-либо элемента кроме последнего индексы частично или полностью разъедутся.

[kikosko]

Спасибо !

Answer 2

[Антон Спирин]

Вы передаете в вызов fullView(elem) аргументом elem либо строку 'edit', либо строку 'rubbish'.
Естественно в вашем массиве нет таких элементов, поэтому вы и получаете ошибки при попытке обращения к их свойствам:

this.items.edit.fname;  // Uncaught TypeError: Cannot read property 'fname' of undefined
this.items.rubbish.fname;  // Uncaught TypeError: Cannot read property 'fname' of undefined

Comments

[kikosko]

с помощью "rubbish", я удаляю элементы. По тому же принципу пытался сделать вывод в модальном окне в значениях инпутов данных созданного контакта, для дальнейшего его редактирования.
Если интересно, вот весь код

[Антон Спирин]

kikosko, вы зачем-то передаете эту строку в вызов fullView, где пытаетесь использовать как индекс элемента массива.

[kikosko]

Антон Спирин, я хотел использовать дата атрибут в качестве индекса. Что бы вы посоветовали сделать ?