Как вывести значения массива JS по запросу к input?

Question

Как можно создать и вывести значения из массивов js. Например есть массив: 'Семен': {age: 25, height: 180, weight: 80}, 'Игорь': {age: 27, height: 165, weight: 70},

Так-же есть html страница с простой формой: Input + Кнопка Submit

Так вот задача, состоит в том, чтоб при вводе в инпут "Игорь" и нажатия на кнопку - получить его данные. Но сделать это так, чтоб выводилась не просто строка, а была возможность добавить теги, например обернуть всё в таблицу.

Есть такой код, но он выводит всё как 1 строку:

const users = {
  'Семен':  {age: 25, height: 180, weight: 80},
  'Игорь':  {age: 27, height: 165, weight: 70},
};

myForm.addEventListener('submit', evt => {
  evt.preventDefault();
  
  const name = myForm.name.value;
  const user = users[name] || null;

  out.textContent = JSON.stringify(user, null, 4);
});

<form action="" id="myForm">
  <input name="name">
  <input type="submit">
</form>

<pre id="out"></pre>

Answer 1

Например так?

const users = {
  'Семен':  {age: 25, height: 180, weight: 80},
  'Игорь':  {age: 27, height: 165, weight: 70},
};

myForm.addEventListener('submit', evt => {
  evt.preventDefault();
  
  const name = myForm.name.value;
  const user = users[name] || null;
  let user_data = '';
  for (let key in user) {
    user_data += `<tr><td>${key}</td><td>${user[key]}</td></tr>`;
  }
    let data_table = `<table>${user_data}</table>`
  out.innerHTML = data_table
});

table, td {
   border-collapse: collapse;
   border: 1px solid black;
   padding: 5px;
   
}

<form action="" id="myForm">
  <input name="name">
  <input type="submit">
</form>

<pre id="out"></pre>

Answer 2

const users = {
  'Семен': {
    age: 25,
    height: 180,
    weight: 80
  },
  'Игорь': {
    age: 27,
    height: 165,
    weight: 70
  },
}

function table(user) {
  const [t, r, d] = ['table', 'tr', 'td'].map((e) => document.createElement(e))
  for (let pv of Object.entries(user)) {
    let nr = r.cloneNode();
    [d.cloneNode(), d.cloneNode()].forEach((e, i) => {
      e.textContent = pv[i]
      nr.appendChild(e)
    })
    t.appendChild(nr)
  }
  return t
}

myForm.addEventListener('submit', evt => {
  evt.preventDefault()
  const name = myForm.name.value.trim()
  if (!users[name]) {
    return
  }
  while (out.firstChild) {
    out.removeChild(out.firstChild)
  }
  out.appendChild(table(users[name]))
})

td {
  border-style: solid;
}

<form action="" id="myForm">
  <input name="name">
  <input type="submit">
</form>
<pre id="out"></pre>

БЛОГ НА HUSL

Как вывести значения массива JS по запросу к input?

Ответы (2 шт):