Display stored Array Objects to List in Javascript to HTML

Question

I'm Trying to make a list display in HTML of the stored details i put in my object using Javascript. which should look like this

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

I used for in loop to display all the inputted objects, but it this happened

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

Here is the code for the 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]);
    }
}

And this is for the 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>

Pretty sure that I did something wrong with the for in loop, but i don't know exactly where. Please help. I'm new in javascript. Thanks so much.

Mamun · Accepted Answer · 2020-02-18 12:53:23Z

Instead of append() try with insertAdjacentHTML() or innerHTML. You also do not need the loop (since you are updating the HTML in each click), you can simply populate the last item in the array:

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>

Jacob · Accepted Answer · 2020-02-18 12:35:01Z

0

person is an array. use for of. Then use x directly.

for in is for objects. If you use it on an array, you will just get the index.

answered Feb 18, 2020 at 12:35

Jacob

9262 gold badges8 silver badges19 bronze badges

Comments

Tox · Accepted Answer · 2020-02-18 12:55:07Z

0

The correct way is by using the innerHTML method instead:

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

I am not sure as to why yours does not work though.

answered Feb 18, 2020 at 12:55

Tox

3042 silver badges11 bronze badges

Comments

Kate Orlova · Accepted Answer · 2020-02-18 13:24:02Z

0

You need to change the for-loop to use for-of instead of for-in. You need the values and not the keys

for(let x of person)

and then instead of person[x], you already have the object you need so use as below

.append("name: " + x.name + " , " + "age : " + x.age

edited Feb 18, 2020 at 13:24

Kate Orlova

3,3585 gold badges15 silver badges37 bronze badges

answered Feb 18, 2020 at 12:36

tobiasj

1

Collectives™ on Stack Overflow

Display stored Array Objects to List in Javascript to HTML

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related