Отображение значений ассоциативного массива с использованием элементов HTML - PullRequest
0 голосов
/ 04 мая 2018

Я хочу отобразить значение ассоциативного массива, используя элементы html, но я не могу получить значения, потому что он всегда выводит undefine.

мой код работает следующим образом: пользователь зарегистрирует данные, зарегистрированные данные будут сохранены в объекте и будут использовать ключ «имя пользователя» для доступа к нему. Когда пользователь ищет имя пользователя, значения должны отображаться с использованием элементов HTML.

вот мой код. спасибо

var storage = [];

function viewUserArray()
{   
    var zName = document.getElementById('checkArray').value;
    var html = "<h1> Username Details </h1>";
    var anotherhtml = "<p>";
    var uName;
    var fName;
    var elmail;
    var pword;
    var b_day;
    var g_nder;

    for (key in storage)
    {
        if(key === zName)
        {
            uName = storage[key].uName;
            fName = storage[key].fName;
            elmail = storage[key].elmail;
            pword = storage[key].pword;
            b_day = storage[key].b_day;
            g_nder = storage[key].g_nder;

            html +=  "<p>Username : " + uName + "</p>";
            html +=  "<p>Full Name : " + fName + "</p>";
            html +=  "<p>Email : " + elmail + "</p>";
            html +=  "<p>Password : " + pword + "</p>";
            html +=  "<p>Age : " + b_day + "</p>";
            html +=  "<p>Gender : " + g_nder + "</p>";
        }
        document.getElementById("target").innerHTML = html;
    }
}

function setValuesArray()
{
    var uName = document.getElementById('username').value;
    var fName = document.getElementById('fullName').value;
    var elmail = document.getElementById('email').value;
    var pword = document.getElementById('password').value;
    var b_day = getAge();
    var g_nder = document.getElementById('gender').value;

    storage[uName] = (storage[uName]||[]).concat({//add user to storage[uName]
      "Username" : uName,
      "Full Name" : fName,
      "Email" : elmail,
      "Password" : pword,
      "Age" :  b_day,
      "Gender" : g_nder                   
    });
}

1 Ответ

0 голосов
/ 04 мая 2018

Почти так же, как и другой ответ:

var storage = {};

function viewUserArray()
{   
    var zName = document.getElementById('checkArray').value;
    var html = "<h1> Username Details </h1>";
    var anotherhtml = "<p>";
    var uName;
    var fName;
    var elmail;
    var pword;
    var b_day;
    var g_nder;
    if(!storage[zName]){
      console.log("doesn't exist");
      return;
    }

    uName = storage[zName].uName;
    fName = storage[zName].fName;
    elmail = storage[zName].elmail;
    pword = storage[zName].pword;
    b_day = storage[zName].b_day;
    g_nder = storage[zName].g_nder;

    html +=  "<p>Username : " + uName + "</p>";
    html +=  "<p>Full Name : " + fName + "</p>";
    html +=  "<p>Email : " + elmail + "</p>";
    html +=  "<p>Password : " + pword + "</p>";
    html +=  "<p>Age : " + b_day + "</p>";
    html +=  "<p>Gender : " + g_nder + "</p>";
    document.getElementById("target").innerHTML = html;
    }
}

function setValuesArray()
{
    var uName = document.getElementById('username').value;
    var fName = document.getElementById('fullName').value;
    var elmail = document.getElementById('email').value;
    var pword = document.getElementById('password').value;
    var b_day = getAge();
    var g_nder = document.getElementById('gender').value;
    //I assume there is only one uName so update the uName if it exist and create it if it doesn't
    // storage[uName] = (storage[uName]||[]).concat({//add user to storage[uName]
    storage[uName] = {//update or add
      uName,
      fName,
      elmail,
      pword,
      b_day,
      g_nder                   
    };
}

Вы также не всегда получаете значения под теми же ключами, в которых сохраняете их:

Вы сохраняете пользователя как: "Username" : uName,, но затем магически ожидаете получить значение с помощью: storage[zName].uName Сохранение значения под ключом «Имя пользователя», но затем пытаетесь получить значение с помощью ключа «uName»

...