Отобразить сохраненные объекты массива в список от Javascript до HTML - PullRequest
Новая
       5

Отобразить сохраненные объекты массива в список от Javascript до HTML

0 голосов
/ 18 февраля 2020

Я пытаюсь отобразить список в HTML сохраненных деталей, которые я поместил в свой объект, используя Javascript. который должен выглядеть следующим образом 

name: Tester1 , age: 1
name: Tester2 , age: 2
name: Tester3 , age: 3

Я использовал для in l oop, чтобы отобразить все введенные объекты, но это произошло 

Actual:
name: Tester1 , age: 1name: Tester1 , age: 1name: Tester2 , age: 2name: Tester1 , age: 1name: Tester2 , age: 2name: Tester3 , age: 3

Вот код для Jascript 

var person = [];
function profile(e) {
    //to stop form from resubmitting
    e.preventDefault(); 

    var pProfile = {
        name: document.getElementById('name').value,
        age: document.getElementById('age').value
    }
    person.push(pProfile);
    //used to convert result to string
    var myJSON = JSON.stringify(person);

    document.forms[0].reset();

    //display in Final Obejct div 
    document.getElementById("fObject").innerHTML = myJSON;

    //display converted objects to
    for (let x in person){
         document.getElementById("rFormat").append("name: " + person[x].name + " , " + "age : " + person[x].age + "<br>");
         console.log(person[x]);
    }
}

И это для HTML

    <div id="part1">
        <h3>Part 1</h2>
        <form id="profile" onsubmit="profile(event)" action="#">
            Name: <input type="text" id ="name">
            Age: <input type="text" id ="age">
            <input type="Submit" value="Add">           
        </form>

        <h4>Final Object</h4>
        <div id="fObject"></div>

        <h4>Readable Format</h4>
        <div id="rFormat"></div>
    </div>

Уверен, что я сделал что-то не так с для в l oop, но я точно не знаю где. Пожалуйста помоги. Я новичок в javascript. Большое спасибо.

Ответы [ 4 ]

1 голос
/ 18 февраля 2020

Вместо append() попробуйте insertAdjacentHTML() или innerHTML. Вам также не нужен l oop (поскольку вы обновляете HTML при каждом нажатии), вы можете просто заполнить последний элемент в массиве: 

var person = [{name: "Tester1",age: 1 },{name: "Tester2",age: 2 },{name: "Tester3",age: 3 }];
var person = [];
function profile(e) {
  //to stop form from resubmitting
  e.preventDefault(); 

  var pProfile = {
      name: document.getElementById('name').value,
      age: document.getElementById('age').value
  }
  person.push(pProfile);
  //used to convert result to string
  var myJSON = JSON.stringify(person);

  document.forms[0].reset();

  //display in Final Obejct div 
  document.getElementById("fObject").innerHTML = myJSON;

  //display converted objects to
  var p = person[person.length-1]; //last item in the array
  document.getElementById("rFormat").innerHTML += "name: " + p.name + ", " + "age : " + p.age + "<br>";
}
<div id="part1">
  <h3>Part 1</h2>
  <form id="profile" onsubmit="profile(event)" action="#">
      Name: <input type="text" id ="name">
      Age: <input type="text" id ="age">
      <input type="Submit" value="Add">           
  </form>

  <h4>Final Object</h4>
  <div id="fObject"></div>

  <h4>Readable Format</h4>
  <div id="rFormat"></div>
</div>
0 голосов
/ 18 февраля 2020

Правильный способ - вместо этого использовать внутренний HTML метод: 

for (let x in person) {
    document.getElementById("rFormat").innerHTML += person[0] + "<br>";
}

Я не уверен, почему ваш не работает, хотя.

0 голосов
/ 18 февраля 2020

Вам нужно изменить for-loop, чтобы использовать for-of вместо for-in. Вам нужны значения, а не ключи 

for(let x of person)

, а затем вместо person[x] у вас уже есть нужный объект, поэтому используйте как показано ниже 

.append("name: " + x.name + " , " + "age : " + x.age
0 голосов
/ 18 февраля 2020

person - это массив. используйте for of. Затем используйте x напрямую.

for in для объектов. Если вы используете его в массиве, вы просто получите индекс.

...